useState 정리

React에서 useState는 함수형 컴포넌트에 상태(state)를 추가할 수 있게 해주는 Hook이다. 이는 현대 React 개발에서 중요한 구성 요소로, 사용자 입력이나 동적인 데이터 등을 렌더링 사이에 기억하도록 한다.

# React에서의 상태(state)란?

React에서 상태는 컴포넌트가 렌더링되고 동작하는 방식을 결정하는 객체이다. 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 새로운 상태를 반영한다. 상태는 사용자 입력, 서버에서 가져온 데이터, 계산 결과 등 동적인 정보를 포함할 수 있다.

전통적으로 상태 관리는 클래스 컴포넌트에서 this.state와 this.setState를 사용하여 이루어졌다. 그러나 React 16.8 버전에서 Hooks가 도입된 이후, 이제는 함수형 컴포넌트에서도 useState를 통해 상태를 관리할 수 있다.

# useState 문법

setCount(prevCount => prevCount + 1);

• state: 현재 상태 값을 나타낸다. 이 값은 React가 컴포넌트를 렌더링하는 데 사용된다.
• setState: 상태 값을 업데이트할 때 사용하는 함수이다. 이 함수를 호출하면 React가 새로운 상태로 컴포넌트를 다시 렌더링한다.
• initialState: 컴포넌트가 처음 렌더링될 때의 초기 상태 값을 나타낸다. 원시 값, 객체, 배열 또는 함수가 될 수 있다.

# useState 사용 예시

import React, { useState } from 'react';

function Counter() {
  // "count"라는 상태 변수를 선언하고 초기 값을 0으로 설정
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>당신은 {count}번 클릭했습니다</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

export default Counter;

예시 설명

• const [count, setCount] = useState(0);
• count는 상태 변수를 의미
• setCount는 count를 업데이트하는 함수
• useState(0)는 count의 초기 값을 0으로 설정

버튼을 클릭하면 setCount(count + 1)이 호출되어 count 상태가 1 증가하고, 컴포넌트가 다시 렌더링된다.

# useState에 대한 중요한 사항

1. 렌더링 간 상태 유지: 일반 변수와 달리, React는 렌더링 사이에 상태를 "기억"한다. 예를 들어 count가 업데이트되면, React는 이 값을 렌더링할 때마다 유지한다.

2. 반응성: setState 함수를 사용하여 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링한다. 이를 통해 UI가 현재 상태를 반영하게 된다.

3. 함수형 업데이트: 새로운 상태가 이전 상태에 의존하는 경우, setState에 함수를 전달하는 것이 더 안전하다. 이렇게 하면 React가 상태 업데이트를 올바르게 처리할 수 있다. prevCount는 이전 상태 값을 나타낸다.  

setCount(prevCount => prevCount + 1);

4. 지연 초기화: 초기 상태가 계산의 결과일 경우, 함수를 useState에 전달할 수 있다. 이 함수는 컴포넌트가 처음 렌더링될 때만 호출된다. 이 경우, expensiveComputation 함수는 초기 렌더링 시에만 실행된다.

const [count, setCount] = useState(() => expensiveComputation());

# 일반적인 패턴 및 모범 사례

1. 여러 개의 useState 호출: 하나의 컴포넌트에서 여러 개의 상태를 관리하기 위해 useState를 여러 번 호출할 수 있다.

 

const [name, setName] = useState(''); const [age, setAge] = useState(0);

2. 객체와 배열을 상태로 사용: 객체나 배열을 상태로 사용할 수 있지만, 이를 업데이트할 때는 이전 상태를 복사하여 불변성을 유지하는 것이 중요하다.

const [user, setUser] = useState({ name: 'Alice', age: 25 }); // 중첩된 상태를 업데이트하는 올바른 방법 
setUser(prevUser => ({ ...prevUser, age: 26 }));

 

3. 직접적인 상태 변경을 피하라: 상태를 직접 수정하지 않고, 항상 setState 함수로 상태를 업데이트가 필요하다.

// 잘못된 방식 
user.age = 26; 
// 올바른 방식 
setUser({ ...user, age: 26 });

# useState의 사용 사례

• 폼 처리: 입력 필드의 값을 관리하는 데 사용.
• 카운터: 값의 증가나 감소를 관리 (예: 투표 시스템, 장바구니 수량 등).
• 토글 상태: true/false 값을 전환하는 데 사용 (예: 요소 표시/숨기기).
• 데이터 가져오기: API로부터 가져온 데이터를 저장.

# 요약

• useState는 함수형 컴포넌트에 상태를 추가하는 기본적인 Hook이다.
• 상태가 변경되면 React는 해당 상태에 따라 컴포넌트를 다시 렌더링한다.
• React는 렌더링 사이에 상태를 유지하며, 상태는 setState 함수를 통해 업데이트된다.

이 Hook은 React 함수형 컴포넌트에서 상호작용적이고 동적인 UI를 구축하는 기초이다.