샘플 코드를 보면서 React Hook 이해하기

React Hook은 개발자가 함수형 컴포넌트에 state 및 기타 React 기능을 추가할 수 있게 해주는 React.js의 강력한 기능이다. Hook을 사용하기 전에는 상태 관리와 컴포넌트 수명 주기 메서드를 클래스 컴포넌트에만 추가할 수 있었기 때문에 코드가 더 복잡하고 이해하기 어려웠다. Hook을 사용하면 React는 함수형 컴포넌트에 상태와 생명주기 메서드를 추가하는 더 간결하고 간단한 방법을 제공한다.

React에는 State와 Effect Hooks 두 가지 유형의 Hook이 있다.

State Hooks

State Hook은 함수형 컴포넌트가 state를 갖고 그 상태에 대한 업데이트를 관리할 수 있게 해준다. useState는 함수형 컴포넌트에 상태를 추가하는 가장 간단한 방법이다.

다음은 useState를 사용하여 컴포넌트에 상태 값을 추가하는 방법을 보여주는 샘플 이다.

import React, { useState } from 'react';

function Example() {
  // Declare a state variable called "count"
  const [count, setCount] = useState(0);

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

위 코드에서는 초기값이 0인 useState가 호출된다. 그러면 상태 변수 count와 count의 값을 업데이트하는 함수 setCount가 생성된다. 그런 다음 컴포넌트는 count의 현재 값을 렌더링하고 버튼을 클릭하면 setCount를 호출하여 count의 값을 업데이트하는 버튼을 렌더링한다.

Effect Hooks

Effect Hook을 사용하면 함수형 컴포넌트가 API 호출, 문서 제목 업데이트, 구독 설정 및 정리와 같은 부수적인 작업을 수행할 수 있다.

다음은 컴포넌트가 업데이트된 후 useEffect를 사용하여 부수적인 효과를 수행하는 방법을 보여주는 샘플 코드이다.

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

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

  useEffect(() => {
    // 브라우저 API를 사용하여 문서 제목 업데이트
    document.title = `You clicked ${count} times`;
  }, [count]);

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

위 코드에서는 컴포넌트가 업데이트된 후 count값이 변경되면 useEffect가 호출된다. 이를 통해 컴포넌트가 문서 제목을 업데이트하여 현재 count 값을 반영할 수 있다.

React Hook은 React.js의 함수형 컴포넌트에 상태와 부작용을 추가하는 간단하고 효과적인 방법을 제공한다. React를 처음 사용하든 숙련된 개발자이든, 코드에 Hook을 통합하면 컴포넌트를 더 관리하기 쉽고 이해하기 쉽게 만들 수 있다.