[React] State(useState)

State

Props와 마찬가지로 State 개념은 React에서 중요하다. React 개발에서 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리한다.

여기서 상태가 어떤 의미인지 감이 안 잡힌 사람들도 있을 것이다.

• 에러가 있는지?
• 버튼 클릭
• alert 닫기

이런 상태들은 모두 State로 관리한다.

useState

useState 함수는 React 안에서 제공되기 때문에 사용하기 위해서는 import 해야한다.

import { useState } from "react" ;

useState는 어떻게 사용하는 걸까?

const [num, setNum] = useState( ) ; // 초기값 설정 X
const [num, setNum] = useState(0) ; // 초기값 설정 O

useState 함수 반환값은 배열 형태로 첫 번째는 State 변수, 두 번째는 그 State를 update 하기 위한 함수가 설정된다.

import { useState } from 'react';
import { ColoredMessage } from './components/ColoredMessage';

export const App = () => {
  // State 정의
  const [num, setNum] = useState(0);

  const onClickBtn = () => {
    alert('버튼을 클릭했어!');
    setNum(num + 1);
  };

  return (
    <>
      <h1 style={{ color: 'blue' }}>Hello React!</h1>
      <ColoredMessage color='blue' background='grey'>
        처음 시작해봐
      </ColoredMessage>
      <ColoredMessage color='red' background='black'>
        열심히 해보자!
      </ColoredMessage>
      <button onClick={onClickBtn}>버튼</button>
      <div>{num}</div>
    </>
  );
};

State 초깃값을 지정했다. 버튼을 클릭하면 카운트업하는 기능을 확인할 수 있다. setNum 함수에서 State 값을 1씩 증가시킨다.

setNum(num + 1); 이 방법은 아래처럼 표현할 수도 있다.

setNum((count) => count + 1);

괄호 안에 함수를 기술하면 해당 함수의 인수에 '업데이트 직전의 해당 State값'이 전달되어 기존의 방식처럼 똑같은 카운트업 기능을 실행한다.


State 기능은 별거 없다. 논리값, 배열, 객체 등 State로 관리할 수 있다는 것만 꼭 알아두자.