React Hooks 사용법

 

안녕하세요 devRookie입니다. 

 

React.js 에서 가장 많이 사용하게 되는게 바로 Hooks입니다. 

React Hooks는 React v16.8에서 추가된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 관리할 수 있게 해주는 기능입니다. 이번 글에서는 React Hooks 사용법에 대해 상세히 알아보겠습니다.

 

 

 

useState Hook

import React, { useState } from 'react';

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

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

위 예제에서 useState Hook은 배열을 반환합니다. 배열의 첫 번째 요소(count)는 상태값을, 두 번째 요소(setCount)는 해당 상태값을 변경하는 함수를 의미합니다. 위 코드에서는 버튼이 클릭될 때마다 setCount 함수를 호출하여 count 값을 1 증가시킵니다.

 

useEffect Hook  

useEffect Hook은 컴포넌트에서 side effect를 수행할 수 있게 해주는 Hook입니다. 이 Hook을 사용하면 componentDidMount, componentDidUpdate, componentWillUnmount 등과 같은 생명주기 메소드를 대체할 수 있습니다. useEffect Hook은 다음과 같이 사용합니다.

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

위 예제에서 useEffect Hook은 컴포넌트가 렌더링될 때마다 실행됩니다. useEffect 함수 내에서 document.title을 변경하는 코드가 실행됩니다. 이렇게 useEffect Hook을 사용하면 컴포넌트에서 side effect를 수행할 수 있습니다.

useContext Hook

useContext Hook은 Context를 사용할 수 있게 해주는 Hook입니다. 이 Hook을 사용하면 Context.Provider를 통해 전역 상태를 관리하는 작업을 쉽게 할 수 있습니다. useContext Hook은 다음과 같이 사용합니다.

import React, { useContext } from 'react';
import MyContext from './MyContext';

function MyComponent() {
  const { name } = useContext(MyContext);

  return <div>{name}</div>;
}

위 예제에서 MyContext는 React.createContext 함수를 통해 생성한 Context입니다. useContext Hook을 사용하여 MyContext.Provider에서 제공하는 name 값을 가져와 출력하고 있습니다.

useReducer Hook

useReducer Hook은 useState Hook과 비슷한 역할을 하지만, 좀 더 복잡한 상태 관리를 할 때 사용됩니다. 이 Hook을 사용하면 상태를 변경하는 로직을 함수로 분리하여 관리할 수 있습니다. useReducer Hook은 다음과 같이 사용합니다.

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:
      throw new Error();
  }
}

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

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

위 예제에서 useReducer Hook은 reducer 함수와 initialState를 인자로 받아서 state와 dispatch 함수를 반환합니다. dispatch 함수를 호출하면 reducer 함수가 호출되어 상태를 변경합니다. 위 코드에서는 버튼을 클릭할 때마다 dispatch 함수를 호출하여 상태를 변경합니다.

useCallback Hook

useCallback Hook은 함수형 컴포넌트에서 함수를 캐싱할 때 사용됩니다. 이 Hook을 사용하면 함수를 불필요하게 재생성하지 않고, 이전에 생성한 함수를 재사용할 수 있습니다. useCallback Hook은 다음과 같이 사용합니다.

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    onClick('Hello, world!');
  }, [onClick]);

  return <button onClick={handleClick}>Click me</button>;
}

위 예제에서 handleClick 함수는 onClick 함수를 인자로 받아서 클릭 이벤트가 발생할 때마다 onClick 함수를 호출합니다. useCallback Hook을 사용하여 handleClick 함수를 캐싱하고 있습니다. 만약 onClick 함수가 변경되지 않으면, handleClick 함수는 이전에 생성한 함수를 재사용합니다.

useMemo Hook

useMemo Hook은 함수형 컴포넌트에서 계산된 값을 캐싱할 때 사용됩니다. 이 Hook을 사용하면 불필요한 계산을 최소화하고 성능을 향상시킬 수 있습니다. useMemo Hook은 다음과 같이 사용합니다.

import React, { useMemo } from 'react';

function MyComponent({ a, b }) {
  const result = useMemo(() => {
    return a + b;
  }, [a, b]);

  return <div>{result}</div>;
}

위 예제에서 result 변수는 useMemo Hook을 사용하여 a + b 값을 계산하고 있습니다. useMemo Hook은 a와 b 값이 변경될 때마다 새로 계산된 값을 반환합니다.

React Hooks는 함수형 컴포넌트에서 상태와 생명주기를 관리할 수 있는 강력한 기능을 제공합니다. 위에서 소개한 React Hooks를 적극적으로 활용하여 코드를 작성하면, 더 가독성 높은 코드를 작성할 수 있으며, 성능도 향상시킬 수 있습니다. 

 

이상 devRookie였습니다.