[React] 📖 State와 Props

📍 State와 Props 란?

State란?
Props란?

---

📍 리렌더링이 발생하는 이유

1️⃣ 자신이 관리하는 state의 값이 변경될 때
2️⃣ 제공받는 props의 값이 변경될 때
3️⃣ 부모 컴포넌트가 리렌더링되면 자식 컴포넌트가 리렌더링

---

📍 state와 props

자식 컴포넌트에 전달하는 방법 - 전구 역할을 하는 컴포넌트

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

return (
	const [light, setLight] = useState("OFF");
    <>
      <Bulb />
      <button
        onClick={() => {
          setLight(light === "ON" ? "OFF" : "ON");
        }}
      >
        Click
      </button>
    </>
  );

• 부모 컴포너트가 Bulb light에 Props를 전달
• 자식 컴포넌트는 부모 컴포넌트로부터 받은 light props를 사용해 전구 상태 표시

---

❗️ 문제발생

count에 있는 버튼을 Click하면 count 리렌더링되고 Bulb 컴포넌트도 리렌더링이 된다.
3️⃣ 부모 컴포넌트가 리렌더링되면 자식 컴포넌트가 리렌더링

count의 state가 부모(App) 안에 있어 버튼을 Click하면 App이 리렌더링이 되어 App의 자식 컴포넌트인 Bulb 컴포넌트로 리렌더링이 된다.

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 (
    <>
      <h1>{count}</h1>
      <button onClick={() => {
        setCount(count + 1);
      }}>
        Click
      </button>

      
      <Bulb light={light}/>
      <button
        onClick={() => {
          setLight(light === "ON" ? "OFF" : "ON");
        }}
      >
        Click
      </button>
    </>
  );
}

export default App;

• 현재 전구 state와 숫자 세는 state가 하나만 값을 변경해도 동시에 리렌더링이 됨
  ➡️ 해결 방법 : 전구 state와 숫자 세는 state를 컴퍼넌트로 나눈다.

🆗 문제해결

// 전구 state
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");
        }}
      >
        Click
      </button>
    </div>
  ) 
};

// 숫자 세는 state
const Counter = () => {
  const [count, setCount] = useState(0);

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

• Bulb 컴포넌트는 state를 컴포넌트 안에 선언하면 부모로부터 props를 받지않아도된다.

❓ 근데 왜 전혀 상관없는 리렌더링이 발생하면 안돼요?
: 리렌더링이 발생할 때마다 컴포넌트의 상태나 props를 다시 계산하는데 전혀 상관없는 리렌더링이 발생하면 불필요한 상태 계산과 리소스를 낭비하게 되고 이로인해 성능이 저하가 됩니다.

---

📍 컴포넌트를 파일로 만들어 App에 선언하기

• 컴포넌트 폴더에 Bulb.jsx, Counter.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");
          }}
        >
          Click
        </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);
        }}>
          Click
        </button>
      </div>
    )
  };

export default Counter;

App.jsx

: 만든 컴포넌트 파일을 App.jsx 에서 선언하여 return 안에 태그처럼 사용

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

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

export default App;