[React] props와 state의 상호작용

이번 글은 리액트에서 props와 state의 상호작용에 대한 글이다.

 

---

 

[ props와 state의 상호작용 ]

props는 부모에서 받아온 값을 객체로 반환하는 것이고 state는 현재 가진 값을 상태변화함수를 통해 변화시키며 리렌더링해주는 변수이다.

 

예제 1) 

부모 컴포넌트 App()에 state의 값이 존재함

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

 

=> 자식 컴포넌트 Bulb에서 인수로써 이 state를 props로 받아옴

const Bulb = ({ light }) => {}

 

=> 가져온 값을 활용한 조건식 작성

{light === "On" ? (
        <h1 style={{ backgroundColor: "yellow" }}>On</h1>
      ) : (
        <h1 style={{ backgroundColor: "gray" }}>Off</h1>
      )}

 

=> 부모 컴포넌트에 자식 Bulb를 보내고 값으로 state인 light를 받아옴

<Bulb light={light} />

 

[ 전체 코드 ]

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

const Bulb = ({ light }) => {
  return (
    <div>
      {light === "On" ? (
        <h1 style={{ backgroundColor: "yellow" }}>On</h1>
      ) : (
        <h1 style={{ backgroundColor: "gray" }}>Off</h1>
      )}
    </div>
  );
};

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

  return (
    <>
      <div>
        <Bulb light={light} />
        <button
          onClick={() => {
            setLight(light === "On" ? "Off" : "On");
          }}
        >
          Switch
        </button>
      </div>
    </>
  );
}

export default App;

 

 

해당 과정은 폴더를 나눠서 관리할 수 있지만 import에 유의해야한다.

 

 

---