useMemo 사용 예시

1. 단일 컴포넌트에서 표시하는 경우

export function Price() {
  const prices = usePrices() // 훅을 호출한다
  if (prices.length === 0) return null

  // 컴포넌트에 표시한다
  return <DefaultPrice prices={prices} />
}

function usePrices() {
  const { someData } = useSomeData() // 다른 훅을 사용해야 하는 경우

  return React.useMemo(() => {
    if (!someData) return [] // 데이터가 없을때 해야하는 것이 있다면 정의한다

    const result = someData
    return result
      .map((some) => ({
        keyA: some.AAA,
        keyB: some.BBB,
      }))
  }, [someData])
}

 

2. 코드를 따로 배치해서 사용하는 경우

 

컴포넌트의 코드

function SomeComponent() {

  const { someData } = useSomeData()
  
  return (
    <textarea>{someData}</textarea>
  )
}

훅의 코드

export function useSomeData = () => {
  const data = useData() // 다른 훅과 연계되어야 하는 부분이 있다면 여기서 호출한다
  const someData = React.useMemo(() => plusData(data), [data])
  return {
    someData
  }
}

 

useCallback의 경우에는 button 의 onClick 과 함께 사용하는 일이 많았다.

 

useMemo 같은 경우에는 컴포넌트에 표시해야 하는 데이터와 함께 사용하는 일이 많다.

 

 

추가로 아래와 같이 useCallback 과 async는 사용해도 되지만

 

useMemo 와 async 는 사용하면 안된다.

 

https://stackoverflow.com/questions/65275188/how-to-use-the-react-hook-usememo-with-asynchronous-functions

How to use the react hook "useMemo" with asynchronous functions?

 

 

 

useCallback(async() => {await some()}, [data]) // 해도 되는 일

useMemo(async() => {await some()}, [data]) // 하면 안됨