React Hooks 실습

React 함수 컴포넌트에서 useState와 useEffect 훅을 사용한 간단한 예시입니다.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

export default Counter;

이 예시에서 useState 훅은 count라는 상태 변수와 그 값을 변경할 수 있는 setCount 함수를 제공합니다. useEffect 훅은 컴포넌트가 렌더링될 때마다 실행되며, count 값이 변경될 때만 페이지 제목을 업데이트합니다.

이 컴포넌트는 버튼을 클릭할 때마다 카운트를 증가시키고, 페이지 제목에 현재 카운트 값을 표시하는 간단한 동작을 보여줍니다.

1. useState:위 코드에서는 count라는 상태 변수와 그 값을 변경할 수 있는 setCount 함수를 선언했습니다. useState 함수의 인자로는 초기 상태 값을 전달합니다. 이 경우 초기 값은 0으로 설정됩니다.
2. const [count, setCount] = useState(0);
3. useState 훅은 함수 컴포넌트 내에서 상태를 관리하기 위해 사용됩니다. 함수 컴포넌트는 이전에 클래스 컴포넌트에서만 가능했던 상태 관리를 위한 메서드를 사용할 수 없기 때문에, useState 훅을 사용하여 상태를 추가하고 업데이트합니다.
4. useEffect:위 코드에서 useEffect 함수는 첫 번째 인자로 콜백 함수를 받습니다. 이 콜백 함수는 컴포넌트가 렌더링될 때마다 실행됩니다. 두 번째 인자로는 배열을 전달하는데, 이 배열은 해당 값이 변경될 때만 콜백 함수가 실행되도록 설정합니다. 위의 예시에서는 [count] 배열이 전달되었으므로, count 값이 변경될 때만 콜백 함수가 실행됩니다. 이 경우, 콜백 함수 내에서 페이지 제목을 업데이트하여 현재 카운트 값을 표시하도록 하고 있습니다.
5. useEffect(() => { document.title = `Count: ${count}`; }, [count]);
6. useEffect 훅은 컴포넌트 렌더링과 관련된 부수 효과(side effect)를 처리하기 위해 사용됩니다. 예를 들어, DOM 조작, 데이터 가져오기, 구독 및 구독 해제 등이 부수 효과에 해당합니다.

결과적으로 이 두 가지 훅은 함수형 컴포넌트에서 상태 관리와 부수 효과 처리를 간편하게 할 수 있게 해주는 핵심적인 도구입니다.