useMemo
-
리액트 렌더링 최적화CS지식 2023. 11. 14. 21:43
리액트 랜더링 최적화에 대해 알아보기 전에 알아야할 사전지식을 먼저 정리하고 시작한다. - 리액트에서의 렌더링 = 함수를 호출하는 것 App 컴포넌트가 호출되고 -> 내부 로직들이 싱행되고 -> return문의 리액트 element 반환하는 것 이것이 리액트에서의 렌더링이다. - 리렌더링 되는 조건 1. state가 바뀌었을 때 2. props가 바뀌었을 때 3. 부모컴포넌트가 바뀌었을 때 - 불필요한 렌더링 발생 확인 지표 1. console.log 2. React Developer Tools → Profiler : 웹사이트의 컴포넌트들이 어떻게 렌더링되고 있는지를 보여주는 도구 : 어디 부분에서 렌더링이 오래 걸리고 불필요한 렌더링이 걸리는지 확인해야 한다면 용이! - 리액트에서의 렌더링 과정 1. ..
-
[컴포넌트 최적화] React.memo, useMemo, useCallback의 차이점과 활용프론트엔드 개발자가 될거야./react 2022. 9. 26. 16:46
세 달 동안 React기반으로 세 개의 프로젝트를 완성했다. 구현하는 것을 목적으로 달려왔기에 프로젝트가 끝난 이후 리팩토링을 진행하면서 나의 코드가 효율적인지 아닌지 고민해 보게 됐다. 그러면서 리액트의 렌더링에 대해 더 깊게 알고 싶었다. 리액트는 매우 유용하지만 렌더링에 주의하여 사용해야 한다. 렌더링을 할 필요가 없는 컴포넌트까지 항상 렌더링이 된다면 이는 성능이 좋지 않다고 할 수 있다. 이를 위해 활용해야 하는 것이 바로 React.memo, useMemo, useCallback이다. 먼저 알아야 하는 것은 리액트에서 리렌더링이 발생하는 3가지 조건이다. 리액트에서 리렌더링이 발생하는 3가지 조건 1. 본인이 가진 state에 변화가 생긴 경우 2. 부모 컴포넌트가 리렌더링이 일어난 경우 3...