리액트 훅(React Hook)의 개념과 사용법

이상준 (LeeSangJun)·2024년 6월 7일

리액트 훅(React Hook)이란 ?

리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 리액트 16.8 버전에서 새롭게 도입된 특징 중 하나가 바로 '훅' 입니다. 리액트 훅은 함수형 컴포넌트에서 리액트의 상태(state)와 생명주기 기능(lifecycle features)을 "연결(hook into)"할 수 있게 해주는 기능입니다. 이를 통해 클래스형 컴포넌트를 사용하지 않고도 상태 관리와 부수 효과(side effects)를 처리할 수 있게 되었습니다.

클래스형 컴포넌트 vs 함수형 컴포넌트

* 클래스형 컴포넌트

상태(state)와 생명주기 메서드(lifecycle methods)를 사용할 수 있습니다.
복잡한 컴포넌트를 구현할 때 유리할 수 있으나, 코드가 길어지고 복잡해질 수 있습니다.
리액트 훅이 도입되기 전에는 많이 사용되었습니다.

* 함수형 컴포넌트

리액트 훅의 도입으로 인해 상태 관리와 생명주기 기능을 사용할 수 있게 되면서, 클래스형 컴포넌트에 비해 코드가 간결해지고 이해하기 쉬워졌습니다.
재사용성과 테스트 용이성이 높아졌습니다.
최근 추세는 함수형 컴포넌트와 리액트 훅을 선호하는 방향으로 이동하고 있습니다.

주요 리액트 훅

1. useState

가장 기본적인 훅으로, 함수형 컴포넌트에서 상태 관리를 가능하게 합니다. 이를 통해 컴포넌트의 상태를 초기화하고 업데이트할 수 있습니다.

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

예제)

import React, { useState } from 'react';

function Counter() {
  // useState를 사용하여 count 상태와 이를 변경할 함수 setCount를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      {/* 현재 count 값을 출력합니다. */}
      <p>You clicked {count} times</p>
      {/* 버튼을 클릭할 때마다 count 값을 증가시키는 이벤트 핸들러를 설정합니다. */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

위의 예제에서는 useState를 사용하여 count 상태와 setCount 함수를 선언하였습니다. count 상태를 출력하고, 버튼을 클릭할 때마다 setCount 함수를 사용하여 count 값을 증가시킵니다.

이렇게 함으로써 간단한 카운터 기능을 구현할 수 있습니다. useState를 사용하면 함수형 컴포넌트에서도 손쉽게 상태를 관리할 수 있습니다.

2. useEffect

컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 훅입니다. 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount에 해당하는 작업을 수행합니다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 변경될 때만 이 효과를 재실행합니다.

예제)

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

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

  // useEffect 사용 예제
  useEffect(() => {
    // 컴포넌트가 마운트될 때 실행되는 코드
    console.log('컴포넌트가 마운트되었습니다.');

    // 언마운트(clean-up) 시 실행할 함수 정의
    return () => {
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  }, []); // 두 번째 매개변수로 빈 배열을 전달하여, 컴포넌트가 마운트될 때만 실행되도록 함

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
}

export default MyComponent;

위의 예제는 리액트 함수형 컴포넌트에서 useEffect 훅을 사용하는 간단한 예제입니다. 이 예제는 컴포넌트가 마운트될 때와 언마운트될 때 각각 특정 동작을 실행하는 방법을 보여줍니다.

useEffect 훅을 사용하여 컴포넌트의 라이프사이클에 특정 동작을 설정합니다. 이 경우, 컴포넌트가 마운트될 때와 언마운트될 때 각각 특정 메시지를 콘솔에 출력합니다.
useEffect의 두 번째 매개변수로 빈 배열을 전달하여, 컴포넌트가 마운트될 때만 해당 동작이 실행되도록 합니다. useEffect의 의존성 배열에 특정 값을 입력하면 그 값이 변할 때마다 해당 동작이 실행됩니다.
페이지가 로드될 때 컴포넌트가 마운트되었습니다.라는 메시지가 콘솔에 출력됩니다.
페이지를 벗어날 때(언마운트될 때) 컴포넌트가 언마운트되었습니다.라는 메시지가 콘솔에 출력됩니다.

이와 같이 useEffect를 사용하면 컴포넌트의 라이프사이클에 특정 동작을 연결할 수 있습니다.

3. useContext

리액트 컨텍스트(React Context)를 함수형 컴포넌트에서 사용할 수 있게 해줍니다.

리액트 컨텍스트(React Context) 란?

리액트 컨텍스트(React Context)는 리액트 애플리케이션에서 전역적으로 데이터를 관리할 수 있는 방법을 제공하는 메커니즘입니다. 컴포넌트 트리를 통해 명시적으로 props를 전달하지 않고도 컴포넌트 간에 데이터를 공유할 수 있게 해줍니다. 이는 특히 다양한 레벨에 걸쳐 있는 컴포넌트들 사이에서 데이터를 전달할 때 유용합니다.

사용예시)
컨텍스트는 주로 다음과 같은 상황에서 사용됩니다:

