React - State와 Props

 

컴포넌트가 리렌더링 되는 경우는 크게 세가지가 있다.

1. state가 변경될 경우
2. props가 변경될 경우
3. 부모 컴포넌트가 변경될 경우

 

만약 코드가 아래와 같이 있다고 가정했을 때, setLight나 setCount로 state가 변경될 경우 Bulb 컴포넌트도 같이 리렌더링 된다.

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

const Bulb = ({ 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;

Bulb는 light의 자식 컴포넌트이기 때문에 props로 속성을 받아올 경우 리렌더링 되는게 맞지만, count가 변경되어 App 컴포넌트가 리렌더링 될 경우 불필요하게 Bulb까지 리렌더링 된다. 이와 같은 문제를 해결하기 위해 서로 다른 컴포넌트로 분리해주는 것이 좋다.

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

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

      <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;

위와 같이 Bulb, Counter 컴포넌트를 분리 후 App 컴포넌트에 추가하면 Bulb와 Counter는 다른 상태를 갖기 때문에 리렌더링 시 불필요한 컴포넌트까지 리렌더링 되지 않게 할 수 있다.

위와 같은 코드를 최종적으로는 각각 파일을 분리하여 import하면 더 깔끔하게 코드를 작성할 수 있다.

최종 코드

Counter.jsx

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <h1>{count}</h1>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
};

export default Counter;

Bulb.jsx

import { useState } from "react";

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

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

export default Bulb;

App.jsx

import "./App.css";
import Bulb from "./components/Bulb.jsx";
import Counter from "./components/Counter.jsx";

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

export default App;

 

 

 

 

인프런 이정환 강사님 강의를 참고해서 정리했습니다. 링크

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 | 이정환 Winterlood - 인프런