TIL - 부모 - 자식 컴포넌트의 리렌더링

오늘은 React에서 부모-자식 컴포넌트의 리렌더링 조건에 대해 수업을 들으면서 블로그를 보고 정리했습니다.

 

 

요약

• 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링된다.
• 자식 컴포넌트란 부모 컴포넌트의 JSX 안에서 <Component /> 형태로 사용된 모든 컴포넌트이다.
• 형제 컴포넌트끼리는 서로 리렌더링에 영향을 미치지 않는다.

세부 내용

1. 컴포넌트 관계 이해:
   • 부모 컴포넌트가 리렌더링되면 그 안의 모든 자식 컴포넌트들도 리렌더링됨.
   • 자식 컴포넌트들은 부모 컴포넌트의 JSX 안에 사용된 컴포넌트들이다.
   • 형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않음.
2. 렌더링 관계 트리

예시 코드 1

const Parent = () => (
  <Child1>
    <Child2>
      <Child3 />
    </Child2>
  </Child1>
);

const Child1 = ({ children }) => <div>{children}</div>;
const Child2 = ({ children }) => <div>{children}</div>;
const Child3 = () => <div>막내</div>;

 

• Parent가 리렌더링되면 Child1, Child2, Child3도 리렌더링 됌
• Child1이 리렌더링 된다면 Child2, Child3는 리렌더링 되지 않음

 

예시 코드 2

function App() {
  return (
    <Parent lastChild={<ChildC />}>
      <ChildB />
    </Parent>
  );
}

function Parent({ children, lastChild }) {
  return (
    <div className="parent">
      <ChildA />
      {children}
      {lastChild}
    </div>
  );
}

 

• App의 자식 컴포넌트는 Parent, ChildB, ChildC
• 마찬가지로 Parent가 리렌더링되면 ChildA만 리렌더링되고, ChildB와 ChildC는 리렌더링되지 않음.

결론

• 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링됨.
• 자식 컴포넌트는 부모 컴포넌트의 JSX 안에서 사용된 모든 컴포넌트.
• 형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않음.

참고 사이트 

리액트의 리렌더링 조건을 더 쉽게 이해해보기

 

위 블로그 글에 코드 예시와 그림 그래프 설명이 아주 직관적이고 자세하게 나와서 위에 블로그를 읽는게 더 좋을 것 같습니다.