‼️일단 알고 진행해야하는 개념
메모이제이션
메모이제이션이란 계산된 값을 자료구조에 저장하고
이후 같은 계산을 반복하지 않고 이전에 계산한 값을 자료구조에서 꺼내 재사용하는 것을 말한다
useMemo
1. 사용 형태
자주쓰이는 값을 메모이제이션 해줌
const value = useMemo(()=>{
// 메모이제이션해줄 값 ( 함수 또는 값 )
}, [ 의존성 배열 ] )
의존성 배열 안의 값이 업데이트 될때만
메모이제이션해줄 값를 다시 호출해서 메모이제이션 된 값을 반환하거나
업데이트시켜야한다면 업데이트 된 값을 메모이제이션 하여 값을 반환한다.
의존성 배열이 빈 배열이면 처음 mount될때만 실행
( vue의 computed와 비슷하다고 느껴짐, 메모이제이션이 되는줄은 모르겠지만.. )
2. 무분별하게 사용하지 않아야함
값을 재활용하기위해 따로 메모리를 소비해서 저장하기 때문에
무분별하게 쓰면 성능에 무리가 갈 수 있다.
불필요하는 곳에는 사용하지 않고 꼭 필요할때만 사용해야 한다.
3. 참조형 자료의 변화를 감지하는 경우 사용
3-1 useEffect 사용
// 1. useEffect 사용
const [isname, setIsName] = useState(true)
const [change, setChange] = useState(0)
const getName = {
name: isname ? '있음' : '없음'
}
useEffect(()=>{
console.log('useEffect!')
},[getName])
// 다음 부분을 실행할 경우
setChange(change + 1)
의도와는 다르게 console에 'useEffect!' 두번 찍힘
1. 'useEffect!'가 첫 mount시 호출
2. setChange(change + 1) 실행
3. useEffect는 getName만 의존성 배열에 들어있어서 렌더링시 실행되지 않을거라고 생각하지만
4. getName이 변경되지 않았는데도 'useEffect!'가 또 다시 호출
이유 : 참조형 자료형인 Object의 값이 변경되는거라서
그렇다면 위의 문제를 해결하기 위해
Object를 useMemo안에 넣어서 사용해보자.
3-2 useMemo 사용
// 2. useMemo 사용
const [isname, setIsName] = useState(true)
const [change, setChange] = useState(0)
const getName = useMemo(() => {
return {
name: isname ? '있음' : '없음'
}
},[isname])
useEffect(()=>{
console.log('useEffect!')
},[getName])
// 다음 부분을 실행할 경우
setChange(change + 1)
의도하던대로 console에 'useEffect!' 한번 찍힘
1. 'useEffect!'가 첫 mount시 호출
2. setChange(change + 1) 실행
3. useEffect의 의존성 배열에 들어가 있는
getName의 useMemo의 의존성 배열에는 isName이 들어가 있는데,
isName이 변경되지 않았으므로 getName은 메모이제이션 된 값을 그대로 반환받음
결론 : useMemo에 의해 getName은 변경되지 않아 useEffect도 실행되지 않음
✔️ 참고
https://www.youtube.com/watch?v=e-CnI8Q5RY4&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=6