[React] 9. State와 Props

서회정

Feb 20, 2026

Contents

리액트의 리랜더링 조건 ✅ 예제

리액트의 리랜더링 조건

💡

State 변경

props 변경

부모컴포넌트 리랜더링

✅ 예제


import "./App.css";
import { useState } from "react";

const Bulb = ({ light }) => {
  console.log(light);

  return (
    <div>
      {light === "ON" ? (
        <h1 style={{ backgroundColor: "orange" }}>ON</h1>
      ) : (
        <h1 style={{ backgroundColor: "gray" }}>OFF</h1>
      )}
    </div>
  );
};

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

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

export default App;

⇒ count 버튼을 눌러도 위에 있는 전구 컴포넌트가 계속 리랜더링되고있는 것을 콘솔창에서 확인할 수 있다.

그렇다면 왜?? count 버튼을 눌렀을 때에도 전구 컴포넌트까지 리랜더링이 되냐?

아래 코드 구조를 보면 카운트 버튼을 눌렀을 때는 App 컴포넌트의 state가 변경되기 때문에 App 컴포넌트 자체가 리랜더링 되는 구조이다.

따라서 Bulb또한 App 컴포넌트의 하위 컴포넌트이기 때문에 함께 리랜더링되는 것이다.

그럼 부분적으로 리랜더링이 되고자 할 때에는 어떻게 하냐?

카운트를 올리는 코드를 컴포넌트화하고, App 컴포넌트의 하위 컴포넌트로 동작하게 만들면 된다.

즉, 상태를 각각의 컴포넌트 내에서만 관리하여 App 컴포넌트가 리랜더링 되는것을 막으면 되는 것이다!


import "./App.css";
import { useState } from "react";

const Bulb = ({ light }) => {
  console.log(light);
  return (
    <div>
      {light === "ON" ? (
        <h1 style={{ backgroundColor: "orange" }}>ON</h1>
      ) : (
        <h1 style={{ backgroundColor: "gray" }}>OFF</h1>
      )}
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +
      </button>
    </div>
  );
};

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

  return (
    <>
      <div>
        <Bulb light={light} />
        <button
          onClick={() => {
            setLight(light === "ON" ? "OFF" : "ON");
          }}
        >
          전구 {light === "ON" ? "끄기" : "켜기"}
        </button>
      </div>
      <Counter />
    </>
  );
}

export default App;

Bulb 컴포넌트도 깔끔하게 분리할 수 있다.


import "./App.css";
import { useState } from "react";

const Bulb = () => {
  const [light, setLight] = useState("OFF");

  console.log(light);
  return (
    <div>
      <div>
        {light === "ON" ? (
          <h1 style={{ backgroundColor: "orange" }}>ON</h1>
        ) : (
          <h1 style={{ backgroundColor: "gray" }}>OFF</h1>
        )}
      </div>
      <button
        onClick={() => {
          setLight(light === "ON" ? "OFF" : "ON");
        }}
      >
        전구 {light === "ON" ? "끄기" : "켜기"}
      </button>
    </div>
  );
};

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +
      </button>
    </div>
  );
};

function App() {
  return (
    <>
      <Bulb />
      <Counter />
    </>
  );
}

export default App;

각각의 분리된 컴포넌트는 jsx파일로 관리하여 내보내고, App.jsx에서 import하여 보다 깔끔하게 코드와 상태 관리를 할 수 있다.