9. Hooks를 활용한 상태 관리 - 1

useState 훅을 이용한 상태 관리

React의 함수형 컴포넌트에서 상태를 관리하기 위해 useState 훅을 사용할 수 있습니다. 이번 포스트에서는 useState 훅의 개념과 활용 방법에 대해 알아보겠습니다.

useState 훅 소개

useState 훅은 React 함수형 컴포넌트에서 상태를 추가하고 관리할 수 있는 기능을 제공합니다. 이를 통해 함수형 컴포넌트에서도 클래스형 컴포넌트와 마찬가지로 상태를 사용할 수 있습니다.

useState 훅의 사용법

useState 훅은 배열을 반환하며, 배열의 첫 번째 요소는 현재 상태값이고, 두 번째 요소는 상태를 변경하는 함수입니다. 다음은 useState 훅을 사용하는 간단한 예시입니다.

import React, { useState } from 'react';

function Counter() {
  // count라는 상태와 setCount라는 상태 변경 함수를 선언
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

 

위 예시에서는 useState 훅을 사용하여 count라는 상태와 setCount라는 상태 변경 함수를 선언하고, 이를 통해 버튼 클릭에 따라 상태값을 변경하고 화면에 표시합니다.

useState 훅의 장점

1. 간편한 상태 관리: 함수형 컴포넌트에서도 간편하게 상태를 추가하고 관리할 수 있습니다.
2. 가독성: 클래스형 컴포넌트보다 코드가 간결하고 가독성이 높아집니다.

useState 훅의 주의사항

1. 컴포넌트 내부에서만 사용: useState 훅은 함수형 컴포넌트 내부에서만 사용해야 합니다.
2. 상태의 불변성 유지: 상태를 변경할 때는 기존 상태를 직접 수정하지 말고, 상태 변경 함수를 사용하여 새로운 상태를 반환해야 합니다.

마무리

useState 훅을 사용하면 함수형 컴포넌트에서도 간편하게 상태를 추가하고 관리할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 복잡한 상태 관리를 보다 쉽게 할 수 있습니다. 따라서 useState 훅은 React 애플리케이션 개발에서 매우 유용하게 활용될 수 있습니다.