[React] Hooks - useState 사용법

useState란?

useState는 컴포넌트에서 동적인 값을 관리하는 라이브러리다.

Hooks이 도입되기 전에는 클래스 기반의 컴포넌트를 사용하여 값을 관리해야 했지만, 이제는 함수형 컴포넌트에서도 관리할 수 있게 되었다.

사용법

import { useState } from 'react';  // 1

const App = () => {
  const [message, setMessage] = useState('first message');  // 2
  
  const changeMessage = () => {
    setMessage('second message');  // 3
  }
  
  return (
    <div>
      <p>{message}</p>
      <button onClick={changeMessage}>change!</button>
    </div>
  )
}

1. import하기

import { useState } from 'react';

리액트 패키지에서 useState 라이브러리를 불러온다.

2. 선언하기

const [message, setMessage] = useState('first message');

useState 함수에 기본값을 매개변수에 넣는다.

이 함수가 호출되면 배열이 반환된다. 첫 번째 원소는 현재값, 두 번째 원소는 Setter 함수이다.

3. state 변경

setMessage('second message');

이벤트 발생 시 호출되는 함수 안에서 값을 변경한다.

위에 선언된 Setter 함수인 setMessage에 변경할 값을 넣는다.

동작 과정

1. useState에 지정된 초기값이 message에 저장된다.

2. 브라우저에서 message의 초기값인 'first message'를 볼 수 있다.

3. 'change!' 버튼을 클릭하면 changeMessage 함수를 호출한다.

4. changeMessage가 실행되면 state를 변경한다.

5. 컴포넌트가 재실행되고 가장 최근에 변경된 state가 message에 저장된다.

6. 브라우저에서 message의 값이 'second message'로 바뀐 것을 볼 수 있다.

특징

1. 컴포넌트 간의 관계

state는 컴포넌트의 인스턴스별로 나뉘어져 있다.

따라서 한 컴포넌트의 state가 바뀌더라도 다른 컴포넌트에 영향을 주지 않는다.

2. 호출 위치

useState는 해당 컴포넌트 함수 안에 바로 호출되어야 한다.

함수 밖이나 컴포넌트 함수 내 다른 함수에 호출될 수 없다.

3. 선언 방식

state를 변경하는 함수 안에서 Setter 함수만 선언하기 때문에 const를 사용할 수 있다.