결과물 바쁜 현대인들을 위해 결과물부터 보여드리겠습니다. 의식의 흐름 >리액트 프로젝트 한번 해볼까? 요즘들어 머릿속에 사이드 프로젝트 아이디어가 폭발하는 가운데 크리스마스 기념 크리스마스 MBTI 페이지나 만들어 배포해볼까.. (재밌겠는데???) 등등의 생각들이 뭉게뭉게 피었다. Vite 한 스푼, SWC Jest 한 스푼, ESLint/Prettier/Husky/lint-staged 한스푼, React Query 한 스푼, MSW, Recoil ... 라이브러리 설치하고, 설정파일 만들어서 설정하고... 스터디 위키를 참고하여 매

서론 학습 목표 📖 React.memo() 를 스마트하게 사용이 가능해진다. 본론 Re-render 브라우저가 렌더링 되고 난 후에 레이아웃을 변경했을때 브라우저는 다시 렌더링을 하게 된다. 이 과정에서 리플로우 그리고 리페인트가 발생하게 된다. 리액트에서 컴포넌트간 Props로 데이터를 전달한 후 상위 컴포넌트에서 Props가 변경 되었을때 하위 컴포넌트에서 무조건 렌더링을 다시 하게 된다. 특이한 점은 상위 컴포넌트에서 파생된 모든 하위 컴포넌트에서 렌더링 후 DOM 업데이트가 다시 발생한다는 것이다. 아주 간단한 코드를 보면서 바로 이해해보자. 크롬 브라우저에서 리액트 데브 툴을 열고 Props에서 이름="존" 으로 변경하면 Child2도 재렌더링되어 '렌더링됨2'이 로그에 찍히는것을 볼 수 있다. 그럼 Child1만 DOM에 업데이트 되게 하려면 어떻게 해야 할까? React.memo() 란? 리액트에서는 변경된 바로 그 컴