useMemo, useCallback, custom hooks

리액트에는 많은 훅이 있다. 훅은 상태 라이브러리에서 상태 및 기능을 이용하도록 해주는 라이브러리이다. 지금 까지 useState, useEffect, useRef등 여러가지 훅을 사용해보았다. 이번에 새로운 2개의 훅과 내가 직접 훅을 만들어 사용하는 custom hook에 대해서 알아보자.

useMemo

useMemo는 특정 값을 저장해두었다가 다시 사용하고 싶을 때 사용하는 리액트 훅이다. 리액트는 컴포넌트가 리랜더링 될 때에 그 안에 있는 함수들을 다시 계산하여 호출해준다. 이 때 함수들이 시간이 오래 걸린다면 랜더링 시간 자체가 오래 걸릴 수도 있다. 이 때 useMemo를 이용해 함수의 값을 저장해주면 그 함수에 입력되는 매개변수가 바뀌지 않는 한 저장된 함수의 값을 꺼내와 사용할 수 있다. 메모이세이션이라고 하는 방식을 사용하는 라이브러리이다.

메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 위키피디아

import useMemo from 'react'

function Component({매개변수}){

const 저장할 값 = useMemo(() => 함수(넘겨줄 값), [매개변수])

return (
	...

)
}

이 컴포넌트가 리랜더링 될 때에 매개변수의 값이 변하지 않는다면, 저장할 값을 다시 계산하지 않는다. 대신 저장되어있는 이전에 계산 한 값을 가져와 사용한다.

useCallback

useCallback은 useMemo와 마찬가지로 어떤 것을 메모이제이션 기법으로 저장하는 것인데, useMemo는 값을 저장해두지만 useCallback은 함수를 저장한다. 사실 함수가 저장된다고 해도 리랜더링 시에 실행되야 되는 것은 마찬가지지만, 함수는 객체의 일종이기 때문에 그냥 일반적으로 함수를 선언해서 사용하면 리랜더링 시에 주소값이 계속해서 변하지만, useCallback을 이용하면 함수의 주소값이 그대로여서 비교연산자를 사용하기에 유용한다.

import useCallback from 'react'

function Component({매개변수}){

const 저장할 값 = useCallback((넘겨줄 값)=>함수, [매개변수])

return (
	...

)
}

이것은 useMemo와 다르게 함수를 저장해주는 것이므로 (넘겨줄 값)=>함수 부분 전체를 저장하는 것이다.

custom hooks

리액트에는 다양한 훅이 존재하지만 내가 직접 훅을 만들어 사용할 수 있다. 리액트에서 중복되는 코드를 따로 훅으로 저장해 필요할 때에 불러와 사용하는 방법이다. 이를 사용하면 코드가 간결해진다.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  /* useState를 이용하여 data, isPending, error를 정의하세요. */
  const [blogs, setBlogs] = useState(null);
  const [isPending, setIsPending] = useState(true);
  const [error, setError] = useState(null);
  /* useFetch 안의 중심 로직을 작성해주세요. */
  useEffect(() => {
    setTimeout(() => {
      fetch(url)
      .then(res => {
        if (!res.ok) {
          throw Error('could not fetch the data for that resource');
        } 
        return res.json();
      })
      .then(data => {
        setIsPending(false);
        setBlogs(data);
        setError(null);
      })
      .catch(err => {
        setIsPending(false);
        setError(err.message);
      })
    }, 1000);
  }, [])
  /* return 문을 작성해주세요. */
  return [blogs, isPending, error]
}

 
export default useFetch;

이것은 과제 도중 내가 만든 어떤 url의 값을 가져오는 커스텀 훅이다. 이처럼 입력되는 값과 리턴될 값을 정해준 뒤

const [blogs, isPending, error] = useFetch('http://localhost:3001/blogs/')

변수에 값을 저장해 사용하면 된다.

마치며..

이번 게시물에는 새로 배운 리액트 훅에 대해 정리를 해보았다. 처음 사용하는 것이라 완벽히 사용할 수도 없고, 게시물 정리 자체도 잘하지는 못한 것 같지만, 꾸준히 사용하다보면 언젠가 완벽히 사용할 수 있는 날이 오지 않을 까?