useState 사용하는 이유

 

 

 

React에서 state를 직접 사용하지 않고 useState 훅을 사용하는 이유는,

React의 함수형 컴포넌트에서 상태 관리 기능을 사용할 수 있게 하기 위해서다

이는 React 16.8 버전에서 도입된 Hooks의 일부로,

클래스 컴포넌트 없이도 상태와 React의 다른 기능들을 함수형 컴포넌트에서 사용할 수 있게 해준다

 

useState의 도입 배경

이전에는 React의 상태 관리와 생명주기 기능을 사용하기 위해서는 클래스 컴포넌트를 사용해야 했다

그러나 클래스 컴포넌트는 여러 단점을 가지고 있었다:

• 복잡성:
  • 클래스 컴포넌트는 this 키워드, 바인딩, 생명주기 메서드 등을 다루어야 하기 때문에, 새로운 React 개발자에게 학습 곡선이 높았다
• 재사용성:
  • 클래스 컴포넌트에서 상태 로직을 재사용하기 위해서는 고차 컴포넌트(Higher-Order Components)나 렌더 프롭스(Render Props) 같은 패턴을 사용해야 했는데, 이러한 패턴은 구현이 복잡할 수 있다

 

useState 훅의 이점

• 간결성:
  • 함수형 컴포넌트를 사용하여 컴포넌트를 더 간결하고 이해하기 쉬운 방식으로 작성할 수 있다
  • useState를 사용하면 클래스 컴포넌트에서 발생하는 this 관련 문제나 생명주기 메서드의 복잡성을 피할 수 있다
• 재사용성과 구성:
  • useState와 다른 훅들을 사용하면 상태 관련 로직을 쉽게 재사용하고 컴포넌트 간에 공유할 수 있다
  • 이는 코드의 재사용성과 구성을 향상시킨다
• 함수형 업데이트:
  • useState는 함수형 업데이트를 지원하여, 이전 상태값에 기반한 새로운 상태값을 설정할 때 이전 상태값을 안전하게 참조할 수 있다
  • 이는 상태 업데이트가 비동기적으로 이루어질 때 유용하다

 

사용 예시

import React, { useState } from 'react';

function Example() {
  // 새로운 상태 변수 "count"를 선언하고, 이를 업데이트하기 위한 함수 "setCount"를 제공합니다.
  const [count, setCount] = useState(0);

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

 

useState는 함수형 컴포넌트에서 React의 상태 관리 기능을 사용할 수 있게 해주는 강력하고 유연한 도구다

이를 통해 개발자는 함수형 컴포넌트 내에서도 상태를 효율적으로 관리하고 업데이트할 수 있으며,

애플리케이션의 전반적인 구조를 더 단순하고 명확하게 만들 수 있다