React 훅(Hook) 소개

소개

React 훅(Hook)은 함수형 컴포넌트에서 상태 관리, 생명주기 제어, 메모이제이션 등 다양한 기능을 제공하는 기능입니다. 클래스 컴포넌트에서 사용되던 기능들을 함수형 컴포넌트에서도 쉽게 사용할 수 있게 해주는 React의 주요 기능 중 하나입니다. 이번 포스트에서는 React 훅들에 대해 소개하고, 각각의 기능을 활용한 예시를 알아보겠습니다.

useState

useState 훅은 상태(state)를 관리하기 위해 사용됩니다. 상태를 함수 컴포넌트에 추가하고 변경하기 위한 함수를 제공합니다. 다음은 useState 훅의 기본 사용 방법입니다:

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

export default Counter;

위의 예시에서 useState 훅을 사용하여 count 상태와 setCount 함수를 선언하고, 이를 사용하여 상태를 변경하고 렌더링합니다.

useEffect

useEffect 훅은 컴포넌트의 생명주기와 관련된 동작을 수행하기 위해 사용됩니다. 컴포넌트가 렌더링될 때마다 특정 작업을 수행하거나, 상태가 변경될 때마다 특정 동작을 수행하는 데 사용됩니다. 다음은 useEffect 훅의 기본 사용 방법입니다:

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

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

  useEffect(() => {
    console.log('Component rendered');

    return () => {
      console.log('Component unmounted');
    };
  }, []);

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

export default Example;

위의 예시에서 useEffect 훅을 사용하여 컴포넌트의 생명주기와 관련된 동작을 수행합니다.

• 두번째 인자로는 의존성 배열([])을 입력합니다. 배열안에 요소가 변경될때마다 리렌더링이 일어납니다.
• 두 번째 인자로 빈 배열([])을 전달하게 되면 처음 렌더링이 되고 리렌더링이 일어나지 않습니다.

useRef

useRef 훅은 DOM 요소에 접근하거나 컴포넌트의 인스턴스 변수를 저장하기 위해 사용됩니다. useRef 훅을 사용하면 함수형 컴포넌트에서도 DOM 요소나 다른 값에 접근할 수 있습니다. 다음은 useRef 훅의 기본 사용 방법입니다:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
    inputRef.current.value // 현재 input태그 안에 있는값
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

위의 예시에서 useRef 훅을 사용하여 inputRef 변수를 선언하고, input 요소에 해당 변수를 연결합니다.
버튼을 클릭하면 inputRef.current.focus()를 호출하여 input 요소에 포커스가 이동하도록 설정합니다.
또한 inputRef.current.value 로 현재 input태그의 값을 불러올 수 있습니다.

useMemo

useMemo 훅은 계산 비용이 많은 함수의 반환 값을 기억하고, 의존성 배열의 변경 여부에 따라 값을 캐시하는 데 사용됩니다. useMemo 훅을 사용하면 반복적으로 동일한 계산을 수행하지 않고 이전에 계산한 값을 재사용할 수 있습니다. 다음은 useMemo 훅의 기본 사용 방법입니다:

import React, { useMemo } from 'react';

const MyComponent = () => {
  const expensiveResult = useMemo(() => {
    // 계산 비용이 많은 작업 수행
    return someExpensiveComputation();
  }, [dependency1, dependency2]);

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

export default MyComponent;

위의 예시에서 useMemo 훅을 사용하여 expensiveResult 변수를 선언하고, 계산 비용이 많은 작업을 수행하는 함수를 전달합니다.
의존성 배열 [dependency1, dependency2]의 값이 변경될 때만 함수를 호출하고, 이전에 계산한 값을 재사용합니다.

useCallback

useCallback 훅은 콜백 함수를 메모이제이션하는 데 사용됩니다. 컴포넌트가 렌더링될 때마다 새로운 콜백 함수가 생성되는 것을 방지하여 성능을 최적화할 수 있습니다. 다음은 useCallback 훅의 기본 사용 방법입니다:

import React, { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    // 콜백 함수 내용
    doSomething();
  }, [dependency1, dependency2]);

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

export default MyComponent;

위의 예시에서 useCallback 훅을 사용하여 handleClick 변수를 선언하고, 콜백 함수를 전달합니다. 의존성 배열 [dependency1, dependency2]의 값이 변경될 때만 새로운 콜백 함수가 생성됩니다.