[Learning React] 4장 - 리액트의 작동 원리

4.1 페이지 설정

  - React 라이브러리; 뷰를 만들기 위한 라이브러리

  - ReactDOM 라이브러리; UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리

  - 항상 페이지에서 리액트 관련 라이브러리를 읽어들인 다음에 JS 코드 넣어야 함

4.2 리액트 엘리먼트

  - 리액트는 브라우저 DOM을 갱신해주기 위해 만들어진 라이브러리

    - 코드로 DOM API 직접 조작하지 않음

    - 리액트에게 어떤 UI를 생성할지 지시하면, 리액트가 명령에 맞춰 Element 렌더링을 조절해 줌

  - 가상 DOM은 리액트 Element로 이뤄짐 (JS 객체)

  - 개발자가 가상 DOM을 변경하면 리액트는 DOM API를 통해 변경 사항을 효율적으로 렌더링해 줌

  - 리액트 엘리먼트는 브라우저 DOM을 만드는 방법을 알려주는 명령

    - 렌더링 과정에서 리액트는 리액트 엘리먼트를 실제 DOM 엘리먼트로 변환함

  - React.createElement()

    - 첫 번째 인자는 만들려는 엘리먼트의 타입 정의

    - 두 번째 인자는 엘리먼트의 프로퍼티 표현

    - 세 번째 인자는 만들려는 엘리먼트를 여는 태그와 닫는 태그 사이에 들어가야 할 자식 노드 표현

4.3 ReactDOM

  - ReactDOM; 리액트 엘리먼트를 브라우저에 렌더링하는 데 필요한 모든 도구가 들어있음

     - ReactDOM.render()

       - 첫 번째 인자는 렌더링할 리액트 엘리먼트

       - 두 번째 인자는 렌더링이 일어날 대상 DOM 노드

    - 여러 리액트 엘리먼트들을 배열에 담아 렌더링 가능

  - 자식들

    - 리액트는 props.children을 사용해 자식 엘리먼트들을 렌더링 함 (엘리먼트 트리)

  - 데이터를 가지고 엘리먼트 만들기

    - UI 엘리먼트와 데이터 분리 가능

    - 배열 순회해서 자식 엘리먼트의 리스트 만들 때 각 자식 엘리먼트에 key 프로퍼티 넣는 것 권장

4.4 리액트 컴포넌트

  - 컴포넌트; 서로 다른 데이터 집합에 대해 같은 DOM 구조 재사용 가능

    - 엘리먼트를 재사용 가능한 조각으로 나눌 수 있는지 고려!

    - 함수를 작성해서 컴포넌트를 만듦 (UI에서 재활용 가능한 부품)

    - 함수형 컴포넌트를 만들고 데이터를 프로퍼티로 컴포넌트에 넘기기

  - 리액트 컴포넌트의 역사

    - createClass

    - 클래스 컴포넌트

---

[Source Code] 러닝 리액트 Ch04. 리액트의 작동 원리