[React] React Children Props의 기묘한 렌더링 최적화 현상의 원인

📒  React의 children prop

리액트에서는 동적으로 자식 컴포넌트를 렌더링 하기 위해 부모 컴포넌트에서 children prop을 이용할 수 있습니다.

 

모두가 잘 알고 있듯 사용법은 다음과 같습니다.

const Children = () => {
  return <div>Children</div>;
};

const Parent = ({ children }: { children: JSX.Element }) => {
  return <div>{children}</div>;
};

export const Container = () => {
  return (
    <div>
      <Parent>
        <Children />
      </Parent>
    </div>
  );
}

이러한 사용 방식은 React Context의 Provider, BrowserRouter, RecoilRoot를 사용할 때도 동일합니다.

 

여기까진 늘 알고 있었던 내용입니다.

---

📌 Children Prop에 대한 의구심

저는 Context를 이용해 모달 라이브러리를 만들던 도중

Context를 값과 값을 설정하는 Context 두 개로 분리하는게 최적화에 이점이 있다는 것을 보고

다음과 같이 Provider 컴포넌트를 만들던 도중 문득 의구심이 들었습니다.

<ValueContext.Provider value={...}>
  <SetContext.Provider value={...}>
    {children}
  </SetContext.Provider>
</ValueContext.Provider>

분명히 리액트의 리렌더링 조건엔 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 된다고 알고 있었는데,

ValueProvider의 value가 바뀌면 그 자식 컴포넌트인 SetContext, children 또한 같이 리렌더링 되는거 아닌가???

라는 생각에 꽂혀 다 제쳐두고 children prop의 작동 방식에 대해 파고들기 시작했습니다.

---

📌 Children Prop의 최적화 현상

위 예제에서 조금 수정한 코드입니다.

import { useState } from "react";

const Children = () => {
  console.log("Children 컴포넌트 리렌더링");
  return <div>Children</div>;
};

const Parent = ({ children }: { children: JSX.Element }) => {
  const [state, setState] = useState(false);
  const handleClickButton = () => setState(!state);
  console.log("Parent 컴포넌트 리렌더링");
  return (
    <div>
      <button onClick={handleClickButton}>Parent 상태변화</button>
      {children}
    </div>
  );
};

export const Container = () => {
  return (
    <div>
      <Parent>
        <Children />
      </Parent>
    </div>
  );
};

 

위 버튼을 눌러 Parent 컴포넌트에 리렌더링을 발생시키면 Children 컴포넌트는 어떻게 될까요?

놀랍게도 Children 컴포넌트는 React.memo를 사용해 메모이제이션 한 것 처럼 리렌더링이 발생하지 않았습니다!

 

어떻게 부모 컴포넌트인 Parent가 리렌더링 되었는데 자식인 Children 컴포넌트는 리렌더 되지 않았을까요?

---

📌 Children Prop, 최적화 현상의 이유

위 예제에서 Container 컴포넌트만 가져왔습니다.

export const Container = () => {
  return (
    <div>
      <Parent>
        <Children />
      </Parent>
    </div>
  );
};

 

이 컴포넌트에서 Parent 컴포넌트의 children prop을 다른 방식으로 표현하면 다음과 같습니다.

<div>
  <Parent children={Children()} />
</div>

이렇게 함수 형태로 보니 부모 자식 관계와 JSX 태그의 형태에 대해서만 매몰되어 보이지 않던 것들이 보이기 시작합니다.

 

사실 children prop에는 그저 함수를 통해 반환 된 객체를 넣어주었을 뿐이고,
이 객체는 Container 컴포넌트에서 호출된 것이라는 것을 알 수 있습니다.

그러니깐 children이란 말에 속아 위와 같은 계층 구조로 생각할 수 있지만
실제로는 아래와 같은 계층 구조로 되어 있는 것이죠.

그러니 Children 컴포넌트가 리렌더링 되려면 Parent 컴포넌트가 아니라

실제 부모인 Container 컴포넌트가 리렌더링 되어야 합니다.

 

그럼 이 원리를 이용해 리렌더링이 적은 Container에 children props를 이용하는 컴포넌트를 잘만 이용한다면

메모이제이션과 유사한 렌더링 최적화 현상을 유도할 수 있을 것 같습니다.