[React] 리액트 useMemo 사용법

🎯 useMemo 사용법

const memoizedValue = useMemo(() => computerExpensiveValue(a, b), [a, b])

const App = () => {
    const [firstName, setFirstName] = useState('철수')
    const [lastName, setLastName] = useState('김')

    // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션
    const fullName = useMemo(() => {
        return `${firstName} ${lastName}`
    }, [firstName, lastName])
}

• 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션 하여 재 렌더링 시 불필요한 연산을 줄인다.
• 메모리 어딘가에 기록하기 때문에 성능 하락 이슈를 불러올 수 있다.
• useMemo의 연산은 렌더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하지 않는 것을 권장한다.

 

📕 useMemo를 사용하지 않았을 때

const App = () => {
  const [value, setValue] = useState(1)

  const something = (() => {
        let sum = 0;
        for(let i = 0; i < 999999999; i++) {
            sum += i;
        }
    })()

    return (
        <div>
            <button onClick={() => {
                setValue((current) => {
                    return current + 1;
                })
            }}>
                {value}
            </button>
            <div>{something}</div>
        </div>
    )
}

 

📕 useMemo를 사용했을 때

const App = () => {
  const [value, setValue] = useState(1)

  const something = useMemo(() => {
        let sum = 0;
        for(let i = 0; i < 999999999; i++) {
            sum += i;
        }
        return sum;
    }, []);

    return (
        <div>
            <button onClick={() => {
                setValue((current) => {
                    return current + 1;
                })
            }}>
                {value}
            </button>
            <div>{something}</div>
        </div>
    )
}