코딩하는라민

[책 리뷰] 프론트엔드 성능 최적화 가이드 예전에 리액트 프로젝트를 하면서 성능 문제를 겪은 적이 있습니다. development 모드라 빌드 전이기는 했지만, 성능이 너무 낮게 나왔었습니다. 성능을 보고 모든 팀원들이 충격에 먹었었는데, 지금 생각해보니 코드를 남발하기만 하고 최적화 작업을 해주지 않았었습니다. 처음에 어떻게 하면 프로젝트의 성능을 끌어 올릴 수 있는지 몰라 막막했는데, 이 책을 읽고 나서 앞으로는 기능 구현만 신경쓸 것이 아니라는 것을 깨닫게 되었습니다. Lighthouse 분석 이 책은 제목 그대로 웹사이트의 성능을 리액트를 기준으로 최적화해주는 가이드북입니다. 이전에는 Lighthouse 의 전체적인 성능 수치만 확인했을 뿐 그 안의 요소 하나하나에 대한 분석은 하지 않았습니다. ..

[React] React.lazy 코드 스플리팅으로 프로젝트 성능 개선하기 📌 React.lazy 함수를 사용하게 된 이유 리액트 프로젝트를 진행하면서 중간중간 Light House 를 이용해 성능 검사를 진행했다. 다른 점수는 항상 90점 이상으로 나왔는데 '성능' 점수만 항상 주황색으로 60~70점 정도가 나왔다. 이 6, 70점도 잘나온 편이었고 정말 성능이 좋지 않은 페이지의 경우에는 4, 50점대까지 나왔다. 성능 최적화는 코드를 작성하고 나서 수행해야 하기 때문에 일단 프로젝트에 집중했고, 추가적으로 성능 개선을 진행하였다. 📌 React.lazy 함수란? React.lazy() 는 동적으로 코드를 로드하고 렌더링할 수 있게 해주는 React의 기능 중 하나이다. 이 기능을 사용하면 일반적인 ..

[React] Hooks - useMemo (최적화하기) 📌 컴포넌트는 언제 렌더링되는가 컴포넌트는 자신의 state 가 변경되거나, 자신의 props 가 변경되거나, 상위 컴포넌트가 리렌더될 때 렌더링이 일어나게 된다. 📌 useMemo 를 사용하는 이유 ✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다. 위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다. 상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다. 이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다. 따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 ..