ReactJS useState Hook: 초보자 가이드

소개

사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리인 ReactJS는 구성 요소 로직을 단순화하고 향상시키기 위해 후크를 도입했습니다. React에서 가장 일반적으로 사용되는 후크 중 하나는 구성 요소의 상태를 관리하는 useState 후크입니다. 이것이 어떻게 작동하는지 이해하면 React의 잠재력을 최대한 활용하는 데 도움이 될 수 있습니다.

이 초보자 가이드에서는 후크가 무엇인지, useState를 사용하여 상태를 초기화하고 업데이트하는 방법, 다양한 유형의 상태를 유지하고 업데이트하는 방법을 살펴보겠습니다. 결국에는 구성 요소 내에서 자신 있게 상태를 관리할 수 있게 됩니다. 뛰어들자!

후크란 무엇입니까?

React의 후크

후크는 클래스 구성 요소를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해주는 함수입니다. Hooks 이전에는 컴포넌트 상태 관리가 클래스 컴포넌트 내부에서만 가능했습니다. useState와 같은 후크를 사용하면 기능적 구성 요소에 상태를 추가하여 더욱 다양하게 만들 수 있습니다.

React는 다음과 같은 여러 후크를 제공합니다.

• useState – 상태 관리용.
• useEffect – 데이터 가져오기와 같은 부작용에 사용됩니다.
• useContext – 애플리케이션 내에서 컨텍스트를 관리합니다.

후크는 상태 관리를 단순화하고 복잡한 클래스 기반 구성 요소의 필요성을 줄여줍니다. 후크의 장점은 더 깔끔하고 읽기 쉬운 코드를 유지하면서 필요한 기능을 제공하는 능력에 있습니다.

useState를 초기화하는 방법

기본 초기화

기능적 구성 요소에서 useState를 초기화하는 것은 간단합니다. React에서 후크를 가져와서 구성 요소 내에서 호출하는 것으로 시작됩니다. 구문은 다음과 같습니다.

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

고장:

• useState(0)는 초기값 0으로 상태를 초기화합니다.
• count는 상태 변수이고, setCount는 이 상태를 업데이트하는 데 사용되는 함수입니다.
• 버튼을 클릭할 때마다 상태가 업데이트되고 구성 요소가 새 값으로 다시 렌더링됩니다.

상태를 읽는 방법

현재 상태에 액세스

현재 상태를 읽는 것은 간단합니다. JSX 내에서 직접 상태 변수(이전 예제의 개수)를 사용하면 됩니다. React는 상태가 변경되면 컴포넌트를 다시 렌더링하므로 업데이트된 값이 자동으로 UI에 반영됩니다.

이전 예시를 수정하여 상태에 액세스하는 방법을 보여드리겠습니다.

Current count: {count}

이 코드는 카운트 상태에 액세스하여 이를 동적으로 표시합니다.

상태를 업데이트하는 방법

상태 설정기 기능 사용

React의 상태 업데이트는 useState의 두 번째 요소인 setter 함수를 사용하여 수행됩니다. 이 함수는 업데이트된 값을 가져와 해당 새 상태로 구성요소를 다시 렌더링합니다.

다음은 카운터를 늘리고 줄이는 방법의 예입니다.

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

React는 상태가 업데이트될 때마다 변경 사항이 UI에 원활하게 반영되도록 보장합니다. React에서는 상태 업데이트가 비동기식이라는 점을 기억하는 것이 중요합니다. 즉, setter 함수를 호출한 직후 업데이트된 상태가 항상 표시되는 것은 아닙니다.

국가는 무엇을 보유할 수 있는가?

다양한 유형의 값

React의 상태는 다음을 포함하여 다양한 데이터 유형을 보유할 수 있습니다.

• 숫자, 문자열, 부울과 같은 기본 유형.
• 객체 및 배열.
• Null 및 정의되지 않은 값.

다음 예를 살펴보겠습니다.

상태에서 문자열 유지:

const [name, setName] = useState("John");

상태에서 어레이 유지:

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

상태에서 물체를 유지하는 방법:

const [user, setUser] = useState({ name: "John", age: 30 });

React의 useState 후크를 사용하면 이러한 다양한 유형의 데이터를 관리할 수 있지만 객체나 배열과 같은 복잡한 유형을 업데이트할 때는 다음에 살펴보겠지만 주의해야 합니다.

상태의 개체 및 배열 업데이트

불변 업데이트

React에서 객체나 배열로 작업할 때는 불변으로 업데이트하는 것이 중요합니다. React는 중첩된 객체를 깊이 비교하지 않으므로 객체를 직접 수정해도 다시 렌더링이 실행되지 않습니다. 대신, 업데이트된 값으로 새 객체 또는 배열을 생성해야 합니다.

예: 객체 업데이트

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

이 예에서는:

• ...prevState를 사용하여 기존 상태(prevState)를 새 객체로 확산합니다.
• 그런 다음 원래 사용자 개체를 변경하지 않고 이름 속성을 수정합니다.

예: 어레이 업데이트

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

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

여기:

• 이전 배열(prevItems)을 펼치고 새 항목(4)을 추가하여 새 배열을 만듭니다.

FAQ 섹션

클래스 기반 상태 대신 useState를 사용하는 이유는 무엇입니까?

useState와 같은 후크는 기능적 구성 요소 내에서 상태 관리를 단순화하여 클래스 구성 요소에 비해 코드를 더 읽기 쉽고 덜 복잡하게 만듭니다.

useState가 여러 데이터 유형을 보유할 수 있나요?

예, useState는 문자열, 숫자, 배열, 객체, 부울은 물론 null 또는 정의되지 않은 값도 보유할 수 있습니다.

상태 업데이트는 비동기식인가요?

예, React는 상태를 일괄 업데이트하며 변경 사항은 setter 함수를 호출한 후 즉시 반영되지 않을 수 있습니다.

객체나 배열과 같은 복잡한 상태를 어떻게 업데이트합니까?

원래 상태의 변경을 방지하려면 항상 객체나 배열의 복사본을 만든 다음 스프레드 연산자(...)를 사용하여 불변하게 업데이트하세요.

결론

useState 후크는 React에서 가장 강력하고 자주 사용되는 후크 중 하나입니다. 기능적 구성요소 내에서 로컬 상태를 관리하는 데 도움이 되어 React 코드를 더욱 깔끔하고 효율적으로 만듭니다. 간단한 변수를 처리하든, 복잡한 객체와 배열을 처리하든, 상태를 올바르게 사용하고 업데이트하는 방법을 이해하는 것은 동적 React 애플리케이션을 구축하는 데 핵심입니다. 계속 연습하면 곧 React의 상태 관리를 쉽게 익힐 수 있습니다!

이제 useState를 사용하여 무에서 영웅으로 성장했으므로 이를 프로젝트에 통합하고 React의 마법이 실제로 작동하는 것을 확인하세요!