React] Hook : useMemo

useMemo

개발을 하다 보면, 리렌더링 될 때마다 전체가 동작하기 때문에 불필요한 부분도 계속 실행됩니다.

변수 값이 동일하거나 리렌더링 될 때마다 실행되면 메모리 낭비가 될 수 있으니,

Hook을 사용하여 메모리에 값을 저장해 놓고, 필요할 때만 갱신할 수 있도록 합니다.

const 변수 = useMemo(()⇒{}), [deps]);

 

deps에 의존성을 부여하여 해당 값이 변할 때 호출하게 됩니다.

이전에 사용했던 useEffect와 동일합니다.

 

 

---

 

 

예

 

바닥에서 찍은 memo는 input태그 값이 변경될 때마다 찍히는 것을 확인할 수 있고,

useMemo안에 있는데 test는 버튼을 누를 때, setClick으로 인해 click값이 변경될 때만 찍히는 것을 확인할 수 있습니다.

 

useMemo로 전달된 함수는 렌더링 중에 실행되는 것이며, 통상적으로 렌더링 중에는 하지 않는 것들은 함수 내에 작성하지 말아야 됩니다.
예를 들면, side-effect는 useEffect에서 진행해야 되는 것이지 useMemo에서 하는 게 아닙니다.

 

 

---

 

 

리렌더링 되면서 계속 초기화되기 때문에 useMemo로 값을 정해놓고, 의존성을 부여하여 데이터를 최신화합니다.