REACT useState

useState란?

▶ useState는 리액트에서 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 훅(Hook)입니다. 클래스형 컴포넌트에서 this.state와 this.setState를 사용하는 것과 유사한 기능을 제공하지만, 함수형 컴포넌트에서 더 간결하게 사용할 수 있다는 장점이 있습니다.

useState의 기본 사용법

▶ 간단한 예시를 통해 기본 사용법에 대해 알아보도록 하겠습니다.

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수와 setCount라는 상태 갱신 함수를 선언합니다.
  const [count, setCount] = useState(0);

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

• 위의 예시에서는 React를 임포트하여 리액트 컴포넌트를 정의할 수 있게 한 후 useState 훅을 임포트하여 함수형 컴포넌트에서 상태를 관리할 수 있도록 먼저 지정해주었습니다.
• 그 다음 const라는 변수에 count라는 이름의 상태 변수와 setCount라는 이름의 상태 갱신 함수를 선언하고 useState는 0으로 설정해줌으로서 count의 초기 값을 0으로 지정하였습니다.
• 이 때, count는 현재 상태 값을 저장하는 변수이며 setCount는 상태를 갱신하는 함수입니다.
• 이 컴포넌트는 JSX를 반환하여 UI를 정의하는데, div요소 안에 p와 button요소가 포함되어 있습니다.
• 여기서 p태그는 count 변수를 {} 안에 넣어 현재 상태 값을 표시하는데, 초기 상태 값이 0이므로, 초기 렌더링 시 You clicked 0 times라는 텍스트가 표시됩니다.
• 버튼을 누르면 count가 1씩 증가하도록 설정했기 때문에 버튼을 누을 때마다 1씩 증가된 숫자가 텍스트로 표시되어 나옵니다.

useState의 다양한 사용법

▶ 기본적인 사용 외에도 여러 개의 상태 변수를 사용하거나, 갱신할 때도 useState를 사용할 수 있는데, 아래의 예시를 통해 알아보도록 하겠습니다.

1. 여러 개의 상태변수 사용 시

function UserProfile() {
  const [name, setName] = useState('John Doe');
  const [age, setAge] = useState(30);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

• 위의 예시는 UserProfile 컴포넌트에 useState 훅을 사용하여 사용자의 이름과 나이를 관리하는 예제입니다.
• useState 훅을 호출하여 두 개의 변수를 만들어주었는데, 변수는 아래와 같습니다. 현재 사용자의 이름을 저장하는 name과, 이름의 상태를 갱신하는 setName -> name의 초기 값을 ‘John Doe’로 설정
  현재 사용자의 나이를 저장하는 age와, 나이 상태를 갱신하는 setAge -> age의 초기 값을 30으로 설정
  
• 그 다음 각 각의 변수를 {} 안에 넣어 현재 상태값을 p태그로 표시한 후,
• 버튼을 누를 때마다 나이의 값이 +1씩 되도록 설정해주었습니다.

2. 상태를 갱신할 경우

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

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

• 위의 예시는 리액트 함수형 중 하나인 Counter를 이용해 버튼을 클릭할 때마다 클릭 횟수를 기록하고 표시하는 간단한 갱신 형태입니다.
• 여기선 useState 훅을 호출하여 상태 변수를 생성해주었는데, count는 현재 클릭 횟수를 저장하는 상태 변수이며 setCount는 클릭 횟수 상태를 갱신하는 함수입니다.
• 또한 useState는 0으로, 즉 count의 초기 값을 0으로 설정하였으며 이 초기 값은 컴포넌트가 처음 렌더링될 때만 사용됩니다.
• 마지막으로 렌더링 시 클릭을 할 때마다 1씩 증가하도록 해주었으며, 여기서 prevCount는 이전 클릭횟수를 나타내는 변수입니다.
• 따라서 처음에는 You clicked 0 times로 표기되고, 그 다음부턴 1씩 갱신된 상태로 표기가 됩니다.

이렇게 오늘은 useState에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문인만큼 미리 공부해두면 좋을 것 같네요! 그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!