React Start

What is React?

• 리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.

Framework: App 설계/개발 시 구조, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 등이 제공되는 인터페이스

Library: 특정 기능에 대한 API(도구 / 함수)를 모은 집합

 

라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다.

즉, 어플리케이션의 Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다.

라이브러리는 가져다가 사용하고 프레임워크는 그 안으로 들어가서 사용한다는 느낌으로 접근할 수 있습니다.

라이브러리와 달리 프레임워크는 이미 프로그래밍 규칙이 있어 극히 일부분만 조정을 해주면 목적을 달성할 수 있다.

 

Main Concepts

JSX

const element = <h1>Hello, world!</h1>;

• JSX(Javascript XML)는 React를 위해 태어난 새로운 자바스크립트의 문법의 확장입니다.

• JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있습니다.

• JSX를 사용하기 때문에, React는 작성한 코드를 컴파일하는 과정이 필요합니다. (Babel을 사용하는 이유)

• 컴파일을 거쳐 가면서도 JSX를 사용하는 이유는 뭘까요? 우리에게 친숙한 구문을 사용하여, 한눈에 이해하기 쉬운 개발 환경에서 작업을 할 수 있기 때문입니다.

Virtual DOM

• React 컴포넌트는 render를 호출하여 새로운 결과값을 return 합니다. 그렇지만 return 값은 바로 DOM 에 반영되지 않습니다. 다시 말해, 바로 브라우저에 render 되지 않습니다!
• React에서는 Virtual DOM이라는 개념이 등장합니다.
  1. 컴포넌트가 랜더될 때, return 값을 토대로 Virtual DOM이 생성됩니다.
  2. 이전 브라우저에 보여지고 있는 DOM과 비교하여, 변경된 부분을 확인하고
  3. 변경된 부분만 우리에게 보여지는 DOM 에 적용합니다.
• 30개의 노드를 하나 하나 수정하면, 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래한다는 것이죠.
• Virtual DOM은 DOM 차원에서의 더블 버퍼링 같다. 변화가 일어나면 그걸 오프라인 DOM 트리에 적용시키죠. 이 DOM 트리는 렌더링도 되지 않기때문에 연산 비용이 적어요. 연산이 끝나고나면 그 최종적인 변화를 실제 DOM 에 반영하는데 모든 변화를 하날 묶어서 딱 한번만. 그러면, 레이아웃 계산과 리렌더링의 규모는 커지겠지만, 다시 한번 강조하자면 딱 한번만 하는거에요.

Component

컴포넌트를 작성할 때, 컴포넌트 이름은 반드시 대문자로 시작해야 합니다!

• 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 종류가 있습니다.

Functional

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

• React에서 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수 형식으로 정의하는 것입니다.
• state나 lifecycle이 없는 일반 JavaScript 함수이므로 읽기 및 테스트가 수월합니다.
• 기본적으로는 state , lifecycle 등의 기능을 사용할 수 없습니다. 하지만 위 기능들을 함수형 컴포넌트에서도 사용할 수 있도록 Hooks가 등장했습니다. 

---

Class

class PetInfo extends React.Component {
    constructor() {
        super();
        this.state = {name: 'Max', type: 'dog'};
    }
    render() {
        return <h2>I am {this.state.name} the {this.state.type}</h2>;
    }
}

• 클래스 컴포넌트는 ES6의 class 키워드를 사용하여 만들어진 컴포넌트입니다.

• 클래스 컴포넌트의 경우 몇 가지 특징이 있는데요. 예제를 통해 살펴 보겠습니다.

  1. extends 키워드를 통해, React.Component 에 대한 상속을 작성해야 합니다.

     이를 통해 컴포넌트에 React.Component 의 기능에 대한 액세스 권한을 제공합니다.

  2. 클래스 컴포넌트의 경우,  render()메소드가 필수적으로 필요합니다. 이를 통해 HTML을 리턴합니다.

  3. Constructor 는 class에서 states나 props를 사용하기 위해필요한 생성자입니다.

     메서드를 바인딩하거나 state를 바꾸는 작업이 없다면, 생략 가능합니다.

  4. super(props) 는 부모 클래스 생성자(리액트에서는 React.Component)를 가리킵니다.

     props를 상속받아서 class 에서도 사용할 수 있게 도와줍니다.
     (constructor에서 super 호출 전에 this 를 사용할 수 없습니다.)

States

• 어떠한 컴포넌트에서 동적인 데이터를 관리하는 경우, state를 생성합니다.

• state는 직접 변경하시면 안 됩니다!

  state를 직접 변경하면 리액트가 변화를 감지하지 못하고, 그 결과 다시 랜더를 하지 않기 때문입니다. setState를 이용해야 합니다.

• state를 유일하게 할당 할 수 있는 곳은 constructor입니다.

• setState는 여러번 호출이 가능합니다. 리액트가 여러 setState 호출을 만나면, 각 setState 호출에 전달된 모든 객체를 추출하여 배치 작업을 수행합니다. 그 후, 이를 머지하여 단일 객체를 형성한 다음, 만들어진 단일 객체를 사용하여 setState()를 수행합니다.

Props

• props는 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터입니다. 읽기 전용입니다!
• 또한 불변한 속성을 가지고 있습니다. 동일한 입력이 주어지면 항상 동일한 출력을 랜더링합니다.

출처: https://webclub.tistory.com/458 [Web Club]

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 - 왜 Virtual DOM 인가?

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

Dan Abramov - 왜 super(props) 를 명시해 줘야 하는가?

React - Functional Component의 장점, Hook