React 훅(Hooks) 기초: useState와 useEffect 사용법 가이드

React에서 훅(Hooks)을 사용하는 기본적인 방법은 다음과 같다. 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해준다. 가장 기본적인 훅은 useState와 useEffect이다.

useState 훅

useState 훅을 사용하여 상태 관리하기

useState 훅을 사용하면 함수형 컴포넌트에서 상태를 관리할 수 있다. 다음 예시는 useState 훅을 사용하여 카운터를 구현한 것이다.

import React, { useState } from 'react';

const Counter = () => {
  // useState 훅을 사용하여 count라는 상태 변수와 setCount라는 상태 업데이트 함수를 선언한다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

설명

• useState(0): useState 훅을 호출하여 초기값을 0으로 설정한다. count는 현재 상태 값을 나타내고, setCount는 상태 값을 업데이트하는 함수이다.
• <button onClick={() => setCount(count + 1)}>: 버튼을 클릭할 때마다 setCount 함수를 호출하여 count 값을 1 증가시킨다.

useEffect 훅

useEffect 훅을 사용하여 부수 효과 처리하기

useEffect 훅을 사용하면 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있다. 다음 예시는 useEffect 훅을 사용하여 문서의 타이틀을 업데이트하는 것이다.

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

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

  // useEffect 훅을 사용하여 count가 변경될 때마다 문서의 타이틀을 업데이트한다.
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // count가 변경될 때마다 useEffect 훅이 실행된다.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

export default Counter;

설명

• useEffect(() => { ... }, [count]): useEffect 훅을 사용하여 count 값이 변경될 때마다 특정 작업(여기서는 문서의 타이틀 업데이트)을 수행한다. 두 번째 인자로 전달된 배열([count])은 의존성 배열로, 이 배열에 포함된 값이 변경될 때마다 useEffect 훅이 실행된다.
• document.title = 'You clicked ${count} times': count 값이 변경될 때마다 문서의 타이틀을 업데이트한다.

마무리

이 단계를 따라하면 React에서 기본적인 훅을 사용하여 상태를 관리하고 부수 효과를 처리할 수 있다. useState 훅과 useEffect 훅은 함수형 컴포넌트에서 가장 많이 사용되는 훅으로, 이를 통해 컴포넌트의 동작을 더욱 효율적으로 관리할 수 있다. 추가적으로, React의 공식 문서와 튜토리얼을 참고하여 더 많은 훅과 고급 사용법을 익힐 수 있다.