[React] State를 props로 전달하기

 

이번에는 State를 컴포넌트의 props로 전달해보는 시간을 가질 것이다.

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

const Bulb = ({ light }) => {
  return <div>{light ? <h1>😐</h1> : <h1>😑</h1>}</div>;
};

function App() {
  const [count, setCount] = useState(5);
  const [light, setLight] = useState(false);

  return (
    <>
      <div>
        <Bulb light={light} />
        <button onClick={() => setLight(!light)}>
          현재 상태: {light ? "ON" : "OFF"}
        </button>
      </div>
      <div>
        <h1>{count}</h1>
        <button onClick={() => setCount(count + 1)}>+</button>
        <button onClick={() => setCount(count - 1)}>-</button>
      </div>
    </>
  );
}

export default App;

 

이전 포스팅에 이어서 새로운 Bulb 컴포넌트를 만들어 주었다.

 

Bulb 컴포넌트는 light state를 props로 받는다.

 

버튼을 클릭할때마다 바뀌는 light의 값에 따라서 화면에 나타나는 Bulb 컴포넌트가 달라지는 것을 알 수 있다.

여기서 알 수 있는 중요한 사실은 Bulb 컴포넌트가 리렌더링 된다는 것이다.

 

즉, 여기서 Bulb 컴포넌트처럼 자식 컴포넌트들은 부모 컴포넌트로부터 받는 props의 값이 변경되면 리렌더링 된다는 사실을 알 수 있다.

 

실제로 콘솔로그를 Bulb 컴포넌트안에 작성하고 버튼을 눌러보면 버튼을 누를때 마다 Bulb 컴포넌트가 리렌더링 된다는 것을 확인할 수 있다.

 

그런데 여기서 아래에 있는 + 버튼이나 -버튼을 눌러보자

Bulb 컴포넌트가 다시 리렌더링된 것을 알 수 있다.

 

나는 +버튼이나 -버튼을 통해서 count의 값을 변경하였는데 Bulb 컴포넌트가 리렌더링 되었다.

 

이 둘은 아무런 관련이 없는데 어째서 이런일이 일어났는지 알아보자

 

리액트는 딱 3가지 상황에서 리렌더링이 발생한다.

1. 자신이 관리하는 state의 값이 변경되었을 때

2. 자신이 제공받는 props의 값이 변경되었을 때

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

 

지금은 3번째 상황이다.

 

App 컴포넌트는 자신이 관리하는 state인 count의 값이 변경되어서 리렌더링이 발생하고 App컴포넌트를 부모 컴포넌트로 갖는 Bulb 컴포넌트는 부모 컴포넌트가 리렌더링 되었기 때문에 자신도 리렌더링이 발생한다.

 

그런데 부모의 리렌더링 때문에 이런 리렌더링이 많이 발생하면 당연히 성능이 떨어질 것이다.

 

이러한 것들을 방지하기 위해서 관련이 없는 두 개의 state를 하나의 컴포넌트에 몰아서 넣는 것이 아니라 관련이 없다면 서로 다른 컴포넌트로 분리하는 것이 좋다.

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

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

  return (
    <div>
      {light ? <h1>😐</h1> : <h1>😑</h1>}
      <div>
        <button onClick={() => setLight(!light)}>
          현재 상태: {light ? "ON" : "OFF"}
        </button>
      </div>
    </div>
  );
};

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

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

export default App;

 

이렇게 하면 서로 관련 없는 state의 변화에 따라 불필요한 리렌더링 문제가 발생하지 않게 된다.

 

또한 Counter, Bulb 컴포넌트를 파일로 분리해보자.

//App.js
import "./App.css";
import Counter from "./Counter";
import Bulb from "./Bulb";

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

export default App;

//Bulb.js
import React from "react";
import { useState } from "react";

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

  return (
    <div>
      {light ? <h1>😐</h1> : <h1>😑</h1>}
      <div>
        <button onClick={() => setLight(!light)}>
          현재 상태: {light ? "ON" : "OFF"}
        </button>
      </div>
    </div>
  );
};

export default Bulb;

//Counter.js
import React from "react";
import { useState } from "react";

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

export default Counter;