React의 useState Hook 마스터하기: 기본 및 고급 사용 사례

React의 useState 후크

useState 후크는 React에서 가장 일반적으로 사용되는 후크 중 하나입니다. 이를 통해 기능적 구성 요소에 상태를 추가할 수 있습니다. 후크가 도입되기 전에는 상태를 클래스 구성요소에서만 사용할 수 있었지만 useState를 사용하면 기능적 구성요소에서도 상태를 가질 수 있습니다. 이는 기능적 구성 요소를 더욱 강력하고 유연하게 만듭니다.

useState란 무엇인가요?

useState는 기능적 구성요소에서 상태 변수를 선언할 수 있게 해주는 함수입니다. 두 요소가 포함된 배열을 반환합니다.

1. 현재 상태 값 — 구성 요소에 액세스하고 표시할 수 있는 실제 상태 값입니다.
2. 해당 상태를 업데이트하는 함수 — 상태 변수의 값을 변경할 수 있는 함수

구문

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

• state는 현재 상태 값입니다.
• setState는 상태를 업데이트하는 데 사용하는 함수입니다.
• initialState는 구성 요소가 처음 렌더링될 때 상태가 갖게 될 초기 값입니다.

사용예

기본 예:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

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

export default Counter;

• 설명:
  • useState(0)는 초기 카운트 값을 0으로 설정합니다.
  • setCount는 버튼을 클릭할 때 개수를 업데이트하는 데 사용되며, 업데이트된 개수로 다시 렌더링이 시작됩니다.

기능 업데이트 사용:

새 상태가 이전 상태에 따라 달라지는 경우 setState에 함수를 전달할 수 있습니다. 이렇게 하면 최신 상태 값을 기반으로 업데이트가 발생합니다.

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• 설명: 여기서 prevCount는 이전 상태 값이고 함수는 해당 값을 기반으로 새 상태를 반환합니다.

다중 상태 변수:

구성 요소 내에서 useState를 여러 번 사용하여 다양한 상태를 관리할 수 있습니다.

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

• 설명: 여기서는 두 개의 개별 상태 변수(개수 및 이름)가 독립적으로 관리됩니다.

지연 초기화

초기 상태가 복잡하거나 계산이 필요한 경우 구성 요소가 처음 렌더링될 때만 실행되는 함수를 useState에 전달할 수 있습니다.

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

• 설명: 이 기술은 초기 렌더링 중에 한 번 계산해야 하는 계산이나 부작용을 기반으로 상태를 초기화하려는 경우에 유용합니다.

객체 또는 배열로 상태 업데이트

상태가 객체 또는 배열인 경우 setState 함수는 제공한 상태의 특정 부분만 업데이트합니다. React는 깊은 병합을 수행하지 않으므로 상태 객체의 일부를 변경하려면 전체 상태 객체를 명시적으로 업데이트해야 합니다.

개체 상태 업데이트 중:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

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

export default Counter;

• 설명: setUser는 이전 상태를 확산하고 이름 속성을 변경하여 상태 개체를 업데이트하는 데 사용됩니다.

어레이 상태 업데이트 중:

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• 설명: 스프레드 연산자(...prevItems)를 사용하여 이전 항목과 새 항목('주황색')으로 새 배열을 만듭니다.

피해야 할 일반적인 함정

1. 상태 직접 수정: 상태를 직접 수정하지 마세요(예: state = newState). React가 DOM을 올바르게 업데이트하는지 확인하려면 항상 setState 함수를 사용하세요.

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

1. 상태 업데이트는 비동기식입니다: React는 상태 업데이트를 일괄 처리합니다. 즉, setState를 호출한 후 상태가 즉시 업데이트되지 않을 수 있습니다. 이는 이전 상태를 사용하여 새 상태를 계산할 때 특히 중요합니다.

useState 요약:

• useState를 사용하면 기능적 구성 요소에 상태를 추가할 수 있습니다.
• 현재 상태와 이를 업데이트하는 함수인 배열을 반환합니다.
• 초기 상태는 값(예: 숫자, 문자열, 부울) 또는 객체/배열일 수 있습니다.
• 여러 useState 호출을 사용하여 구성 요소 내의 다양한 상태를 관리할 수 있습니다.
• 상태 업데이트는 비동기식이므로 직접 수행해서는 안 됩니다.

결론

useState 후크는 구성요소 상태 관리를 위한 React의 기본 구성 요소입니다. 이를 통해 기능적 구성 요소가 자체 로컬 상태를 가질 수 있으므로 코드가 더욱 모듈화되고 이해하기 쉬워집니다. useState를 사용하면 사용자 입력이나 이벤트에 응답하는 동적 및 대화형 구성 요소를 구축할 수 있습니다.

---

위 내용은 React의 useState Hook 마스터하기: 기본 및 고급 사용 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!