렌더링

Render 단계

리액트가 함수를 호출하여 Virtual DOM이 만들어지는 단계

컴포넌트 렌더링 - 컴포넌트를 실행하여 return문으로 리액트 엘리먼트를 반환

엘리먼트 렌더링 - 엘리먼트를 DOM에 반영

Fiber - 컴포넌트 및 컴포넌트의 입력과 출력에 대한 정보를 포함한 Javascript 객체로 렌더링을 할 때 각 컴포넌트마다 Fiber Node가 생성된다. 이는 Props와 State가 저장되는 공간으로 리액트는 useState를 만나면 초기값을 Fiber Node에 저장한다. 리-렌더링 시 Fiber Node에 저장된 값을 사용하므로 값에 변경이 있다면 반영되어 렌더링된다.
Reconciliation - 이전의 렌더링 결과와 현재의 렌더링 결과를 비교하여 변경된 부분을 갱신하는 작업(Diffing Algorithm). 자식들이 key를 가지고 있다면, 리액트는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인하기 때문에 자식 노드에 key값을 할당하는 것이 중요하다.

리액트에서 map 반복문을 쓸때 key값에 항목의 순서가 바뀔 수 있는 경우 index를 쓰면 안된다. 중간에 리스트에 아이템이 추가되고 삭제될 때 key가 같으면 DOM요소가 이전과 동일한 구성 요소를 나타낸다고 가정하기 때문이다. 대신 고유한 속성인 id property를 key 값으로 사용하고 데이터가 id를 포함하고 있지 않다면 중복되지 않는 property를 사용한다.

Commit 단계

Virtual DOM이 실제 DOM에 반영되는 단계로 DOM을 업데이트한 후 라이프사이클 메소드와 useEffect가 실행된다.

렌더링과 DOM을 업데이트 하는 것은 같은 것이 아니며 컴포넌트는 어떠한 가시적 변화 없이도 렌더링 가능하다.

리액트는 Virtual DOM을 사용하기 때문에 DOM 조작으로 인한 브라우저 렌더링을 최소화 한다는 장점이 있는데, 직접 DOM을 조작하면 이러한 장점을 놓치게 된다.

리-렌더링

리액트에서 리-렌더링은 일반적으로 state와 props가 변경 되었을 때 발생한다.

내부 상태(state) 변경 시 발생한다.
부모에게 전달받은 값(props) 변경 시 발생한다.
중앙 상태값(Context value 혹은 redux store) 변경 시 발생한다.
부모 컴포넌트가 리-렌더링되면 JSX 안에서 사용된 모든 자식 컴포넌트도 리-렌더링이 발생한다. 이때, props나 children으로 받은 컴포넌트는 자식 컴포넌트가 아니다.

함수나 객체는 부모 컴포넌트가 호출될 때마다 새로 만들어지기 때문에 참조값이 달라진다. 따라서 props로 전송한 참조형 데이터는 값이 변경되지 않아도 리-렌더링을 발생시킨다.

렌더링과 리-렌더링

React란?