React. UseMemo, useCallback, React.Memo

오랜만에 리액트 정리하다가 프로젝트를 보는데 급하게 썼던 Hook들이 있어서 간단하게 글로만 정리를 하려 한다. 예시는 및에 참고글을 보면 좋을 거 같다. 일단 3개다 최적화를 위해서 사용된다. 

useMemo같은 경우 값을 저장했다가 다시 연산하지 않고 저장한 값을 쓰는 건데, 흔히 자주 듣는 memoized 개념이랑 같다.  useMemo의 첫번째 파라미터에는 기존에 연산할 함수를 넣어주면 되고 두 번째는 deps배열을 넣어주면 되는데, 여기 있는 값이 바뀌면 함수를 호출해서 값을 새로 계산하고 아니면 기존에 저장한 값을 쓰는 거다. useEffect랑 비슷한 거 같다.  보통 렌더링이 될때마다 상관없는 함수들이 굳이 계속 호출되는데 이럴 때 useMemo를 써서 값이 바뀌지 않으면 위에서 말한 거처럼 호출이 되지 않고 가지고 있는 값을 사용한다.

useCallback은 useMemo와 비슷한데 useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 예시를 들면 useMemo랑 비슷하게 만약 특정 컴포넌트가 리렌더링 될 때마다 의존값이 변하지 않았다면 기존 함수를 사용하는 거다.  

React.memo는 컴포넌트를 래핑 해서 만들면, 컴포넌트를 렌더링하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같으면 리액트는 저장된 내용을 재사용한다. 그니까 컴포넌트 규모에서 재사용을 하는 거 같다.

 

추가적으로 useCallback, useMemo, React.memo 는 컴포넌트의 성능을 실제로 개선할수있는 상황에서만 하라고한다.

예를 들어서, 특정 컴포넌트의 button 에 onClick 으로 설정해준 함수들은, 해당 함수들을 useCallback 으로 재사용한다고 해서 리렌더링을 막을 수 있는것은 아니므로, 굳이 그렇게 할 필요 없다고 한다. 

또한 렌더링 최적화 하지 않을 컴포넌트에 React.memo 를 사용하는것은, 불필요한 props 비교만 하는 것이기 때문에 실제로 렌더링을 방지할수있는 상황이 있는 경우에만 사용하는게 더 좋다고 한다.

 

밑에 도움이 될만한 글들에 더 좋은 내용이 있으니 다시 한번 봐야겠다

 

참고:

https://react.vlpt.us/basic/17-useMemo.html

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

https://react.vlpt.us/basic/18-useCallback.html

https://react.vlpt.us/basic/19-React.memo.html

 

읽어보면 좋은글:

https://velog.io/@yejinh/useCallback%EA%B3%BC-React.Memo%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94

useCallback과 React.Memo을 통한 렌더링 최적화

https://ui.toast.com/weekly-pick/ko_20190731

React.memo() 현명하게 사용하기