useMemo

유관희·2022년 10월 21일
0

→ Open in Slid


useMemo image

useMemo image

useMemo image

useMemo image

useMemo image

useMemo image

useMemo image

useMemo image

useMemo image

‏‏‎ ‎

useMemo image

‏‏‎ ‎

useMemo image

useMemo image

어려운 계산기, 쉬운 계산기 그 어느 것 하나라도 사용을 하면 useState 이기 때문에 다 랜더링이 된다.

따라서 useMemo를 hardSum 에사용하여 콜백 함수로 만든다. 그리고 dependency array 에 hardNumber를 넣어 hardNumber 값이 들어 올때만 hardSum 이 작동하게 만든다.

‏‏‎ ‎

useMemo image

‏‏‎ ‎

useMemo image

‏‏‎ ‎

useMemo image

‏‏‎ ‎

useMemo image

useMemo image

const location = isKorea ? '한국' : '외국' ; 이었을 때는 useEffect 가 dependency array 인 location 에 따라 잘 작동 되었지만 만약 location 값이 객체 일때

‏‏‎ ‎

const location = isKorea ? '한국' : '외국'

const location = {
  country : isKorea ? '한국','외국',
},
  
useEffect(()=>{
  console.log('useEffect 호출');
},[location]);

useMemo image

useMemo image

‏‏‎ ‎

useMemo image

‏‏‎ ‎

useMemo image

위의 location 은 객체 타입이라 주소로서 데이타 위치를 나타내기 때문에

랜더링 할때 마다 주소값이 바뀌어 location 값이 매번 바뀌기 때문에

useEffect 가 작동을 못한다. 따라서 객체일 경우 location 값을 고정시키기

위해서 useMemo를 사용한다.

const location = {
  country : isKorea ? '한국':'외국',
},

const location = useMemp(()=>{
  return {
    country : isKorea ? '한국':'외국',
  };
},[isKorea])  
  

‏‏‎ ‎

‏‏‎ ‎

profile
안녕하세요~

0개의 댓글