useState와 useEffect의 기본 활용

useState와 useEffect는 React의 훅(hook) 중에서 가장 자주 사용되는 두 가지입니다. 아래에서 간단한 예제를 통해 두 훅의 기본 활용을 살펴보겠습니다.

useState의 기본 활용:

useState는 함수형 컴포넌트에서 상태를 사용할 수 있게 해주는 훅입니다.

import React, { useState } from 'react';

const Counter = () => {
  // count 상태와 setCount 업데이트 함수를 선언
  const [count, setCount] = useState(0);

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

export default Counter;

위의 예제에서 useState(0)은 초기 상태가 0인 count라는 상태 변수와 setCount라는 해당 상태를 업데이트하는 함수를 생성합니다. 버튼을 클릭할 때마다 setCount를 호출하여 count 상태를 업데이트하고, 화면에는 현재의 count 값이 표시됩니다.

useEffect의 기본 활용:

useEffect는 부수 효과(side effect)를 수행할 수 있게 해주는 훅입니다. 주로 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등의 작업에 사용됩니다.

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 이 부분에서 데이터를 가져오거나 다른 부수 효과를 수행
    fetchData().then((result) => setData(result));
  }, []); // 두 번째 매개변수로 빈 배열을 전달하면 마운트와 언마운트 시에만 useEffect가 실행됨

  return <p>Data: {data}</p>;
};

export default DataFetcher;

위의 예제에서 useEffect는 컴포넌트가 마운트되었을 때, 그리고 빈 배열로 전달되어 있으므로 언마운트될 때만 실행됩니다. fetchData 함수는 비동기 작업을 수행하고, 데이터가 준비되면 setData를 통해 상태를 업데이트하고 화면에 표시됩니다.

이러한 예제에서는 useState와 useEffect를 함께 사용하여 상태를 관리하고 비동기 작업을 수행하는 방법을 보여줍니다.