현재 로그인한 사용자 정보
테마 (다크 모드/라이트 모드)
선호하는 언어

기본사용법
컨텍스트를 사용하기 위해서는 먼저 컨텍스트를 생성해야 합니다. React.createContext를 호출하여 생성할 수 있습니다. 이 함수는 Provider와 Consumer라는 두 가지 컴포넌트를 반환합니다.

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const value = { theme: 'dark' }; // 여기서 데이터를 정의할 수 있습니다.
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const context = useContext(ThemeContext);
  return <div>현재 테마는 {context.theme}입니다.</div>;
}

위의 코드를 전체적으로 통합하여 사용하면, ThemeProvider가 테마 데이터를 제공하고, ThemedComponent가 이 데이터를 소비하여 화면에 출력하는 구조가 됩니다.

이와 같이 useContext를 사용하면 컴포넌트 트리 전체에서 prop drilling 없이 전역 상태를 쉽게 관리하고 공유할 수 있습니다.

.
.
.

주요 React Hook 외에 알아두면 좋은 Hooks

React의 주요 Hook인 useState, useEffect, useContext 외에도 다양한 유용한 Hook들이 있습니다.

1. useReducer

useReducer는 상태 관리 로직이 복잡해질 때 유용한 Hook입니다. 이 Hook은 Redux와 비슷한 방식으로 작동하며, 상태와 상태를 업데이트하는 디스패치 함수를 반환합니다. 주로 상태가 여러 가지 값으로 이루어져 있거나, 상태 업데이트 로직이 복잡한 경우에 사용됩니다.

2. useMemo

useMemo는 성능 최적화를 위해 사용되는 Hook입니다. 특정 연산 결과를 메모이제이션하여 불필요한 재계산을 피할 수 있습니다. 이는 특히 계산 비용이 높은 작업이나 렌더링 과정에서 성능 저하를 일으킬 수 있는 경우에 유용합니다.

3. useCallback

useCallback은 함수의 메모이제이션을 위해 사용됩니다. 이 Hook은 함수를 반환하며, 의존성 배열이 변경되지 않는 한 동일한 함수 인스턴스를 반환합니다. 이는 자식 컴포넌트에 콜백 함수를 props로 전달할 때 성능 최적화에 도움이 됩니다.

4. useRef

useRef는 DOM 요소나 클래스 컴포넌트 인스턴스에 접근할 때 사용됩니다. 또한, 컴포넌트가 리렌더링될 때마다 초기화되지 않는 변수를 유지하기 위해 사용할 수도 있습니다.

5. useLayoutEffect

useLayoutEffect는 useEffect와 비슷하지만, 모든 DOM 변경 후에 동기적으로 실행됩니다. 이는 화면에 레이아웃을 변경하거나 측정해야 하는 경우에 유용합니다. 일반적으로는 useEffect를 사용하고, 레이아웃 측정이나 DOM 변경이 필요한 경우에만 useLayoutEffect를 사용합니다.

6. useImperativeHandle

useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 인스턴스 값을 사용할 수 있도록 합니다. 이는 주로 useRef와 함께 사용되며, 자식 컴포넌트의 내부 메서드를 노출해야 할 때 유용합니다.

이 외에도 React에는 다양한 Hook들이 존재하며, 필요에 따라 적절한 Hook을 사용하는 것이 중요합니다. 각 Hook의 사용법과 목적을 잘 이해하면 더욱 효율적이고 유지보수하기 쉬운 React 애플리케이션을 만들 수 있습니다.

이상준 (LeeSangJun)

이전 포스트

Next.js 설치 가이드 / 개발세팅

다음 포스트