[React] 리렌더링 조건

 

1. 상태(State) 변경

함수 컴포넌트에서 useState, useReducer 를 사용하여 상태를 업데이트 할 때.

 

2. Props 변경 & 부모 컴포넌트 렌더링

컴포넌트의 props가 변경될 때.

부모 컴포넌트가 리렌더링되면 (props와 관계없이) 모든 자식 컴포넌트도 리렌더링. (형제관계끼리는 영향을 주지 않음)

import React, { useState } from "react";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Parent />
    </div>
  );
}

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Parent Component</h2>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <Child1 count={count} />
      <Child2 />
    </div>
  );
}

function Child1({ count }) {
  console.log("Rendering Child1...");
  return <div>Count: {count}</div>;
}

function Child2() {
  console.log("Rendering Child2...");
  return <div>Child2 component</div>;
}

export default App;

처음 로드하면 'App', 'Parent', 'Child1', 'Child2' 가 렌더링.

=>  버튼 클릭  =>  count의 상태가 변경되면서 parent가 리렌더링  =>  child1 &  child2도 리렌더링

child1 : parent로부터 prop으로 받은 count값이 변경될때마다 리렌더링.

child2 : parent의 상태변화와 관계없이 리렌더링. 

 

---

child2를 별도의 컴포넌트로 분리하고 최적화 해준다면 리렌더링을 방지할 수 있음!

import React, { memo } from 'react';

const Child2 = memo(() => {
  console.log('Rendering Child2...');
  return <div>Child2 component</div>;
});

export default Child2;

child2의 컴포넌트의 props가 변경되지 않는 이상, (parent의 상태가 변경되어도) 리렌더링 되지 않는다.