React Hooks: useState 사용하기

React 초보자인 경우 이 블로그 게시물은 useState를 사용하여 구성 요소를 React 앱으로 다시 렌더링하는 이점에 익숙해지는 것을 목표로 합니다.

후크란 무엇입니까?

후크는 사용자가 코드를 재구성하거나 계층 구조를 재구성하지 않고도 구성 요소의 상태 저장 논리를 사용할 수 있도록 하는 방법입니다. 기본적으로 후크를 사용하면 프로젝트의 다양한 구성 요소에서 작업하는 사람들이 더 쉽게 협업할 수 있습니다. React에서 제공하는 가장 유용한 Hook 중 하나는 useState 입니다.

useState는 무엇을 합니까?

useState를 사용하면 사용자가 쉽게 상태 변수를 만들고 업데이트할 수 있습니다. 먼저 사용자는 상태 변수와 상태 변수를 업데이트할 함수를 선언해야 합니다. 그런 다음 사용자는 useState를 호출하고 초기 상태를 설정합니다. (초기 상태에 대한 참고 사항은 모든 데이터 유형이 될 수 있다는 것입니다! 자세한 내용은 아래 참조) 아래에서 예를 참조하세요.

import React, { useState } from 'react';

function App () {
  const [dog, setDog] = useState('');
}

useState 후크가 상태 변수 dogs를 선언하고 이를 빈 문자열에 할당하는 것을 볼 수 있습니다. 이제 setDog를 활용하여 dog의 상태를 업데이트하는 함수를 사용할 수 있습니다. React에서 상태 업데이트의 장점은 이것이 앱을 다시 렌더링하도록 트리거한다는 것입니다! 개의 값을 설정하고 앱을 다시 렌더링하는 기능을 활용하는 방법을 살펴보겠습니다.

import React, { useState } from 'react';

function App () {
  const [dog, setDog] = useState('');

  function addDogs () {
    setDogs('German Shepherd');
  }

  return (
    <p onClick={addDogs}>Click me to see my favorite dog: {dog} </p>
  )
}

이것은 이 <p> 태그를 클릭할 때마다 dog 상태를 German Shepherd로 설정하는 방법에 대한 매우 간단한 예입니다. 상태 변수는 앱의 필요에 따라 더 복잡한 방식으로 업데이트할 수 있습니다. 상태 변수는 하위 구성 요소에 소품으로 전달될 수도 있습니다. 이를 통해 사용자는 상위 구성 요소에서 다시 렌더링을 트리거하는 하위 구성 요소의 상태를 업데이트할 수 있습니다.

배열 및 객체에 대한 참고 사항

위의 예에서 변수dog를 업데이트하는 것은 <p> 태그를 클릭하면 단일 값으로만 ​​업데이트되므로 매우 간단했습니다. 배열이나 객체를 업데이트할 때 배열의 마지막 요소나 객체의 단일 키만 업데이트하려는 경우 이전 데이터를 지우지 않는 것이 중요합니다. 이러한 이유로 스프레드 연산자를 사용하여 이전 상태 데이터를 유지하는 것이 중요합니다. 아래 w3schools의 예를 살펴보십시오.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

자동차 색상은 업데이트되지만 자동차 모델과 자동차 연도는 변경되지 않도록 스프레드 연산자가 이전 상태를 유지하는 방법을 볼 수 있습니다.

결론

useState는 반응 상태에 연결하고 상태를 업데이트하여 다시 렌더링을 트리거하는 매우 사용자 친화적인 방법입니다. useState에서 활용할 수 있는 다양한 응용 프로그램이 있으므로 실험을 시작하십시오. 즐거운 코딩하세요!