useState Hook이란🤔

React useState Hook이란?🤔

React에서 useStae는 상태를 관리하기 위한 Hook 중 하나입니다. 함수형 컴포넌트에서도 상태를 관리할 수 있게 해줍니다.

 

사용 방법💻

useState를 사용하기 위해서는 useState 함수를 import 해야합니다.

useState 함수를 호출할 때, 인자로 초기 상태 값을 전달합니다. useState 함수는 배열을 반화하는데, 첫 번째 요소는 상태 값이고, 두번째 요소는 상태를 갱신하는 함수입니다.

 

import React, { useState } from 'react';

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

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

 

함수를 전달하는 방법🔍

useState 함수를 호출할 때, 인자로 함수를 전달할 수도 있습니다. 이 함수는 초기 상태 값을 계산하는 데 사용됩니다. 예를 들어, Date 객체를 초기 상태 값으로 사용하는 경우.

 

import React, { useState } from 'react';

function Clock() {
  const [time, setTime] = useState(() => new Date());

  return (
    <div>
      <p>The current time is {time.toLocaleTimeString()}</p>
      <button onClick={() => setTime(new Date())}>
        Refresh
      </button>
    </div>
  );
}

위 코드에서는 useState 함수에 함수를 전달하여 초기 상태값을 계산합니다. 이 함수는 Date 객체를 반환하며, 초기 상태 값으로 사용됩니다. 또한, 버튼을 클릭하면, setTime 함수를 호출하여 time 값을 갱신합니다.

 

여러 개의 상태 값을 관리하는 방법📚

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`Submitted name: ${name} and email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(event) => setName(event.target.value)} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

 

useState를 사용하는 이유📝

useState를 사용하면, 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. 클래스형 컴포넌트에서는 this.state를 사용하여 상태를 관리하지만, 함수형 컴포넌트에서는 useState를 사용합니다. 또한, useState를 사용하면, 상태 값을 갱신할 때마다 컴포넌트를 다시 렌더링합니다. 이를 통해, 컴포넌트가 항상 최신 상태를 유지.

 

 

공식문서 꼭 보기!🕵️‍♂️

https://react.dev/reference/react/useState

useState – React