State

현재 갖고 있는 형태나 모양.
⭐변화 할 수 있는 동적인 값⭐

State에서 상태 변화가 감지되면 그에 맞춰서 UI가 변하는데
➡️ 리렌더링😯

이런식으로 컴포넌트 안에 state를 만들어 줄 수 있다.

🤔

그럼 한 번 써보자

내가 버튼을 누르면 숫자가 + 1됐음 해

state를 만들어 줄려면 가장 먼저 해야하는 게 있다.
index.jsx문서의 맨 상단에 useState를 import 하는 것❗

import {useState} from "react";

//그리고 나서 우리가 만들어 줄 건 Counter니까
//state와 setState ➡️ count와 setCount로 변경
const Counter= () => {
	const [count, setCount] = useState(0);
}

이러면 state를 사용 할 준비는 완료 되었다.
내가 첫번째로 만들려는 건 + 버튼을 눌러주면 ? 숫자가 1씩 증가하는 카운트.

const Counter= () => {

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

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

💡
h1 태그 안에 counter를 넣어주면 숫자가 뜰 것이고 초기값은 0으로 줬다.버튼을 클릭하면 setCount가 작동하고 그 안에 count + 1가 실행된다

➡️ 결과물

그럼 이제 두번째로 만들고 싶은 건 전구 켜기 끄기 버튼을 누르면 ON/OFF가 되는 것.

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

💡
카운트랑 똑같이 useState를 사용해서 전구니까 light와 setLight로 주고, 기본값은 꺼져 있는 상태인 OFF로 주었다. 그리고 켜지면 배경 색을 오랜지색으로 꺼지면 회색으로❗

가장 중요한 버튼 부분은 삼항 연산자를 이용해서 버튼이 ON이라면 OFF로 ON이 아니라면 ON으로 바꿔주는 방식을 택했다. 똑같이 버튼 안의 text도 삼항 연산자로 ON 상태라면 끄기, ON이 아니라면 켜기😊

➡️ 결과물

🤔문제점 발생
하지만 이 코드들이 전부 const App안에 담겨 있으니까 카운트해주는 + 버튼을 누를때도 OFF가 동작하는 것이었다.

알고보니까

• 리액트에서 리렌더링이 진행되는 경우

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

이 세가지 경우가 있는데 바로 저 두가지가 해당되었다는 사실.
그럼 해결하는 방법은 컴포넌트를 분리해주는 것❗

componunts 폴더에서

• Bulb.jsx와 Counter.jsx를 만들어 주고 각각
• useState사용을 import 해준 뒤,
• export 해준다
• index.jsx에서 App안에 컴포넌트 와 을 자식 요소로
• Bulb.jsx와 Counter.jsx를 import 해주고
• index.jsx에선 이제 useState import 삭제

➡️ 해결❗❗❗❗❗❗