[React Hook] useState에 대해 알아볼까요?

 

 

리액트의 핵심 기능 중 하나인 useState 훅입니다.


이번 글에서는 useState 훅에 대해 알아보겠습니다.

 

 

 

 

useState란?

useState는 리액트의 내장 훅 중 하나로, 컴포넌트의 상태(state)를 관리하기 위해 사용됩니다.

 

useState는 컴포넌트 함수 내에서 상태 값을 선언하고, 이 값을 변경하는 함수를 제공합니다.

 

이를 통해 컴포넌트의 상태가 변경될 때마다 리액트는 자동으로 컴포넌트를 재렌더링하게 됩니다.

 

 

 

useState 사용법

 

useState를 사용하려면, useState 함수를 호출하고, 초기 상태 값을 전달해야 합니다.

 

useState 함수는 배열을 반환합니다. 첫 번째 원소는 상태 값, 두 번째 원소는 상태 값을 변경하는 함수입니다.

 

예를 들어, 다음과 같이 사용할 수 있습니다.

 

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

 

위의 예제에서는 useState 함수를 호출하고, 초기 상태 값으로 0을 전달합니다.

 

이후 count 변수와 setCount 함수를 선언하고, count 변수를 화면에 출력합니다.

 

버튼이 클릭되면 increment 함수가 호출되어 setCount 함수를 통해 count의 값을 증가시킵니다.

 

 

 

여러 개의 상태 값 사용하기

useState 훅은 하나의 상태 값만 관리할 수 있습니다.

 

그러나 대부분의 컴포넌트에서는 여러 개의 상태 값을 사용해야 합니다.

 

이 때는 useState를 여러 번 호출하여 각 상태 값을 따로 관리할 수 있습니다.

 

예를 들어, 다음과 같이 사용할 수 있습니다.

 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function increment() {
    setCount(count + 1);
  }

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
      <br />
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

 

위의 예제에서는 useState를 두 번 호출하여, count와 text라는 두 개의 상태 값을 관리하고 있습니다.

 

setCount 함수는 상태 값을 증가시키는 데 사용되며, setText 함수는 input 요소의 값을 받아오는데 사용됩니다.

 

이와 같이 useState를 여러 번 호출하여 여러 개의 상태 값을 관리할 수 있습니다.

 

단, 각 상태 값에 대한 이름을 명확하게 지정해 주는 것이 좋습니다.

 

 

 

함수형 업데이트

 

useState 함수의 두 번째 원소는 상태 값을 변경하는 함수입니다.

 

이 함수는 새로운 값을 인자로 전달하여 호출할 수 있습니다.

 

하지만 이 함수를 호출할 때마다 새로운 상태 값을 생성하게 됩니다.

 

때로는 이러한 최적화가 필요하지 않을 수 있습니다. 이 때는 함수형 업데이트(functional update)를 사용할 수 있습니다.

 

함수형 업데이트는 이전 상태 값을 인자로 받아 새로운 상태 값을 반환하는 함수를 사용합니다.

 

이를 통해 새로운 상태 값을 생성하지 않고 이전 상태 값을 업데이트할 수 있습니다.

 

예를 들어, 다음과 같이 사용할 수 있습니다.

 

import React, { useState } from 'react';

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

  function increment() {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

 

위의 예제에서는 setCount 함수를 호출할 때 함수형 업데이트를 사용하여 이전 상태 값을 인자로 받고,

 

이 값을 증가시켜 새로운 상태 값을 생성하지 않습니다.

 

 

 

useState의 주의점

useState는 매우 유용한 훅입니다. 하지만 useState를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.

 

첫째,

useState는 컴포넌트 내부에서만 사용될 수 있습니다. 따라서 함수나 반복문 등의 블록 내부에서 사용하면 안 됩니다.

 

둘째,

useState를 호출할 때는 반드시 동일한 순서로 호출해야 합니다. 이를 위해 배열 디스트럭처링을 사용하는 것이 좋습니다.

 

셋째,

useState를 사용하여 객체나 배열을 관리할 때는, 상태 값을 직접 변경하면 안 됩니다.

대신, 새로운 객체나 배열을 생성하여 이를 상태 값으로 설정해야 합니다.

 

 

 

정리

useState는 리액트에서 상태 값을 관리하는 데 매우 유용한 훅입니다.

 

useState를 사용하여 컴포넌트의 상태를 관리하면,

 

리액트가 자동으로 컴포넌트를 다시 렌더링하여 UI를 업데이트할 수 있습니다.

 

하지만 useState를 사용할 때는 주의해야 할 몇 가지 사항이 있으며, 이러한 주의점을 지키면서 사용해야 합니다.