state, useState

State와 useState는 React에서 컴포넌트 내부의 상태를 관리하기 위한 중요한 개념입니다. State는 컴포넌트의 데이터나 UI 상태를 저장하고, 상태 변경에 따라 컴포넌트가 다시 렌더링되도록 만듭니다.

1. State란?

State는 React 컴포넌트가 내부적으로 유지해야 하는 동적인 데이터를 의미합니다. State가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. 예를 들어, 사용자 입력값, API 응답, UI의 활성화 상태 등 다양한 값들을 state로 관리할 수 있습니다.

State는 주로 함수형 컴포넌트에서 useState 훅을 통해 선언되고 관리됩니다.

2. useState란?

useState는 React의 훅 중 하나로, 함수형 컴포넌트에서 state를 관리할 수 있게 해줍니다. useState는 초기값을 파라미터로 받고, 현재 상태 값과 상태를 업데이트하는 함수를 배열 형태로 반환합니다.

useState 기본 사용법

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값을 0으로 설정

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

export default Counter;

설명

• useState(0)은 count의 초기값을 0으로 설정합니다.
• count는 현재 state의 값이며, setCount는 state를 업데이트하는 함수입니다.
• setCount(count + 1)을 호출하면, count 값이 1 증가하고 컴포넌트가 다시 렌더링되어 새로운 값이 화면에 표시됩니다.

3. useState의 반환값 구조

useState는 배열을 반환하며, 배열 구조 분해 할당을 통해 다음 두 가지 요소를 받습니다:

1. 현재 상태 값: 첫 번째 요소는 현재 상태 값입니다.
2. 상태 업데이트 함수: 두 번째 요소는 상태를 변경하는 함수로, 이 함수를 호출하면 컴포넌트가 다시 렌더링됩니다.

이 구조는 다음과 같이 쓸 수 있습니다:

const [state, setState] = useState(initialValue);

---

4. useState의 초기값 설정

• useState는 초기값을 설정할 수 있습니다. 예를 들어, useState(0)은 초기값을 0으로 설정합니다.
• 초기값은 문자열, 숫자, 배열, 객체 등 다양한 타입으로 설정할 수 있습니다.

const [name, setName] = useState('John'); // 문자열 초기값
const [count, setCount] = useState(0);    // 숫자 초기값
const [items, setItems] = useState([]);   // 배열 초기값
const [user, setUser] = useState({ name: 'Alice', age: 25 }); // 객체 초기값

---

5. 상태 업데이트 함수

상태 업데이트 함수(setState)는 상태를 새로운 값으로 변경하며, 호출되면 컴포넌트가 자동으로 다시 렌더링됩니다. setState는 다음 두 가지 방식으로 사용할 수 있습니다.

1. 직접 값 전달: 새로운 값을 직접 전달하는 방식입니다.
2. setCount(count + 1); // count를 1 증가
3. 함수형 업데이트: 현재 상태를 기반으로 새로운 상태를 계산해야 할 때 사용합니다. 이전 상태 값을 받아 새 값을 반환하는 함수로 전달할 수 있습니다.함수형 업데이트는 비동기적 상태 업데이트 문제를 방지할 수 있어, 여러 업데이트가 중첩되거나 이전 상태에 의존해야 하는 상황에서 권장됩니다.
4. setCount((prevCount) => prevCount + 1);

---

6. useState와 객체 상태 관리

객체 상태를 업데이트할 때는 불변성을 유지해야 하므로, setState로 상태를 업데이트할 때 새로운 객체를 만들어야 합니다.

const [user, setUser] = useState({ name: 'Alice', age: 25 });

// 상태 업데이트 시 새로운 객체를 생성
setUser((prevUser) => ({
  ...prevUser,
  age: 26 // age만 업데이트하고 name은 유지
}));

위 코드에서 setUser로 새로운 객체를 반환할 때, 스프레드 연산자(...prevUser)를 사용해 이전 상태를 복사한 후 age만 업데이트했습니다. 이렇게 하면 React가 변경 사항을 감지할 수 있습니다.

---

7. 배열 상태 관리

배열 상태를 업데이트할 때도 새로운 배열을 만들어야 합니다. 예를 들어, 배열에 새로운 항목을 추가할 때는 기존 배열을 복사한 후 새로운 항목을 추가해야 합니다.

const [items, setItems] = useState([1, 2, 3]);

// 새로운 아이템 추가
setItems([...items, 4]);

// 아이템 제거 (index가 1인 항목 제거)
setItems(items.filter((item, index) => index !== 1));

• 배열 추가: [...items, newItem]처럼 스프레드 연산자를 사용하여 기존 배열에 새 항목을 추가합니다.
• 배열 삭제: .filter() 메서드를 사용해 특정 조건을 만족하는 항목을 제거하여 새로운 배열을 반환합니다.

---

8. 여러 상태 관리

useState를 여러 번 호출하여 다양한 상태를 관리할 수 있습니다. 여러 상태를 관리할 때 각각의 상태가 독립적으로 작동하므로 코드의 유연성과 유지보수성이 높아집니다.

function Profile() {
  const [name, setName] = useState('Alice');
  const [age, setAge] = useState(25);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Status: {isLoggedIn ? "Logged In" : "Logged Out"}</p>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        Toggle Login Status
      </button>
    </div>
  );
}

위 예제에서는 name, age, isLoggedIn 세 가지 상태를 각각 관리하고 있습니다. 각 상태는 독립적이므로 필요한 부분만 선택적으로 업데이트할 수 있습니다.

---

9. useState의 주의사항

• 비동기적 업데이트: useState의 업데이트는 비동기적이기 때문에, 업데이트된 값을 바로 읽으려 하면 예상과 다를 수 있습니다. 따라서 함수형 업데이트 방식이 필요한 상황을 잘 파악해야 합니다.
• 상태 불변성 유지: React는 참조형 데이터의 불변성을 유지해야 변경 사항을 감지할 수 있습니다. 객체나 배열 상태를 업데이트할 때는 새로운 객체나 배열을 만들어야 합니다.
• 의존성 관리: useState로 관리하는 상태가 다른 useEffect 등의 의존성이 될 수 있으므로, 상태를 의도한 대로 관리하는 것이 중요합니다.

---

정리

• State는 React 컴포넌트의 내부 상태로, 컴포넌트 내에서 데이터가 변할 때 사용합니다.
• useState 훅은 상태를 초기화하고 업데이트 함수를 제공합니다.
• 상태 변경이 발생하면 컴포넌트가 자동으로 다시 렌더링되어 UI가 업데이트됩니다.
• 불변성을 유지하며 상태를 업데이트하는 것이 중요합니다.

State와 useState를 이해하면 React 컴포넌트가 동적으로 사용자와 상호작용할 수 있도록 만들 수 있습니다. 이는 React 애플리케이션에서 UI 업데이트와 사용자 경험을 효율적으로 관리하는 데 매우 중요한 역할을 합니다.