어제 useContext를 하던 중, ContextProvider Component 내부의 children 객체들은 왜 리렌더링 하지 않는가가 궁금해졌다.
children props로 받아온 Component는 왜 재렌더링을 안하는가?
위 코드는 About 컴포넌트를 Home 컴포넌트가 children으로 받아 실행한다. Home 컴포넌트의 버튼을 누르면 어떻게 될까?
가지고 있는 지식상으로는 children props로 받아왔기 때문에, 자식으로 인지해 재렌더링이 될 것이다.
뭐지???
정말 많이 찾아봤다.. 정말 많은 실험을 해본 뒤, 하나의 결과를 알 수 있었다.
결론
블로그를 하나 찾았다.. (이하 Parent와 Child 컴포넌트로 표현)
children에 대한 깊은 고찰을 하신 글인데,(감사드립니다 흑흑) 결론적으로는 이렇다
children이라는 prop으로 받아와서 쓰인다면, 당연히 prop 넘겨주는 것 처럼 children을 쓸 수 있다 ->
<Parent>{<Child />}<Parent/> = <Parent children={<Child />} />
근데.. 원래 props로 inline으로 들어간 객체들은 항상 새로운 객체로 바뀐다(불변성 보장)
하지만 컴포넌트 Element는 따로 새로운 객체로 되지 않고, React 내부에서 Memoization을 하기 때문에 element나 속성, state가 바뀌지 않는 이상 새로운 객체를 반환하지 않는다.
children으로 전달된 컴포넌트가 재렌더링되지 않는 이유는 React가 JSX 내부에서 생성된 React Element를 메모이제이션(Memoization)하기 때문
- 즉, children으로 <Child />을 전달하면, 이 <About />의 React Element는 Home이 리렌더링되더라도 새로운 객체로 생성되지 않고, 기존 객체를 재 사용한다
따라서 Parent의 상태 변경(useState)으로 인해 리렌더링되더라도, children props로 받아온 Child의 속성이나 상태가 변경되지 않는 한 React는 불필요한 렌더링을 방지하고 그대로 유지한다.
key 값 변경과 부모 컴포넌트의 리렌더링
children도 props이므로, key 값이 바뀌면 새로운 객체가 되는가?
맞다.
key값이 바뀌면 React는 해당 노드를 새로운 요소로 간주하고 Virtual DOM을 새로 생성한다.- 따라서
props.children도 새로운 객체가 된다.
하지만, 부모가 반드시 리렌더링되는 것은 아니다.
React는 렌더링을 최적화하기 위해 부모 컴포넌트의 리렌더링 여부를 결정한다.
props.children이 변경되어도 부모가 리렌더링되지 않는 경우
- 부모 컴포넌트의
props가 바뀌면 기본적으로 리렌더링된다. - 하지만
React.memo를 사용하면 불필요한 리렌더링을 방지할 수 있다.
예를 들어,
1. 부모의 state가 변경되면 → 부모는 항상 새로운 Virtual DOM을 생성한다.
2. 부모의 props가 변경되면 → 기본적으로 리렌더링되지만, React.memo를 사용하면 방지할 수 있다.
3. key 값 변경으로 children이 새로운 객체가 되더라도 → 부모의 state나 props가 변하지 않으면 리렌더링되지 않는다.
즉, 자식의 key가 바뀌어도 부모가 직접적인 영향을 받지 않으면 부모의 Virtual DOM은 다시 생성되지 않는다.
결론
key값이 변경되면 새로운 객체가 된다.- 하지만 부모가 반드시 리렌더링되는 것은 아니다.
- React는 부모의
state나props가 변하지 않으면 불필요한 리렌더링을 방지한다.
즉, 부모가 Virtual DOM을 다시 만드는지 여부는 부모의
state나props변경 여부에 달려 있다.
