# 2022. 03.
# 03. 02.
# 정용진 맛집지도 렌더링 최소화 개선
본 서비스는 FE Only 웹 서비스로, 맛집 데이터는 내장된 JSON 파일로부터 한꺼번에 불러온다. 경기 지역의 맛집 데이터를 불러올 때 165개의 데이터를 한꺼번에 렌더링하는데, 검색 과정에서 불필요한 리렌더링이 계속 발생하여 버벅거리는 이슈가 있었다.
영상에서 165개의 카드 컴포넌트가 검색 내용에 따라 렌더링되는데, 카드 내부의 변경되지 않는 컴포넌트들까지 리렌더링되고 있다. 또한, 검색 칸이 빈칸이 되는 순간 165개의 컴포넌트가 한꺼번에 렌더링되면서 잠시 멈췄다가 지워지는 모습이다.
이를 해결하기 위해 Card 내용 컴포넌트에 Memo를 적용 (opens new window)하여 불필요한 렌더링을 줄였고 검색 컴포넌트에 useThrottle을 적용 (opens new window)시켜 리렌더링되는 주기를 최소화하여 사용자 경험을 개선할 수 있었다.