React Hooks 개념과 예제

 

React Hooks는 React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서 상태 관리 및 다른 React의 기능들을 사용할 수 있게 해준다.
이전에는 상태 관리나 생명주기 기능을 사용하기 위해서 클래스형 컴포넌트를 사용해야 했지만, Hooks 의 도입으로 함수형 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었다.
Hooks는 함수형 컴포넌트의 기능을 크게 확장시켰으며, React 개발에 있어서 핵심이다.
HOok은 각 시나리오에 적합하게 설계되어 있어서, 적절히 활용하면 React 개발의 생산성과 성능을 크게 향상시킬 수 있다.

 

주요 Hooks >>

 

useState:
가장 기본적인 Hook. 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해준다.
클래스 컴포넌트에서 this.state 와 this.setState 를 사용하는 것과 유사한 기능을 수행한다.

import React, { useState } from 'react';

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

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

 

useEffect:
useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 하는 Hook이다.
클래스 컴포넌트의 componentDidmount, componentDidUpdate, componentWillUnmount 의 기능을 합쳐놓은 것과같다.

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>
  );
}

 

useContext:
React의 Context API를 더 쉽게 사용할 수 있도록 하는 Hook이다.
Context를 통해 컴포넌트 트리에 걸쳐 데이터를 전달할 수 있다.

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

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

  return <div theme={theme}>Theme is {theme}</div>;
}

 

위 코드 설명:
ThemeContext 라는 이름으로 새로운 Context를 생성한다.
Context는 초기값으로 'light'를 가지고 있다.
Context는 상태나 데이터를 전역적으로 공유하고 관리할 수 있게 해주는데, 이 예제에서는 테마 정보를 공유할 때 사용된다.
Example 함수 컴포넌트를 정의한다 이 컴포넌트에서는 useContext 훅을 사용하여 ThemeContext의 값을 가져온다. theme 변수에는 현재 테마 정보가 저장된다.
마지막으로 JSX를 통해 화면에 현재 테마 정보를 출력한다.

 

useReducer:
복잡한 컴포넌트의 상태 관리를 위해 사용되는 Hook이다.
useState의 대안으로, 주로 상태 로직이 복잡하거나 여러 하위 값에 대한 상태를 관리할 때 유용하다.

import React, { useReducer } from 'react';

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, { count: 0 });

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

 

reducer 함수를 정의한다. 이 함수는 두 개의 인자를 받고, 현재 상태 state와 실행할 액션 action 을 처리한다.
action.type 에 따라 다른 동작을 수행하며, 현재 상태를 변경한 새로운 상태를 반환한다.
Counter 함수 컴포넌트를 정의한다. 이 컴포넌트에서는 useReducer 훅을 사용해서 상태와 디스패치 함수를 생성한다. useReducer의 첫 번째 인자로 reducer 함수를 전달하고, 두 번째 인자로 초기 상태를 전달한다.(count: 0)

 

useCallback:
useCallback은 메모이제이션된 콜백을 반환하는 Hook이다.
(메모이제이션: 함수의 실행 결과를 캐시(cache)하여 동일한 입력값에 대한 연산을 반복해서 수행하지 않고, 이미 계산된 결과를 재사용하는 기술. 특히 계산 비용이 높거나 중복되는 계산을 효율적으로 처리하기 위해 사용되며, 함수 실행의 성능을 향상시키고 코드를 최적화하는 역할을 수행한다.)

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

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

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

  return <button onClick={increment}>Increment</button>;
}

 

useMemo:
useMemo 는 메모이제이션된 값을 반환하는 Hook이다.
복잡한 계산 결과 값을 재사용하고자 할 때 사용한다.

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

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

  const doubleCount = useMemo(() => {
    return count * 2;
  }, [count]);

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

 

useMemo 훅을 사용하여 doubleCount라는 변수를 생성한다.
useMemo는 두 개의 인자를 받는다. 첫 번째 인자는 계산 결과를 반환하는 함수이고, 두 번째 인자는 의존성 배열이다. 여기선 count를 의존성 배열로 사용하고 있으므로, count 값이 변경될 때만 doubleCount가 다시 계산된다.
(이를 통해 계산 비용을 최소화하고 성능을 향상시킬 수 있다)

 

useRef:
변경 가능한 ref 객체를 반환한다.
이 Hook은 DOM에 직접 접근하거나 렌더링 사이에 값을 유지할 때 사용된다.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

 

TextInputWithFocusButton 함수 컴포넌트에서는 inputE1 라는 ref 객체를 생성한다.
(userRef 혹은 초기값으로 null 을 가지고 있으며, 이 ref 객체를 통해 JSX에서 특정 DOM 요소를 참조하고 조작할 수 있다)
onButtonClick 함수는 버튼이 클릭될 때 호출되며, inputE1.current.focus() 코드를 실행하여 inputE1이 참조하는 DOM 요소에 포커스를 설정한다.
("Focus the input" 버튼을 클릭하면 입력란에 포커스가 이동한다)
JSX 부분에서는 <input> 요소를 렌더링하고, ref 속성을 사용하여 이 요소에 inputE1 ref 객체를 연결한다.
(inputE1.current 가 해당 <input> 요소를 가리키게 된다)