Component & Rendering

컴포넌트

리액트에서 개발할 모든 애플리케이션은 컴포넌트라는조각으로 구성된다.

컴포넌트는 UI 구축작업을 훨씬 쉽게 만들어준다.

UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체이다.

컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM객체를 조작하는 명령형 프로그래밍 방식으로 구현했다.

기존 명령형 프로그래밍 vs 리액트 컴포넌트의 선언적 프로그래밍

명령어는 어떻게 를 중요하게 여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태이다. 선언형은 무엇을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태이다.

렌더링

컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다.

렌더링 트리거

1. 첫 리액트 앱을 실행했을 때
2. 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때
   1. 컴포넌트 내부 state가 변경되었을 때
   2. 컴포넌트 내부 state가 변경되었을 때
   3. 컴포넌트에 새로운 props가 들어올 때
   4. 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

리액트 앱이 실행되고 첫 렌더링이 일어나면 리액트는 컴포넌트의 루트에서 시작하여 아래 쪽으로 쭉 훑으며 컴포넌트가 반환하면 JSX 결과물을 DOM 요소에 반영한다.

리렌더링

첫 렌더링은 자동으로 일어났다. 리액트 앱이 실행되면 리액트는 전체 컴포넌트를 렌더링하고 결과물을 DOM에 반영해 브라우저상에 보여줬다. 첫 렌더링이 끝난 이후에 추가로 렌더링을 트리거 하려면 상태를 변경해주면 된다. setState 외에도 몇가지가 더 존재한다.

컴포넌트 상테에 변화가 생기면 리렌더링이 발생한다. 이때 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리한다.