useCallback VS useMemo

우리 모두 React.useCallback과 React.useMemo를 사용하는 방법을 알고 있지만 때로는 어떤 것을 선택해야 할지 혼란스러울 때가 있습니다.

여기에서는 특정 상황에서 어떤 후크 기능을 사용해야 하는지 이해하는 데 도움이 되는 몇 가지 사례를 보여 드리겠습니다.

import React, { useState } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)

  return <div>{num1 + num2}</div>
}

위의 간단한 예에서는 HTML 요소 부분에서 num1 + num2로 합계를 구할 수 있지만 좀 더 복잡한 계산 로직이 있는 경우에는 더 이상 그렇게 하면 안 됩니다.

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

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)

  const sum = useMemo(() => {
    const _num1 = Number(num1),
      _num2 = Number(num2)
    if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
      return "check your num's type"
    }
    return _num1 + _num2
  }, [num1, num2])

  return <div>{sum}</div>
}

이 예제 코드 블록에서는 num1 + num2의 결과 값을 유지하기 위해 useMemo를 선택했지만 num1 또는 num2의 유형이 숫자일 것이라고 완전히 신뢰할 수 없기 때문에 몇 가지 유형 확인 논리를 추가합니다. 잘못되면 자리 표시자 텍스트가 표시됩니다.

이런 상황에서는 HTML 부분에서는 한 줄의 간단한 코드로는 이 효과를 구현할 수 없습니다. 물론 조건부 연산자를 사용하여 HTML 부분에 일부 논리 코드를 작성할 수 있지만(JSX에서는 이를 수행할 수 있음) 비용으로 인해 코드의 가독성이 희생됩니다.

그러므로 이 경우에는 useMemo가 좋은 선택입니다.

자, 한 가지 더 복잡한 사례를 살펴보겠습니다.

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

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sum1 = useMemo(() => {
    const _num1 = Number(num1),
      _num2 = Number(num2)
    if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
      return "check your num's type"
    }
    return _num1 + _num2
  }, [num1, num2])

  return (
    <>
      <div>{sum1}</div>
      <div>{num3 + num4}</div>
    </>
  )
}

보시다시피 여기에는 그 합을 렌더링하는 num3과 num4가 있습니다. num1 + num2의 논리도 재사용하려면 어떻게 해야 합니까? 물론 useMemo를 사용하여 하나의 sum2를 정의할 수 있지만 num 유형의 유효성을 검사하기 위해 논리를 재사용하는 것은 좋은 생각이 아닙니다. 따라서 useMemo에서 유효성 검사 로직을 분리해야 합니다. 그러면 useCallback이 뜹니다!

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

const validteNumAndSum = (number1, number2) => {
  const _num1 = Number(number1),
    _num2 = Number(number2)
  if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
    return "check your num's type"
  }
  return _num1 + _num2
}

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sumFunc = useCallback(validteNumAndSum, [])

  return (
    <>
      <div>{sumFunc(num1, num2)}</div>
      <div>{sumFunc(num3, num4)}</div>
    </>
  )
}

보시다시피 useCallback을 사용하여 num 유형의 유효성을 검사하고 합계를 계산하는 논리로 새 함수를 반환하고 HTML 부분에서 이 validteNumAndSum 함수를 쉽게 재사용합니다.

자, 결론 부분으로 가보겠습니다:

계산을 쉽게 할 수 있다면(수학이나 더 복잡한 상황) useMemo와 useCallback은 둘 다 필요하지 않습니다.

계산 논리가 복잡하고 한 번만 계산해야 하는 경우 useMemo 후크를 선택하여 계산 프로세스를 패키지하고 하나의 간단한 결과를 반환할 수 있습니다.

그러나 동일한 로직을 두 번 이상 사용하려는 경우 useCallback을 선택하여 기억된 함수를 반환하고 구성 요소에서 재사용할 수 있습니다.

---

useCallback 케이스에 대해 너무 죄송합니다. 언제 useCallback을 선택해야 하는지 설명하는 실수를 하여 나쁜 예시 사례를 만들었습니다.

여기서 다시 시도해 보겠습니다.

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

export default function App() {
  const [base, setBase] = useState(0)
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sumFunc = useCallback(
    (number1, number2) => {
      const _num1 = Number(number1),
        _num2 = Number(number2)
      if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
        return "check your num's type"
      }
      return _num1 + _num2 + base
    },
    [base],
  )

  return (
    <>
      <input
        type="number"
        value={base}
        onChange={e => {
          setBase(Number(e.target.value))
        }}
      />
      <div>{sumFunc(num1, num2)}</div>
      <div>{sumFunc(num3, num4)}</div>
    </>
  )
}

위 코드에서는 하나의 기본 숫자를 또 다른 변수 데이터로 추가하고 모든 합계는 기본 값과 함께 추가되어야 하며 기본 값을 변경하는 입력이 있으므로 시간 기준이 변경될 때마다 sumFunc는 수정하면 이를 사용하여 올바른 결과를 계산할 수 있습니다.

그래서 useCallback에 대한 결론을 업데이트하겠습니다. 일부 로직만 재사용해야 하는 경우 이 로직을 함수로 패키징하고 구성 요소에서 유틸리티 함수로 분할하여 어디에서나 재사용할 수도 있습니다. 그리고 로직이 여전히 구성 요소의 일부 변수에 의존하는 경우 useCallback을 사용하여 로직을 패키징하고 기억된 새 함수를 반환할 수 있습니다.

위 내용은 useCallback VS useMemo의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!