리액트 훅

리액트 훅 (React Hooks)

소개

리액트 훅은 React 16.8에 추가된 새로운 기능으로, 클래스 없이도 상태(state)와 기타 React 기능을 사용할 수 있게 해줍니다. 훅은 상태, 생명주기(lifecycle), 컨텍스트(context)와 같은 React 개념에 더 직접적인 API를 제공합니다.

기본 훅

useState

useState 훅은 함수형 컴포넌트에 상태를 추가할 수 있게 해줍니다. 이 훅은 현재 상태와 상태를 업데이트하는 함수를 포함한 배열을 반환합니다.

import React, { useState } from 'react';

function Example() {
  // 초기 값이 0인 "count"라는 상태 변수를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>당신은 {count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>
        클릭하세요
      </button>
    </div>
  );
}

useEffect

useEffect 훅은 함수형 컴포넌트에서 부수 효과(side effects)를 수행할 수 있게 해줍니다. 이는 클래스형 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 사용되며, 하나의 API로 통합되었습니다.

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

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

  // componentDidMount와 componentDidUpdate와 유사하게 동작합니다:
  useEffect(() => {
    // 브라우저 API를 사용하여 문서의 타이틀을 업데이트합니다.
    document.title = `당신은 ${count}번 클릭했습니다.`;
  }, [count]); // count가 변경될 때만 이펙트를 다시 실행합니다.

  return (
    <div>
      <p>당신은 {count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>
        클릭하세요
      </button>
    </div>
  );
}

useContext

useContext 훅은 클래스 없이도 React의 컨텍스트 기능을 사용할 수 있게 해줍니다. 이 훅은 컨텍스트 객체(즉, React.createContext로 생성된 값)를 받아 현재 컨텍스트 값을 반환합니다.

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="안녕하세요, 세계!">
      <MyComponent />
    </MyContext.Provider>
  );
}

추가 훅

useReducer

useReducer 훅은 여러 하위 값이 있는 복잡한 상태 로직이 있거나 다음 상태가 이전 상태에 따라 달라질 때 useState보다 선호됩니다. 이 훅은 콜백 대신 dispatch를 전달할 수 있어 깊은 업데이트를 트리거하는 컴포넌트의 성능을 최적화할 수 있게 해줍니다.

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>
      카운트: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

useMemo

useMemo 훅은 메모이즈된 값을 반환합니다. “생성(create)” 함수와 의존성 배열을 전달하세요. useMemo는 의존성 중 하나가 변경된 경우에만 메모이즈된 값을 다시 계산합니다. 이 최적화는 매 렌더링마다 비용이 많이 드는 계산을 방지하는 데 도움이 됩니다.

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

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

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

useCallback

useCallback 훅은 메모이즈된 콜백을 반환합니다. 인라인 콜백과 의존성 배열을 전달하세요. useCallback은 의존성 중 하나가 변경된 경우에만 변경된 콜백의 메모이즈된 버전을 반환합니다. 이는 참조 동등성(reference equality)에 의존하여 불필요한 렌더링을 방지하는 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다.

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

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

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>클릭하세요</button>;
}

결론

리액트 훅은 클래스 없이도 상태 및 기타 React 기능을 사용할 수 있는 강력하고 표현력 있는 방법을 제공합니다. 훅을 사용하면 코드를 단순화하고 더 읽기 쉽게 만들며, 상태가 있는 로직의 재사용성을 높일 수 있습니다. 훅을 이해하고 효과적으로 사용하면 강력하고 유지보수 가능한 React 애플리케이션을 작성하는 데 큰 도움이 될 것입니다.

다음시간에 계속…