리액트 훅(Hooks)을 알아보자

리액트 훅(Hooks)의 개념과 활용 방법, 실 사용 예제

리액트 훅(Hooks)은 함수형 컴포넌트에서도 상태와 생명주기 기능을 사용할 수 있도록 해주는 리액트의 기능입니다. 리액트 16.8 버전부터 도입된 훅은 코드의 간결성과 재사용성을 높여주며, 클래스형 컴포넌트를 사용할 필요 없이 함수형 컴포넌트만으로도 다양한 기능을 구현할 수 있게 합니다.

리액트 훅의 주요 개념

1. 함수형 컴포넌트의 한계를 보완

리액트는 본래 함수형 컴포넌트가 상태(state)와 생명주기 메서드를 사용할 수 없었습니다. 이에 따라 상태나 생명주기가 필요한 경우에는 클래스형 컴포넌트를 사용해야 했지만, 훅의 도입으로 함수형 컴포넌트에서도 이를 사용할 수 있게 되었습니다.

2. 다양한 내장 훅 제공

리액트는 상태 관리, 사이드 이펙트 처리, DOM 조작 등을 위한 여러 내장 훅을 제공합니다. 대표적으로 useState, useEffect, useContext 등이 있으며, 이 외에도 커스텀 훅을 만들어 특정 로직을 재사용할 수 있습니다.

 

 

 

 

기본 훅과 활용 방법

1. useState: 상태 관리

useState 훅은 컴포넌트의 상태 값을 선언하고 업데이트할 수 있게 해줍니다. 초기값을 설정하고, 상태 값을 갱신하는 함수를 반환합니다.

예제

import React, { useState } from 'react';

function Counter() {
  // count는 현재 상태 값, setCount는 상태를 업데이트하는 함수
  const [count, setCount] = useState(0);

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

export default Counter;

위 예제에서 useState(0)은 count라는 상태를 0으로 초기화하고, setCount를 통해 상태를 갱신합니다. setCount(count + 1)을 호출하면 버튼을 클릭할 때마다 count가 증가합니다.

2. useEffect: 사이드 이펙트 처리

useEffect 훅은 사이드 이펙트(예: 데이터 가져오기, 구독 설정, 타이머 설정 등)를 처리하는 데 사용됩니다. 이 훅은 렌더링 이후 특정 작업을 수행할 수 있게 하며, 의존성 배열을 통해 업데이트 조건을 제어할 수 있습니다.

예제

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 타이머를 정리
    return () => clearInterval(interval);
  }, []);

  return <div>Elapsed time: {seconds} seconds</div>;
}

export default Timer;

useEffect는 처음에 한 번만 타이머를 설정하고, 컴포넌트가 사라질 때 타이머를 정리합니다. 의존성 배열이 비어 있으므로 컴포넌트가 마운트될 때만 실행됩니다.

3. useContext: 컨텍스트 사용

useContext 훅은 컨텍스트를 통해 전역 상태를 쉽게 가져올 수 있게 해줍니다. 주로 테마나 사용자 정보 등 여러 컴포넌트에서 공통으로 필요한 데이터에 유용합니다.

예제

import React, { useContext } from 'react';

// 테마 컨텍스트 생성
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return <button className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>Theme Button</button>;
}

export default ThemedButton;

위 예제에서는 ThemeContext에서 현재 테마 값을 가져와 버튼의 스타일을 조정합니다. 부모 컴포넌트에서 ThemeContext.Provider를 사용해 테마 값을 설정하면 하위 컴포넌트에서 해당 값을 쉽게 접근할 수 있습니다.

 

 

 

 

 

 

 

고급 훅과 활용 방법

1. useReducer: 복잡한 상태 관리

useReducer는 useState보다 복잡한 상태 로직을 관리할 때 유용합니다. Redux와 비슷한 방식으로, 액션과 리듀서를 사용하여 상태를 업데이트합니다.

예제

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default Counter;

useReducer는 dispatch 함수를 사용하여 액션을 전달하며, 리듀서 함수가 호출되어 상태를 변경합니다. 복잡한 상태나 여러 상태가 상호작용할 때 특히 유용합니다.

2. useMemo: 성능 최적화

useMemo 훅은 비싼 계산이 반복되는 것을 방지하여 성능을 최적화할 때 사용됩니다. 특정 값이 변경될 때만 다시 계산하도록 의존성을 설정할 수 있습니다.

예제

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

function ExpensiveCalculation({ num }) {
  const calculation = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <div>Result: {calculation}</div>;
}

export default ExpensiveCalculation;

num 값이 변경될 때만 calculation이 재계산되므로 불필요한 연산을 줄일 수 있습니다.

3. useCallback: 함수 메모이제이션

useCallback은 함수를 메모이제이션하여, 함수가 불필요하게 재생성되는 것을 방지합니다. 주로 자식 컴포넌트에 함수를 props로 전달할 때 유용합니다.

예제

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

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

  const handleClick = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent 렌더링');
  return <button onClick={onClick}>Click me</button>;
}

export default ParentComponent;

useCallback을 사용하면 handleClick이 재생성되지 않으므로, ChildComponent가 불필요하게 렌더링되는 것을 방지할 수 있습니다.

 

 

 

 

 

 

커스텀 훅

커스텀 훅은 기존의 훅들을 조합하여 특정 기능을 캡슐화한 훅입니다. 이를 통해 반복되는 로직을 재사용하고 코드의 가독성을 높일 수 있습니다.

예제: 윈도우 크기 감지 훅

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
}

// 사용 예시
function App() {
  const size = useWindowSize();

  return (
    <div>
      <p>Width: {size.width}</p>
      <p>Height: {size.height}</p>
    </div>
  );
}

export default App;

useWindowSize 훅은 화면 크기를 감지하고 업데이트하여, 크기에 따른 UI 변화를 쉽게 구현할 수 있게 합니다.

결론

리액트 훅은 함수형 컴포넌트를 사용한 UI 개발을 단순하고 효율적으로 만들어줍니다. 다양한 내장 훅과 커스텀 훅을 통해 상태 관리, 성능 최적화, 사이드 이펙트 관리 등을 손쉽게 구현할 수 있습니다. 이를 통해 유지보수가 용이하고 재사용 가능한 코드베이스를 구축할 수 있습니다.