React Hooks

Mooby·2023년 4월 27일

개념정리

목록 보기

11/12

1. useState

useState 훅은 컴포넌트 상태 관리를 위해 사용된다. useState 훅을 이용해 상태를 정의하면 해당 상태를 변경할 수 있는 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>
  );
}

위 코드에서 useState 훅을 사용해 count 상태의 초기값을 0으로 설정한다. seCount 함수는 count 상태를 변경할 수 있도록 한다. 버튼 클릭 시 setCount(count + 1)를 호출하여 count 상태를 증가시킨다.

2. useEffect

useEffect 훅은 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행할 작업을 정의할 수 있다. useEffect 훅은 함수형 컴포넌트의 생명주기 메서드를 대체한다.

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

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

  useEffect(() => {
    // 컴포넌트가 마운트(mount) 될 때마다 실행됩니다.
    document.title = `You clicked ${count} times`;
  }, [count]); // count 값이 변경될 때만 실행됩니다.

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

위의 코드에서 useEffect 훅을 사용하여 document.title을 변경한다. count 상태가 변경될 때마다 useEffect가 실행된다.

3. useContext

useContext 훅은 컴포넌트 트리 전체에서 전역으로 사용할 수 있는 데이터를 관리하기 위해 사용된다.

import React, { useContext } from 'react';

const MyContext = React.createContext('defaultValue');

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

function Parent() {
  return (
    <MyContext.Provider value="Hello World">
      <Child />
    </MyContext.Provider>
  );
}

위 코드에서 MyContext 객체를 생성하여 Parent 컴포넌트에서 MyContext.Provider로 전역값을 설정하고 Child 컴포넌트에서 UseContext를 사용하여 MyContext 전역값을 가져온다.

4. useRef

useRef 훅은 DOM 요소에 접근하거나 컴포넌트 내부에서 변경되는 값을 저장하기 위해 사용된다.

import React, { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

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

위의 코드에서 useRef를 사용하여 inputRef 객체를 생성한다. inputRef.current는 input 요소에 대한 참조를 가지고 있다. handClick 함수는 inputRef.current.focus()를 호출하여 input 요소에 포커스를 준다.

5. useMemo

useMemo 훅은 연산이 많은 함수의 반환 값을 캐시하여 성능을 최적화할 수 있다.

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

function calculateSum(a, b) {
  console.log('Calculating sum...');
  return a + b;
}

function Example() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  const sum = useMemo(() => calculateSum(a, b), [a, b]);

  return (
    <div>
      <p>Sum: {sum}</p>
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

위의 코드에서 useMemo를 사용하여 calculateSum 함수의 반환값을 캐시한다. a나 b의 상태가 변경될 때마다 calcultateSum 함수가 실행되고 useMemp를 사용함으로써 불필요한 연산을 줄일 수 있다.

6. useCallback

useCallback 훅은 컴포넌트 내에 선언된 함수를 메모이제이션한다. 메모지에이션이란 함수 실행 결과를 캐시해두고 같은 인자로 호출될 경우 이전 결과를 재사용하는 최적화 기법이다. 이를 통해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있다.

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

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

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

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

위의 코드에서 useCallback을 사용하여 increment 함수를 메모이제이션한다. increment 함수는 count 상태가 변경될 때마다 새로 생성된다. useCallback을 사용함으로써 increment 함수가 변경되지 않도록 할 수 있다.

7. useReducer

useReducer 훅은 상태 관리를 위한 또 다른 옵션으로, 컴포넌트의 상태를 더 복잡한 로직으로 업데이트해야 하는 경우 유용하다.

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 Example() {
  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>
  );
}