useMemo란?
component 성능을 최적화 하기 위해 사용한다!
동일한 값을 리턴하는 함수를 반복적으로 호출한다면 맨처음 값을 계산할때 해당 값을 메모리에 저장해 재사용하는 기법이다.
useMemo의 구조!
- 기본적으로 첫번째인자는 callBack함수를 받으며 return값을 반환해준다!
- 두번째 인자인 배열은 의존성 배열로 언제 업데이트 할지를 설정할수 있다.
- 빈배열이라면 맨처음 렌더링 될때 함수가 작동하며 그 때 계산한 값을 사용한다. 위의 사진과 같이 [item] 요소의 값이 업데이트 될때 다시 함수가 작동한다!
계산기로 알아보는 useMemo!
결과화면!
왜일까? 어려운 계산과 쉬운계산 모두 딜레이가 있다.
어려운 계산은 고의로 속도를 지연시키기 위해 큰수를 반복하도록 설정해놓아 딜레이가 생기는 것이 당연하다.
그렇다면 쉬운계산은?
바로 쉬운계산 함수가 작동하면 리렌더링 되기 때문에 자동으로 어려운 계산 다시 실행되기 때문이다!
useMemo를 통해 어려운 계산은 어려운 계산을 사용할 때만 실행해보자!
useMemo를 사용해 실행되는 return값에 실제 실행할 함수를 넣어주고, 2번째 의존성 배열에 hardNumber를 넣어 그 값이 바뀔 때만 함수가 호출되도록 설정한다!
결과는!
어려운 계산기는 hardNumber가 바뀌어야만 실행된다는 사실!!
두번째 예제
1차 결과화면
코드와 결과를 보고 이상한 점을 찾으셨나요??
바로 useEffect부분입니다!. 두번째 인자값으로 의존성 배열 즉 [location]을 할당해 주었습니다.
그런데 location값이 아닌 isNumber의 값이 바뀌어도 호출되는게 보이실겁니다!
바로 그 이유는!
바로 객채 타입 떄문이다!
즉 원시타입은 바로 정보가 할당 되지만 객체타입은 그 값을 가진 주소가 할당 되기 때문이다.
바로 이렇게 말이다!
그렇기 때문에 isNumber의 값이 바뀌면 리렌더링 되고 => 리렌더링 시에 객체 타입의 주소가 새로 할당 되기때문에
프로그램은 location의 값이 바뀌었다고 판단한다 => useEffect가 작동하는 이유!
해결하려면?
useMemo를 사용해보자!
- location에 할당하고 싶은 값을 useMemo를 통해 감싸준다.
- return 을 사용하여 우리가 원하는 객체를 할당한다!
- 두번쨰 인자로 의존성 배열에 iskorea를 할당해 isKorea의 값이 바뀔따 함수가 실행될수 있도록 한다!
결과!!
우리가 원한대로 isKorea값이 바뀔떄만 useEffect가 실행되는 모습을 볼수 있다!!
이 처럼 어떤 값을 메모이징 하고 싶을때 useMemo는 매우 유용할 것이다!!
본 페이지는 유튜브 별코딩님의 영상을 참고 하였습니다.
'REACT' 카테고리의 다른 글
| React! useState와 useEffect를 사용한 아주 아주 간단한 예제! (0) | 2022.11.29 |
|---|---|
| React Hooks 6.useCallback (0) | 2022.11.21 |
| React Hooks 4.useContext (0) | 2022.11.20 |
| React Hooks 3.useRef (0) | 2022.11.19 |
| React Hooks 2.useEffect (0) | 2022.11.17 |