이번 편에서는 퍼포먼스 최적화와 가독성에 도움을 주는 useMemo를 알아보겠습니다.

useMemo

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

const User = () => {
  const [nickname, setNickname] = useState('')
  const [nicknameLength, setNicknameLength] = useState(0)

  const updateNicknameLength = () => {
    setNicknameLength(nickname.length)
  }
  useEffect(updateNicknameLength, [nickname])

  const updateNickname = event => {
    const nickname = event.target.value

    setNickname(nickname)
  }

  return (
    <div>
      <input onChange={updateNickname} />
      <label>{nicknameLength}</label>
    </div>
  )
}

nickname을 변경하면 그것을 자동으로 nicknameLength를 업데이트하는 컴포넌트입니다.

이와 비슷한 형태로 작성하는 경우는 꽤 많지만, 기능에 비해서 코드가 번잡한 느낌입니다. useEffect는 업데이트가 끝난 이후에 작동하기 때문에 한 번 더 업데이트를 한다는 이슈도 있으므로 퍼포먼스가 중요하다면 더 나은 방법이 필요합니다.

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

const User = () => {
  const [nickname, setNickname] = useState('')
  const nicknameLength = useMemo(() => nickname.length, [nickname])

  const updateNickname = event => {
    const nickname = event.target.value

    setNickname(nickname)
  }

  return (
    <div>
      <input onChange={updateNickname} />
      <label>{nicknameLength}</label>
    </div>
  )
}

useMemo 함수를 사용하면 깔끔하게 작성할 수 있습니다.

useEffect처럼 2번째 파라미터에 전달한 배열이 이전의 배열과 다르면 1번쨰 파라미터가 발동하며, useState와는 다르게 해당 State를 변경하는 함수를 제공하지 않습니다.

• 2번째 파라미터를 전달하지 않으면 State가 바뀔 때 마다 1번째 파라미터로 전달한 함수를 항상 실행하기 때문에 주의해야 합니다.