[React] Hook의 이해-2 (useMemo, useCallback, useRef)

오늘은 저번에 이어 React Hook 소개를 이어서 하겠습니다.

첫번째 Hook에 대한 소개는 다음 글에 있습니다.

[React] Hook의 이해-1 (useState, useEffect)

[React] Hook의 이해-1 (useState, useEffect)

 

1. useMemo

useMemo는 어떤 값들이 바뀔때만 값을 재계산해주는 hook입니다.

const cachedValue = useMemo(calculateValue, dependencies)

쉽게 설명을 드려보자면 위 함수에서 dependency가 바뀔때 calculateValue를 계산합니다.

import {useMemo, useState} from "react";

export default function Test8() {
  const [string, setString] = useState('string');

  const value = useMemo(() => {
    console.log('re calculate value');
    return string;
  }, [string]);

  console.log('memoization value', value);

  return (
    <div>
      <div>
        {string}
      </div>
      <button onClick={() => setString(prevState => prevState + 'string')}>
        append string value to existing value
      </button>
      <button onClick={() => setString('')}>
        reset value
      </button>
    </div>
  )
}

위 코드에서 첫번째(초기 세팅)로 값을 'string'으로 세팅하고 string값이 변경될때마다 계산을 다시 하는 콘솔을 보실수 있습니다.

(여기서 반투명한 글씨는 react strict mode에서 렌더링을 두번하기 때문인데 이 부분은 추후에 글을 써서 설명을 드리겠습니다.)

 

위와 같이 단순한 계산일때는 usememo를 굳이 사용하지 않을수도 있지만 복잡한 계산이 필요할수록 사용하는것이 페이지의 속도향상에 도움이 됩니다.

(그러나 deps를 잘못 세팅할 경우 값이 생각한대로 업데이트가 되지 않아 예상치 못한 버그를 일으킬수 있으니 주의하셔야합니다.)

 

2. useCallback

useCallback은 useMemo와 비슷하지만 값이 아닌 함수를 저장하는 hook입니다.

const cachedFn = useCallback(fn, dependencies)

useCallback은 useMemo와 비슷하기 때문에 예시는 스킵하도록 하겠습니다.

 

3. useRef

useRef는 값이 변경되더라도 rendering하지 않는 값을 저장하는 hook입니다.

const ref = useRef(initialValue)

좀 더 자세히 설명을 드려보자면 useState는 값의 변경이 일어날때 re-rendering을 합니다.

import {useState} from "react";

export default function Test9() {
  const [string, setString] = useState('string');

  console.log('render', string)

  return (
    <div>
      <div>
        {string}
      </div>
      <button onClick={() => setString(prevState => prevState + 'string')}>
        append string value to existing value
      </button>
      <button onClick={() => setString('')}>
        reset value
      </button>
    </div>
  )
}

위 코드를 보시면 string이 변경될때마다 rendering을 해주는 모습을 보실수 있습니다.

그러나 useRef로 바꾼다면..?

import {useRef, useState} from "react";

export default function Test9() {
  const string = useRef('string');

  console.log('render', string.current)

  return (
    <div>
      <div>
        {string.current}
      </div>
      <button onClick={() => { string.current = string.current + 'string' }}>
        append string value to existing value
      </button>
      <button onClick={() => { string.current = '' }}>
        reset value
      </button>
    </div>
  )
}

열심히 append 버튼을 눌렀는데 rendering을 하지 않습니다...

그러면 정말로 값의 변화가 없는것일까요?

한번 살펴보겠습니다.

import {useRef, useState} from "react";

export default function Test9() {
  const string = useRef('string');

  console.log('render', string.current)

  return (
    <div>
      <div>
        {string.current}
      </div>
      <button onClick={() => {
        string.current = string.current + 'string'
        console.log('onclick', string.current)
      }}>
        append string value to existing value
      </button>
      <button onClick={() => { string.current = '' }}>
        reset value
      </button>
    </div>
  )
}

onClick함수안에서 직접 콘솔을 찍어보면 변화가 있는 모습을 보실수 있습니다.

위와 같이 useRef함수에 저장된 값은 변경되더라도 re-rendering을 하지 않기 때문에 버그를 일으키기 쉽습니다 ㅠㅠ

(조심히 사용하셔야 합니다)

예시를 들자면 Dom을 조작할때 정도일것 같네요.

혹은 flag값이나 값이 변경될때 re-rendering되지 않아야 되는 값이 있을것 같습니다.

 

오늘은 useMemo, useCallback, useRef에 대해 알아봤습니다.

열심히 공부하셔서 적절한 곳에 잘 사용하시길 바랍니다.

긴 글 봐주셔서 감사합니다.