React 썸네일형 리스트형 react-virtuoso 사용해서 리스트 렌더링 최적화하기 개인 스터디 목적으로 만든 포켓몬을 활용한 도감 사이트가 있다 포켓몬의 정보를 보고 어떤 능력치와 타입을 가지고 있는지, 약점은 무엇인지 알 수 있는 진짜 도감 같은 사이트를 만들고 싶어서 스터디, 내가 주관적인 입장에서 게임을 할 때 쉽게 찾아보고 이용하려는 목적으로 만들게 되었다 그동안 스터디 목적으로 여러 프로젝트를 구성해 봤지만 혼자 개발을 하면서 많은 데이터를 이용해서 사이트를 만들어본 적은 처음이라 여러 문제를 겪어보았고 이번에 부딪힌 문제도 이런 부분에서 처음 겪는 이슈였다 문제점 메인 화면은 포켓몬의 정보를 카드 형식으로 보여주는 화면인데 처음 개발을 시작할 때는 1세대의 포켓몬만을 이용하여 화면을 구성했기 때문에 성능에 대한 이슈는 없었는데 모든 포켓몬의 정보를 가져오니 1000개가 넘는.. 더보기 React-Memoization React rendering React는 컴포넌트를 렌더링 한 뒤 이전 렌더된 결과와 비교하여 DOM을 업데이트 함 함수형 컴포넌트 기준 React.useState()의 setter, React.useReducer()의 dipatches가 실행되면 해당 컴포넌트가 업데이트 된다 React의 컴포넌트가 업데이트 되면 업데이트 되는 컴포넌트 내부에 있는 모든 자식 컴포넌트를 순차적으로 리렌더링 한다. Parent > Child > GrandChild 의 순으로 컴포넌트가 구성 되어 있을 경우 Child 컴포넌트가 업데이트 된다면 상위 컴포넌트인 Parent 컴포넌트는 리렌더링 하지 않지만 하위 컴포넌트인 GrandChild컴포넌트는 다시 렌더링 된다 만약 GrandChild 컴포넌트 내부에 자식 컴포넌트가 .. 더보기 이전 1 2 다음
