Use memo

Memo= memoization 을 뜻함
동일한 값을 리턴 하는 함수를 반복적으로 호출해야 한다면 맨처음 값을 계산할 때 해당값을 메모리에 저장해서 필여할때 마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다!
간단하게
자주 필요한 값을 맨처음 계산할때 캐싱을 해두어서 그 값이 필요할때마다 다시 계산하는것이 아니라 캐싱에서 꺼내서 사용하는것이다

==
원시타입과 객체타입

원시타입은
변수는 어떠한 값을 넣어두는 상자이다
어떠한 값을 변수에 넣으면 상자에 들어간다

==
하지만 객체타입은 너무 크기 때문에 바로 상자로 들어가는것이아니라

어떤 메모리상에 공간이 할당되어서 메모리안에 보관이 되고 변수안에는 그객체가 담긴
메모리의 주소가 할당이 된다

const location = isKorea ? ‘한국’ : ‘외국’

Const [isKorea, setIsKorea] = useState(true)

useEffect(() => {
 Console.log(‘ useEffect 호출’)
}, [location]) 

이상태에서는 location이 변동 될 떄만 useEffect가 호출이 되지만 만약 location이

Const location =  {
Country: isKorea ? ‘한국’ : ‘외국’
}

객체형태라면 렌더링 될때마다 호출이 된다 / 객체는 메모리 주소를 참조하여서 렌더링 될때마다 다 다른 location 주소값을 가지게 된다

이걸 방지하기 위해서 usememo 를 사용한다

Const location = useMemo (() => {
Return {
 Country: isKorea ? ‘한국’ : ‘외국’
}
}, [isKorea])

객체일 경우 이렇게 usememo 훅을 사용한다

정리 -
렌더링시, 함수 내부 변수는 초기화가 된다. 그리고 함수는 객체다.
초기화가 된다는건 새로운 객체가 다시 만들어지고, 메모리 주소도 새로 생성 된다.
그 말은, 렌더링 전 변수와, 렌더링 후 변수가 다르다. {A} === {A} // FALSE
이렇게 되면, useEffect에서 의존성 배열은, 객체 구분을 하지 못하고, 렌더링이 계속 일어난다. 그렇기에 usememo를 사용한다