[React] 리렌더링이 되는 조건

component들은 자신이 가지고 있는 state가 변경되지 않아도 부모로 부터 받는 프롭스의 값이 변경되면 다시 리렌더링이 된다. 여기서 리렌더링이란 ? 사용자가 화면에 view를 다시 새롭게 보여주는 것을 의미한다

📌 component 리렌더링 되는 조건

1. 자신이 관리하는 state 값이 변경 되었을 때 리렌더링이 된다
2. 자신이 제공받는 props 값이 변경 되었을 때 리렌더링이 된다
3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링이 된다

📌 리렌더링 안 좋은 예시

⚠️ 관련없는 state를 여러개 한 번에 몰아서 적는 것 보다는 관련이 없다면 서로 다른 컴포넌트를 분리 해주는 방법을 택해야 한다

< App.js >

import "./App.css";
import { useState } from "react";
 
const Bulb = () => { //Bulb component
  const [light, setLight] = useState("OFF");
  return (
    <div>
      {light === "ON" ? (
        <h1 style={{ color: "orange" }}>ON</h1>
      ) : (
        <h1 style={{ color: "gray" }}>OFF</h1>
      )}
    </div>
  );
};

function App() {
  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");

  return (
    <>
      <div>
        <Bulb light={light}/> //Bulb component
        <button
          onClick={() => {
            setLight(light === "ON" ? "OFF" : "ON");
          }}
        >
          {light === "ON" ? "끄기" : "켜기"}
        </button>
      </div>
      <div> //count
        <h1>{count}</h1> 
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
}

export default App;

<App.js>

• 각각의 컴포넌트를 만들어서 분리해주는 방법
• props로 state를 따로 전달하지 않아도 되기 때문에 편리하다

import "./App.css";
import Bulb from "./components/Bulb";
import Counter from "./components/Counter";
function App() {
  return (
    <div className="App">
      <Bulb />
      <Counter />
    </div>
  );
}

export default App;