[React] 4. 리액트 useState 사용하기 | 민민의 하드디스크 - 티스토리

클래스형 컴포넌트 코드 작성

 

 

1. useState란?

useState는 리액트 훅 중 하나이다. 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용된다.. useState는 배열 형태의 반환값을 가지며, 첫 번째 요소는 현재의 상태값이고, 두 번째 요소는 상태를 변경하는 함수다. 이를 통해 우리는 함수형 컴포넌트에서도 상태를 생성하고 업데이트할 수 있다.

 

2. useState를 사용하는 이유

• 클래스형 컴포넌트에서만 사용할 수 있던 상태 관리를 함수형 컴포넌트에서도 가능
• 상태값을 초기화하고 변경하는 함수를 제공받아 편리하게 상태를 관리 용이
• 상태값이 변경되면 리액트가 자동으로 컴포넌트를 다시 렌더링하여 화면에 반영
• 함수형 컴포넌트에서도 상태를 관리할 수 있기 때문에 코드의 가독성과 재사용성을 높인다.
• useState를 사용하면 로컬 상태를 간단하게 생성하고, 필요에 따라 여러 개의 상태를 관리 가능

 

3. useState 사용법

• useState 훅은 리액트 패키지에서 import
• 컴포넌트 내에서 useState를 호출하여 사용
• useState는 초기 상태값을 인자로 받고, 배열 형태의 반환값을 반환
• 반환값의 첫 번째 요소는 현재의 상태값이고, 두 번째 요소는 상태를 변경하는 함수

import 방법

import React, { useState } from 'react';

---

 

예를 들어, 웹 브라우저에서 데이터 값이 변경될 때는 [새로고침]을 하여야 적용된 화면이 출력되었다면

useState를 사용하여 값을 변경하면 자동으로 렌더링하여 화면에 반영이 된다.

예시를 보면 이해할 수 있다.

 

사용 예시

import React, { useState } from 'react';

function Counter() {
  // 초기 상태값인 count를 0으로 설정하고, setCount를 사용하여 count를 변경합니다.
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // count 값을 1 증가시킵니다.
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>  +  </button>
    </div>
  );
}

export default Counter;

 

위의 예시에서는 useState를 사용하여 카운터 기능

• 초기 상태값인 count를 0으로 설정하고, setCount 함수를 사용하여 count를 변경
• 버튼을 클릭하면 increment 함수가 호출되어 count 값을 1 증가
• 변경된 count 값은 화면에 표시되어 카운터가 증가되는 것이 즉시 적용되어 확인 가능

 

실행화면

위 예시처럼 useState를 사용하면 컴포넌트 내에서 간단하게 상태를 관리하고 업데이트할 수 있고, useState는 여러 개의 상태값을 동시에 사용하거나, 객체나 배열 형태의 상태값을 다루는 것도 가능하다.