🤔 리액트가 렌더링되는 여러 조건들에 대해 말해주세요.
- 컴포넌트의 상태값 state가 변경된 경우
- 부모 컴포넌트로부터 전달받은 props가 변경된 경우
- 부모 컴포넌트가 렌더링되면, 모든 자식 컴포넌트들이 순차적으로 리렌더링
- 클래스 컴포넌트의 forceUpdate 메소드가 호출된 경우
🤔 함수 컴포넌트가 호출되어 화면에 그려지기까지의 과정에 대해 설명해주세요.
React 마운트 과정
- 함수 컴포넌트 호출
- 구현부 실행
-props 취득, hook 함수 실행, 내부 변수 및 함수 생성 - return 실행
-렌더링 시작 - 렌더 단계(Render Phase)
-가상 DOM 생성 - 커밋 단계(Commit Phase)
-변경 사항을 실제 DOM에 반영 - useLayoutEffect
-브라우저가 화면에 그려지기 전에, useLayoutEffect 훅에 등록해둔 effect(부수효과 함수)가 ‘동기’로 실행된다.
-이 때 state, redux store 등의 변경이 있다면 한번 더 리렌더링 된다. - Paint
-브라우저가 실제 DOM을 화면에 그린다.
-didMount가 완료된다. - useEffect
-Mount되어 화면이 그려진 후, useEffect 훅에 등록해둔 effect(부수효과 함수)가 ‘비동기’로 실행된다.
🤔 함수 컴포넌트가 재호출되어 화면에 그려지기까지의 과정에 대해 설명해주세요.
React 리렌더링 과정
- 함수 컴포넌트 재호출
- 구현부 실행
-props 취득, hook 실행, 내부 변수 및 함수 재생성 - return 실행
-렌더링 시작 - 렌더 단계(Render Phase)
-새로운 가상 DOM 생성 후, 이전 가상 DOM과 비교하여 바뀐 부분을 실제 DOM에 반영하도록 결정한다. - 커밋 단계(Commit Phase)
-바뀐 부분만 실제 DOM에 반영한다. - useLayoutEffect
-브라우저가 화면에 그려지기 전에, useLayoutEffect 훅에 등록해둔 effect(부수효과 함수)가 ‘동기’로 실행된다.
-이 때 state, redux store 등의 변경이 있다면 한번 더 리렌더링 된다. - Paint
-브라우저가 실제 DOM을 화면에 그린다.
-didMount가 완료된다. - useEffect
-update되어 화면이 그려진 후, useEffect 훅에 등록해둔 effect(부수효과 함수)가 ‘비동기’로 실행된다.
-effect에 return 부분이 있다면, 구현부보다 먼저 실행된다.
🤔 부모 컴포넌트가 렌더링되어 모든 자식 컴포넌트들이 순차적으로 리렌더링 되는 과정에 대해 설명해주세요.
리액트는 기본적으로 부모 컴포넌트가 렌더링되면 하위에 있는 모든 자식 컴포넌트들 또한 순차적으로 리렌더링 된다.
예를 들어, A > B > C > D 순서의 컴포넌트 트리가 있다고 가정해보자. B에 카운터를 올리는 버튼이 있고, 이를 클릭했다고 가정해보자.
B의setState()가 호출되어, B의 리렌더링이 렌더링 큐로 들어간다.- 리액트는 트리 최상단에서 부터 렌더링 패스를 시작한다.
A는 업데이트가 필요하다고 체크되어 있지 않을 것이므로, 지나간다.B는 업데이트가 필요한 컴포넌트로 체크되어 있으므로, B를 리렌더링 한다.B는C를 리턴한다.C는 원래 업데이트가 필요 한것으로 간주되어 있지 않았다. 그러나, 부모인B가 렌더링 되었으므로, 리액트는 그 하위 컴포넌트인C를 렌더링 한다.C는D를 리턴한다.D도 마찬가지로 렌더링이 필요하다고 체크되어 있지 않았지만,C가 렌더링된 관계로, 그 자식인D도 렌더링 한다.
즉 컴포넌트를 렌더링 하는 작업은 기본적으로, 하위에 있는 모든 컴포넌트 또한 렌더링 하게 된다.
즉, 상위 컴포넌트에서 setState()를 호출한다는 것은 기본적으로, 해당 컴포넌트 트리에 있는 모든 컴포넌트를 렌더링 한다는 것을 의미한다.
이제 트리의 대부분의 컴포넌트가 동일한 렌더링 결과물을 반환할 가능성이 높기 때문에, 리액트는 DOM을 변경할 필요가 없다. 그러나 리액트는 여전히 컴포넌트에게 렌더링을 요청하고, 이 렌더링 결과물을 비교하는 작업을 요구한다. 이러한 UI 변화가 없는 불필요한 렌더링은 지양하는 것이 바람직하다.
Better than yesterday