[javascript] 리액트 훅의 기본 개념과 사용 방법

22 Dec 2023

javascript

리액트 훅은 함수 컴포넌트에서 상태(state)나 다른 리액트 기능을 사용할 수 있게 해주는 함수입니다. 이 기능은 클래스를 사용하지 않고도 상태와 생명 주기 기능을 “훅”으로 연동할 수 있게 해줍니다. 이번 블로그에서는 리액트 훅의 기본 개념과 간단한 사용 방법을 알아보겠습니다.

훅(Hook)의 개념

리액트 훅은 useSomething 형태의 이름을 갖는 함수로, 컴포넌트 안에서만 호출해야 합니다. 이 함수는 컴포넌트의 생명 주기를 관리하거나, 컴포넌트가 상태를 가질 수 있도록 해줍니다. 주로 useState, useEffect, useContext 등의 내장 훅을 사용하고, 필요시에는 커스텀 훅을 만들어 사용할 수 있습니다.

훅 사용 방법

useState 훅 사용하기

import React, { useState } from 'react';

function Example() {
  // 상태 변수 count를 정의하고, setCount 함수로 상태를 업데이트합니다
  const [count, setCount] = useState(0);

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

useEffect 훅 사용하기

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

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

  // 컴포넌트가 렌더링될 때와 count가 업데이트되었을 때 동작하는 효과 함수를 정의합니다
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

결론

이번 글에서는 리액트 훅의 개념과 간단한 사용 방법에 대해 알아보았습니다. 리액트 훅은 클래스 컴포넌트와 함수 컴포넌트 사이의 간격을 좁히고, 렌더링 로직과 생명 주기를 분리하여 코드를 더 깔끔하게 작성할 수 있는 장점을 가지고 있습니다. 훅을 사용하여 더 견고하고 유지보수하기 쉬운 컴포넌트를 만들어보세요!