어려운 계산기, 쉬운 계산기 그 어느 것 하나라도 사용을 하면 useState 이기 때문에 다 랜더링이 된다.
따라서 useMemo를 hardSum 에사용하여 콜백 함수로 만든다. 그리고 dependency array 에 hardNumber를 넣어 hardNumber 값이 들어 올때만 hardSum 이 작동하게 만든다.
const location = isKorea ? '한국' : '외국' ; 이었을 때는 useEffect 가 dependency array 인 location 에 따라 잘 작동 되었지만 만약 location 값이 객체 일때
const location = isKorea ? '한국' : '외국'
const location = {
country : isKorea ? '한국','외국',
},
useEffect(()=>{
console.log('useEffect 호출');
},[location]);
위의 location 은 객체 타입이라 주소로서 데이타 위치를 나타내기 때문에
랜더링 할때 마다 주소값이 바뀌어 location 값이 매번 바뀌기 때문에
useEffect 가 작동을 못한다. 따라서 객체일 경우 location 값을 고정시키기
위해서 useMemo를 사용한다.
const location = {
country : isKorea ? '한국':'외국',
},
const location = useMemp(()=>{
return {
country : isKorea ? '한국':'외국',
};
},[isKorea])