우리 모두 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!