[React] State 특징 및 사용방법

state의 특징

변할 수 있는 값.

컴포넌트 사용중에 컴포넌트 내부에서 변할 수 있는 값으로 보통 '상태'를 나타낸다.

예) 전체 트윗 목록(트윗을 새로 작성하거나, 기존 트윗을 지우면 목록에 변화가 일어남, 즉 상태가 변한다.)

 

state 다루기 - useState(State Hook)

1. useState 부르기

useState는 state를 다루는 함수로, 코드 상단에서 리액트로부터 불러온 후 사용해야 한다.

import { useState } from "react";

2. useState로 변수 선언하기

useState를 불러왔으면 state를 사용할 컴포넌트에서 호출한다.

이때 useState를 호출한다는 것은 state라는 변수를 선언한다는 것과 같은 말이며,

함수가 끝나더라도 state 변수는 사라지지 않는다.

state를 저장해 놓을 변수와, state의 상태를 바꿔줄 함수를 함께 선언한다.

useState가 받는 값은 state의 초기값이다.

// useState 사용법
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

// 예시
// 현재 isOpen은 false 값을 가지고 있고, setIsOpen을 이용해서 isOpen 값을 변경할 수 있다.
const [isOpen, setIsOpen] = useState(false);

// 현재 index는 0을 가지고 있고, setIndex를 이용해서 index값을 변경할 수 있다.
const [index, setIndex] = useState(0);

3. state 갱신하기

state를 갱신하기 위해서는 state 갱신 함수를 실행시켜주는 함수를 만들어 주어야 한다.

(이때 state 갱신 함수를 이용하지 않은 state를 변경해주는 함수를 만들면 에러가 난다.)

그 후, 이벤트 핸들러를 이용하여 state 갱신 함수를 실행시키는 함수를 사용한다.

function CheckboxExample() {
  const [isOpened, setIsOpened] = useState(false);
  
  // state 갱신 함수를 실행시키는 함수
  const handleOpened = () => {
    setIsOpened(!isOpened)
  };

  return (
      <button onClick={handleOpened}/> // 이벤트 핸들러를 이용해 state 갱신 함수 실행
      	{isOpened ? OPEN! : CLOSED!} // true이면 버튼 이름이 OPEN!
      </button>
  );
}