React Hook

 

useState

함수형  컴포넌트에서 상태(State)를 관리할 때 사용됩니다.

useState 함수는 하나의 인자를 받으며, 해당 인자는 초기 상태(initial state)를 나타냅니다. useState 함수는 배열을 반환하며, 첫 번째 요소는 현재 상태(current state)를, 두 번째 요소는 상태를 업데이트할 수 있는 함수(setState 함수)를 반환합니다.

setState 함수는 인자로 새로운 상태를 받아 해당 상태로 업데이트합니다. 이때, 상태가 객체나 배열일 경우, 이전 상태를 복사하고 새로운 상태를 덮어씌워 업데이트합니다.

import React, { useState } from 'react';

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

  function handleIncrement() {
    setCount(count + 1);
  }

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

 

 

 

useEffect

함수형 컴포넌트에서 side effect(부수효과)를 수행하거나, 컴포넌트의 생명주기와 관련된 작업을 수행할 때 사용됩니다.

side effect란, 컴포넌트 외부에 영향을 주는 작업으로, API 호출, DOM 조작, 타이머 설정 등이 있습니다. 이러한 작업은 보통 컴포넌트가 렌더링될 때마다 수행되는 것이 아니라, 특정 조건이나 시점에 따라 수행됩니다.

useEffect(() => {
  // side effect 작업 수행
  // 반환값이 있다면 cleanup 함수
}, [deps]);

 

첫 번째 인자로는 side effect 작업을 수행하는 콜백 함수를 전달하고, 두 번째 인자로는 의존성 배열(deps)을 전달합니다. deps 배열에는 useEffect 내부에서 참조하는 모든 변수나 함수를 넣어줘야 합니다. deps 배열에 포함된 값이 변경될 때마다 useEffect가 다시 호출됩니다.

두 번째 인자는 생략 가능하며, 생략된 경우에는 useEffect 내에서 참조하는 모든 state나 props 값이 deps 배열에 포함됩니다. 그리고 deps 배열을 빈 배열([])로 전달하면, useEffect가 최초 렌더링시에만 호출되고, 컴포넌트가 unmount될 때 cleanup 함수를 호출합니다.

 

 

 

 

*컴포넌트가 업데이트되거나 마운트될 때 특정 작업을 수행할 수 있습니다.

 

 

 

 

 

useContext

컴포넌트간에 데이터를 공유하기 위한 방법중에 하나입니다.

컴포넌트 계층 구조에서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해서는 props를 사용해야합니다.

하지만 컴포넌트 계층 구조가 복잡해지면, 상위 컴포넌트에서 하위 컴포넌트로 props를 계속해서 전달하는 것은 코드가 복잡해지고 번거로운 작업이 될 수 있습니다.

 

useContext를  사용하면 상위컴포넌트에서 하위 컴포넌트로 데이터를 쉽게 전달 할 수 있습니다.

 

 

1. React.createContext() 함수를 사용하여 Context 객체를 생성합니다.
2. 생성된 Context 객체를 상위 컴포넌트에서 Provider로 감싸서 하위 컴포넌트에서 사용할 수 있도록 합니다.
3. 하위 컴포넌트에서 useContext Hook을 사용하여 Context 객체를 참조합니다.
4. 상위 컴포넌트에서 생성한 데이터를 Provider를 통해 Context 객체에 전달합니다.
5. 하위 컴포넌트에서 useContext Hook을 사용하여 Context 객체에서 데이터를 가져옵니다.

 

 공식문서 :  https://legacy.reactjs.org/docs/hooks-reference.html#usecontext

 

 

 

 

useMemo

useMemo는 함수형 컴포넌트에서 연산량이 많은 함수의 결과 값을 저장하고, 필요할 때 재사용할 수 있도록 도와줍니다.

useMemo를 통해 랜더링 성능을 최적화 할 수 있습니다.

 

useMemo가 사용되는 경우

계산량이 많은 함수의 결과 값을 캐싱할때

랜더링 성능이 느린 컴포넌트에서 복잡한 연산을 최적화할 때

props가 변경되어도 결과 값이 변경되지 않을때

 

useMemo는 두 가지 인자를 받습니다. 첫 번째 인자는 연산을 수행하는 함수를 전달합니다.

두 번째 인자는 deps 배열로, useMemo 내부에서 참조하는 모든 변수나 함수를 넣어줘야 합니다.

useMemo는 함수 내부의 계산 결과 값을 저장하고, deps 배열에 포함된 값이 변경되지 않으면 이전에 계산한 결과 값을 반환합니다. 이렇게 되면, 계산량이 많은 함수를 매번 실행하는 것이 아니라 이전에 계산한 값을 재사용하여 성능을 개선할 수 있습니다.

 

 

<예시코드>

const sum = useMemo(() => {
  let total = 0;
  for (let i = 0; i < array.length; i++) {
    total += array[i];
  }
  return total;
}, [array]);

위 코드에서 useMemo 함수는 array 배열이 변경될 때마다 합계를 계산합니다. 만약 array 배열이 변경되지 않으면, 이전에 계산한 결과 값을 반환합니다. 이렇게 useMemo를 사용하면, 렌더링 성능을 최적화할 수 있습니다.