리액트 랜더링 최적화
-
리액트 렌더링 최적화CS지식 2023. 11. 14. 21:43
리액트 랜더링 최적화에 대해 알아보기 전에 알아야할 사전지식을 먼저 정리하고 시작한다. - 리액트에서의 렌더링 = 함수를 호출하는 것 App 컴포넌트가 호출되고 -> 내부 로직들이 싱행되고 -> return문의 리액트 element 반환하는 것 이것이 리액트에서의 렌더링이다. - 리렌더링 되는 조건 1. state가 바뀌었을 때 2. props가 바뀌었을 때 3. 부모컴포넌트가 바뀌었을 때 - 불필요한 렌더링 발생 확인 지표 1. console.log 2. React Developer Tools → Profiler : 웹사이트의 컴포넌트들이 어떻게 렌더링되고 있는지를 보여주는 도구 : 어디 부분에서 렌더링이 오래 걸리고 불필요한 렌더링이 걸리는지 확인해야 한다면 용이! - 리액트에서의 렌더링 과정 1. ..