1) React Hook

리액트 hook함수들에 대해 알아볼 페이지

Intro

리액트는 원래 클래스 기반 컴포넌트에서 생명주기 함수를 사용했습니다. 하지만 클래스 컴포넌트는 문법이 복잡하고, 로직 재사용이 어려웠으며 상태관리도 힘들고, 매번 불필요하지만 필요한 보일러플레이트 코드를 반드시 선언해야 했습니다.

이런 문제점을 해결하기 위해 Hook함수가 등장했습니다. Hook은 함수형 컴포넌트에서도 상태 관리(useState)와 생명주기 제어를 가능하게 해주어, 컴포넌트의 단숨함을 강조할 수 있게 되면서 라이프사이클 함수의 재사용성을 증대 시켰습니다.

Hook의 의미

"hook" 은 원래 무언가를 걸거나 연결하는 도구를 의미합니다. React에서도 컴포넌트의 내부 기능에 "걸어서 연결(hook into)"할 수 있는 함수라는 의미에서 이 이름이 붙었습니다.

즉, 컴포넌트에 기능을 연결해주는 함수들을 hook함수라고 부릅니다.

1. useEffect

• 컴포넌트가 렌더링되거나 값이 변경될 때 특정 작업을 수행할 수 있게 해주는 Hook입니다.

  • 컴포넌트가 처음 렌더링될 때(mount)

  • 의존성 배열 안의 값이 변경 될 때(update)

  • 컴포넌트가 소멸 될 때(unmount)

useEffect(() => {
  console.log("컴포넌트가 마운트되었거나 state가 바뀜");
  return () => {
    console.log("언마운트 혹은 업데이트 이전에 실행됨");
  };
}, [의존성]);

2. useMemo

• useMemo는 리렌더링 시 계산 비용이 큰 작업을 메모이제이션(캐싱) 하여 렌더링 성능을 최적화 하고자 사용합니다.

• 계산 비용이 큰 작업 -> 정렬, 필터링, 복잡한 연산 등

const sorted = useMemo(() => {
  return data.sort((a, b) => a- b); // 길이10000 배열 정렬
}, [data]);

3. useCallback

• useMemo와 마찬가지로 메모이제이션을 통해 렌더링 성능을 최적화 하는데 사용하는 함수로, 함수를 메모이제이션해서, 불필요한 함수 재생성을 방지한다.

  • 함수를 자식 컴포넌트에서 props를 통해 사용하는 경우 함수 재생성시 자식컴포넌트에서 리렌더링이 발생할 수 있다.

• useMemo는값 캐싱, useCallback은 함수 캐싱

const handleClick = useCallback(() => {
  console.log("클릭됨");
}, []);

4. 사용자 정의 Hook함수

• 리액트에서 제공하는 기본 Hook만으로는 복잡한 로직을 여러 컴포넌트에서 재사용하기는 어렵습니다.

• 자주 사용하는 공통로직을 Hook함수와 묶어 함수로 모듈화 하여 재사용성을 높일 수 있습니다.

• Hook함수의이름은 반드시 use로 시작해야합니다.

• 사용자정의 훅 함수 예시

// 사용자 정의 훅 함수
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increase = () => setCount((c) => c + 1);
  return { count, increase };
}

// 사용
function CustomHook() {
  // 사용자 정의 Hook을 호출하여 상태값과 함수 사용
  const { count, increase } = useCounter(); // 초기값은 0

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>Increase</button>
    </div>
  );
}

export default CustomHook;