REACT 훅(Hook)

훅(Hook)이란?

▶ 리액트의 훅(Hook)은 함수형 컴포넌트에서 상태(state)와 다른 리액트 기능들을 사용할 수 있게 해주는 특별한 함수입니다.
쉽게 말해, 훅은 클래스 컴포넌트를 사용하지 않고도 함수형 컴포넌트에서 리액트의 주요 기능을 활용할 수 있도록 만들어진 함수로, 훅을 사용하면 함수형 컴포넌트에서도 상태 관리, 생명주기 메서드, 컨텍스트 등을 쉽게 사용할 수 있습니다.

훅(Hook)의 종류

1. useState

▶ useState는 컴포넌트 안에서 상태를 선언하고 관리할 수 있게 해주는 함수로,
이 훅을 사용하면 상태 값과 그 값을 변경하는 함수를 얻을 수 있습니다.

import React, { useState } from 'react';

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

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

• useState 사용: useState는 상태 변수를 선언합니다. 위의 예시에서는 count라는 상태 변수를 만들었고, 초기값은 0으로 설정했습니다.
• 상태 업데이트 함수: setCount는 count를 업데이트하는 함수입니다. 버튼을 클릭할 때마다 setCount를 호출하여 count를 1씩 증가시킵니다.
• 컴포넌트 렌더링: 현재 count 값을 보여주는 p 태그와 버튼이 있습니다. 버튼을 클릭하면 count 값이 증가하고 컴포넌트가 다시 렌더링됩니다.

2. useEffect

▶ useEffect는 컴포넌트가 화면에 렌더링될 때와 업데이트될 때 실행되는 부수 효과(side effects)를 처리하는 함수로 데이터를 가져오거나 타이머를 설정하는 등의 작업을 할 때 주로 사용합니다.

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

function Message() {
  const [message, setMessage] = useState('Hello!');

  useEffect(() => {
    setTimeout(() => {
      setMessage('Goodbye!');
    }, 3000);
  }, []);

  return <p>{message}</p>;
}

export default Message;

• useEffect 사용: useEffect는 컴포넌트가 렌더링된 후 3초 후에 메시지를 변경합니다.
• 타이머 설정: setTimeout을 사용하여 3초 후에 message 상태를 업데이트합니다.
• 종속성 배열: 빈 배열 []을 두 번째 인자로 전달하여, 컴포넌트가 처음 렌더링될 때 한 번만 이 효과가 실행되도록 합니다.

3. useContext

▶ useContext는 컴포넌트 간에 전역적으로 데이터를 공유할 때 사용되는 함수로 주로 여러 컴포넌트가 동일한 데이터를 필요로 할 때 유용합니다.

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

const ColorContext = createContext('blue');

function ColorDisplay() {
  const color = useContext(ColorContext); // 현재 색상 값을 가져옵니다.
  return <p style=>This text is {color}.</p>;
}

function App() {
  return (
    <ColorContext.Provider value="red"> {/* ColorContext의 값을 'red'로 설정 */}
      <ColorDisplay />
    </ColorContext.Provider>
  );
}

export default App;

• createContext 사용: ColorContext는 기본값으로 ‘blue’를 갖는 컨텍스트를 생성합니다.
• useContext 사용: ColorDisplay 컴포넌트는 ColorContext의 현재 값을 가져와 텍스트 색상을 설정합니다.
• Context.Provider 사용: App 컴포넌트는 ColorContext.Provider를 사용하여 ColorDisplay에게 ‘red’ 색상을 제공합니다.

4. useReducer

▶ useReducer는 상태 관리 로직이 복잡할 때 사용하는 함수로 상태와 함께 상태를 변경하는 로직을 분리하여 관리할 수 있습니다.

import React, { useReducer } from 'react';

const initialState = 0;

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

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

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

export default Counter;

• useReducer 사용: useReducer는 상태와 상태를 변경하는 로직을 관리합니다. reducer 함수는 상태 변경 로직을 정의합니다.
• 상태와 디스패치 함수: useReducer는 현재 상태와 dispatch 함수를 반환합니다. dispatch 함수를 사용하여 액션을 보냅니다.
• 액션 디스패치: 버튼 클릭 시 dispatch를 호출하여 ‘increment’ 또는 ‘decrement’ 액션을 보냅니다. reducer 함수는 이 액션에 따라 상태를 업데이트합니다.

5. useMemo와 useCallback

▶ 이 두 훅은 성능 최적화를 위해 사용되는 함수로
useMemo는 값이 바뀌었을 때만 연산을 다시 수행하여 성능을 최적화하고, useCallback은 불필요한 렌더링을 방지합니다.

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

function ExpensiveCalculation({ number }) {
  const calculate = useMemo(() => {
    return number * 2; // 간단한 계산으로 대체
  }, [number]);

  return <p>Result: {calculate}</p>;
}

function App() {
  const [number, setNumber] = useState(1);

  return (
    <div>
      <ExpensiveCalculation number={number} />
      <button onClick={() => setNumber(number + 1)}>Increment</button>
    </div>
  );
}

export default App;

• useMemo 사용: useMemo는 number가 변경될 때만 계산을 다시 수행합니다. 이는 불필요한 계산을 피하여 성능을 최적화합니다.
• 간단한 계산: useMemo를 사용하여 number의 두 배 값을 계산합니다.
• 컴포넌트 렌더링: ExpensiveCalculation 컴포넌트는 number의 두 배 값을 보여주고, App 컴포넌트는 버튼을 클릭할 때 number 값을 증가시킵니다.

이렇게 오늘은 리액트의 훅(Hook)에 대해 알아봤는데요,
오늘 정리한 내용도 면접을 준비할 때 나올 수 있는 질문인만큼 미리미리 숙지해서 알아두면 좋을 것 같네요.
그럼 다음엔 또 다른 면접 정보들을 가져와보도록 하겠습니다 😁!