리액트 useState에 대해 알아보자

사용자가 증가 및 감소할 수 있는 카운터를 만들고 싶다고 가정해 보겠습니다. useState 훅을 사용하여 카운트에 대한 상태 변수와 카운트를 업데이트하는 함수를 만들 수 있습니다.

 

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

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

 

사용자가 "Increment" 버튼을 클릭하면 증가 함수가 호출되고 현재 카운트 값에 1을 더한 setCount를 호출하여 카운트 값이 업데이트됩니다. 마찬가지로 "감소" 버튼을 클릭하면 감소 함수가 호출되고 현재 카운트 값에서 1을 뺀 값으로 setCount를 호출하여 카운트 값이 업데이트됩니다. 이로 인해 구성 요소가 업데이트된 개수 값으로 다시 렌더링됩니다.

 

 

 

 

React는 가볍고 빠르게 로딩되는 사용자 인터페이스를 만들기 위해 불변성의 사용을 강조하는 단일 페이지 애플리케이션을 구축하기 위한 강력한 라이브러리입니다. React에서 상태는 시간이 지남에 따라 변경될 수 있고 구성 요소의 동작이나 모양에 영향을 미칠 수 있는 모든 데이터를 나타냅니다. 

 

기능적 구성 요소에서 상태를 관리하기 위해 React는 useState라는 후크를 제공합니다. useState 후크는 기능 구성 요소에 상태를 추가하는 사용하기 쉽고 유연한 방법입니다. 구성 요소의 함수 본문 내에서 상태 변수와 해당 변수를 업데이트하는 함수를 선언할 수 있습니다.

 

useState 후크를 사용하면 React의 불변성을 활용하여 응답성이 뛰어나고 효율적인 사용자 인터페이스를 만들 수 있습니다. useState에 의해 관리되는 상태를 통해 React는 전체 페이지를 다시 로드할 필요 없이 변경해야 하는 UI 부분만 업데이트할 수 있습니다.

 

전반적으로 useState 후크는 React에서 상태를 관리하기 위한 강력하고 필수적인 도구이며 개발자가 고성능 웹 애플리케이션을 만들기 위해 널리 사용합니다.

 

 

 

다음에는 useEffect에 대해 알아보겠습니다.