2023.06.01

State 변경이 있을 때

state 의 변경이 감지되면 리렌더링 된다.

새로운 props 값이 들어올 때

전달받은 props 값이 업데이트 됐다면 리렌더링 된다.

부모 컴포넌트가 렌더링 될 때

부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 같이 리렌더링 된다.

const Parent = () => {
  return (
  	<Child1>
      <Child2>
      	<Child3 />
      </Child2>
    </Child1>
  )
}

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

다음과 같은 예제에서 Child1, Child2, Child3 는 모두 Parent의 자식 컴포넌트들 이다. Parent 컴포넌트가 리렌더링되면 Child1, Child2, Child3 는 모두 리렌더링 된다.

• 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링됨
• 자식 컴포넌트는 부모 컴포넌트의 JSX 안에서 사용된 모든 컴포넌트들
  • "JSX 안에서 사용된 컴포넌트"란 <Component /> 형태로 사용된 컴포넌트
  • props, children으로 받은 컴포넌트는 자식 컴포넌트가 아님
• 자식 컴포넌트들끼리는 형제임
  • 형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않음

<aside> 💡 props, children으로 받은 컴포넌트는 자식 컴포넌트가 아님

컴포넌트 트리와 렌더링 트리는 다름

</aside>

shouldComponentUpdate에서 true가 반환될 때