렌더링 순서를 만드는 법

최초 렌더링이 끝난이후에, 리액트가 리렌더링을 queueing(대기열, 순서화) 하는 방법에는 여러가지가 있다.

• 클래스 컴포넌트

  *this.setState()*

  *this.forceUpdate()*

• 함수형 컴포넌트

  *useState()*

  *useReducer()*

일반적인 렌더링 동작

여기에서 우리가 기억해야할 중요한 것이 있다.

리액트의 기본적인 동작은 부모 컴포넌트가 렌더링되면, 리액트는 모든 자식 컴포넌트를 순차적으로 리렌더링 한다는 것이다.

예를 들어, A > B > C > D 순서의 컴포넌트 트리가 있다고 가정해보자. B 에 카운터를 올리는 버튼이 있고, 이를 클릭했다고 가정해보자.

1. *B 의 setState() 가 호출되어, B의 리렌더링이 렌더링 큐로 들어간다.*
2. 리액트는 트리 최상단에서 부터 렌더링 패스를 시작한다.
3. *A 는 업데이트가 필요하다고 체크 되어 있지 않을 것이므로, 지나간다.*
4. *B 는 업데이트가 필요한 컴포넌트로 체크되어 있으므로, B를 리렌더링 한다. B 는 C 를 리턴한다.*
5. *C 는 원래 업데이트가 필요한 것으로 간주되어 있지 않았다. 그러나, 부모인 B 가 리렌더링 되었으므로, 리액트는 그 하위 컴포넌트인 C 를 렌더링 한다. C 는 D 를 리턴한다.*
6. *D 도 마찬가지로 렌더링이 필요하다고 체크되어 있지 않았지만, C 가 렌더링된 관계로, 그 자식인 D 도 렌더링 한다.*

즉, 컴포넌트를 렌더링 하는 작업은, 기본적으로 하위에 있는 모든 컴포넌트 또한 렌더링 하게 된다.

또한 일반적인 렌더링의 경우, 리액트는 props 가 변경되어 있는지 신경쓰지 않는다. 부모 컴포넌트가 렌더링 되어 있기 때문에, 자식 컴포넌트도 무조건 리렌더링 된다.