📖 [React] State로 상태관리하기

📍 State란?

: State(상태)라는 건 현재 가지고 있는 형태나 모양을 정의하는 값, 변화할 수 있는 동적인 값

예시

가스레인지에 불이 켜져있을 경우 ➡️ 켜진 상태의 가스레인지
가스레인지에 불이 꺼져있을 경우 ➡️ 꺼진 상태의 가스레인지

✅ 모든 사물들은 자신이 갖는 현재의 State(상태)에 따라서 각기 다른 모양이나 다른 동작들을 하게된다. ➡️ State 변경 가능

가스레인지에 불이 켜져있을 경우 ➡️ 불 끄기 ➡️ 꺼진 상태의 가스레인지
가스레인지에 불이 꺼져있을 경우 ➡️ 불 켜기 ➡️ 켜진 상태의 가스레인지

✅ React에서 State는 컴퍼넌트의 현재 상태를 보관하는 변수
✅ 그래서 State를 갖는 컴퍼넌트들은 State 값에 따라서 렌더링 되는 UI가 결정된다

---

💻 실습

import { useState } from "react";

: useState를 사용하기 위해서는 상단에 내장 함수를 먼저 선언해야한다.

1-1. useState 호출하기

const state = useState();

• state 값은 [undefined,𝒇] { 0 : undefined, 1: 𝒇()} 이렇게 배열되어 있다.
• 첫 번째 요소는 새롭게 생성된 state 값 ➡️ 현재값
• 두 번째 요소는 state 값을 변경, 변화 시키는 함수 ➡️ 상태 변화 함수
• 컴퍼넌트의 state 값이 변경되면 이 컴포너트가 return ➡️ 리렌더링

📍 useState()에 0을 넣을 경우

const state = useState(0);

: state 값이 [0,𝒇] 출력된다.

1-2. 비구조화 할당 문법

: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

  const [state, setState] = useState(0);

• state 에는 useState의 값이 저장됨
• setState 에는 state의 값을 변경시키는 함수가 들어간다.

⬆️ 위의 내용을 출력할 경우

(return 문 안에 작성)
<h1>{state}</h1>

: 현재 useState 에는 0이 들어가있고, state는 useState의 값이 저장되므로 0 이 출력된다.

📍 비구조화 할당 문법 응용

1. 버튼을 클릭할때마다 state값이 1씩 증가하여 출력하기

const [state, setState] = useState(0);

return(
	<>
    	<h1>{state}</h1>
    	<button onClick={() => {
        	setState(state + 1);
     	 }}>
        	Click
      	</button>
    </>
)

2. 버튼을 클릭하면 ON/OFF로 변경되어 출력하기

const [light, setLight] = useState("OFF");	➡️ 현재값 : off

return(
	<h1>{light}</h1>
    <button onClick{() => {
    	setLight(light === "ON"? "OFF" : "ON"	➡️ 반복문 (삼항연산자 사용)
    }}>
    	Click
    </button>
)

---

📍 state를 일반 변수로 만들 경우

let light = "OFF";

return(
	<h1>{light}</h1>
    <button onClick{() => {
    	light = light === "ON"? "OFF" : "ON"
    }}>
    	Click
    </button>
)

light 를 일반 변수로 만들어 사용할 경우 컴포넌트가 리렌더링되지않는다.

✅ React 컴포넌트는 일반 변수가 아니라 const [light, setLight] = useState("OFF"); 형식의 state 값이 변화했을 때만 리렌더링이 된다.

---

📍 state 주의할 점

• 직접 state를 수정하지 않는다 ❌ → reRender 되는 변수는 setLight 이 부분이므로 light를 수정해봤자 reRender 되지 않는다.
• state는 비동기적일 수도 있습니다 → setState(state + 1) 계속 입력한다고 해서 버튼 한번 눌렀을 때 입력한 수대로 증가되지않을 수 있다.

  이럴 경우 setState((state) => state + 1); 처럼 함수의 인자로 전달하여 작성할 수 있다.