리액트의 핵심
리엑트의 모든 리렌더링은 상태변경에서 시작된다. 컴포넌트가 리렌더링 될 때 모든 하위 요소들은 다시 렌더링 된다.
"Increment" 버튼을 클릭하면 상태변경이 트리거 되고, Counter 컴포넌트의 리렌더링이 일어나며, Counter에 의해 렌더링 되는 BigCountNumber 또한 리렌더링 된다.
- 상태 변수가 변경될 때마다 전체 앱이 리렌더링된다. (리엑트에서 발생하는 모든 상태 변경이 애플리케이션 전체의 렌더링을 강제하는 것은 아님.)
=> 리렌더링은 상태를 가지고 있는 컴포넌트와 해당 컴포넌트의 하위 컴포넌트에만 영향을 준다.
Why? 리엑트의 주요작업은 애플리케이션 UI를 리엑트 상태와 동기화하여 유지하는 것. 리렌더링의 요점은 변경해야할 사항을 파악하는 것. 리엑트는 이전 상태의 스냅샷과 새로운 상태의 스냅샷의 차이점 찾기를 통해 변경사항을 확인하고 다음 상태변경을 기다린다.
*리렌더링의 핵심은 상태변경이 사용자의 인터페이스에 어떻게 영향을 미치는지 파악하는 것! 정확한 스냅샷을 위해 잠재적으로 영향을 받는 모든 컴포넌트를 다시 렌더링 해야함.
- 컴포넌트는 props가 변경되기 때문에 다시 렌더링된다.
=> 컴포넌트가 다시 렌더링되면 props를 통해 특정 상태 변수가 전달되는지 여부에 관계없이 모든 하위 컴포넌트를 다시 렌더링하려고 한다. ref를 props로 전달하면 리엑트는 마지막 렌더링 이후로 변경되었는지 여부를 알 수 없으므로, 안전하게 리렌더링을 한다.
Why? 리엑트의 첫번째 목표는 동기화 상태의 유지를 위함이므로, 사용자에게 오래된 UI를 보여주지 않기 위해 많은 렌더링을 발생시킨다.
+컴포넌트를 React.memo로 래핑하거나, React.PureComponent와 같은 클래스 컴포넌트를 사용하면 특정 리렌더링 요청을 무시하는 순수 컴포넌트를 만들 수 있다. (props가 변경되지 않는 한 다시 렌더링할 필요가 없다는 의미, 이전 스냅샷을 기억하여 재사용 / 모든 단일 컴포넌트를 이런 방식으로 구성하는 것은 비생산적이지만, 특정상황에서 하위요소들이 많은 컴포넌트나 내부 작업이 많은 경우는 적절히 사용하는 것이 유용할 수 있음. 또한 컴파일 단계에서 코드를 “auto-memoize”(자동메모화) 할 수 있는지 리엑트 팀에서 연구 중)
Reference
이외 React Devtool 등을 활용한 프로파일링 등이 수록된
번역문 (https://bit.ly/3Rjt2IV)
원문 (https://www.joshwcomeau.com/react/why-react-re-renders/)
'자료 > article' 카테고리의 다른 글
| useMemo 그리고 useCallback 이해하기 (0) | 2022.11.24 |
|---|---|
| It’s 2022, Please Don’t Just Use “console.log” Anymore (0) | 2022.09.11 |
| 변경에 대해 의사소통하기 (0) | 2022.09.08 |
| 과한 지연 로딩이 웹 성능에 미치는 영향 (0) | 2022.08.18 |
