[React.js] State를 Props로 전달

Bulb.jsx

const Bulb = ({ light }) => {

  return (

    <>

      <div>

        {light === "ON" ? (

          <h1 style={{ backgroundColor: "orange" }}>ON</h1>

        ) : (

          <h1 style={{ backgroundColor: "gray" }}>OFF</h1>

        )}

      </div>

    </>

  );

};

export default Bulb;

App.jsx

import "./App.css";

import { useState } from "react";

import Bulb from "./components/Bulb";

function App() {

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

  return (

    <>

      <div>

        <Bulb light={light} />

        <button

          onClick={() => {

            setLight(light === "ON" ? "OFF" : "ON");

          }}

        >

          {light === "ON" ? "끄기" : "켜기"}

        </button>

      </div>

    </>

  );

}

export default App;

App.jsx state를 props로 Bulb.jsx로 전달해 상태를 변환시켜 렌더링 시킨다.

 

리액트의 리렌더링 조건

1. state가 변경되면 리렌더링이 된다.

2. props가 변경이되면 리렌더링이 된다.

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

 

서로의 컴포넌트에 간섭 되지않게(불필요한 리렌더링을 줄이기 위해) 상위 컴포넌트 App.jsx 가되도

 

Bulb.jsx

import { useState } from "react";

const Bulb = () => {

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

 

  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;

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;

App.jsx

import "./App.css";

import Bulb from "./components/Bulb";

import Counter from "./components/Counter";

function App() {

  return (

    <>

      <Bulb />

      <Counter />

    </>

  );

}

export default App;

각기능별로 컴포넌트를 나눠서 관리한다면 불필요한 리렌더링을 줄일수 있다.