개인과제의 시작
올게 왔다. 개인 과제를 오늘부터 시작 하였고 TS + Recoil을 이용해서 개인 과제를 하도록 마음을 먹었다. 하지만 Recoil은 한번도 사용해본 바가 없기 때문에 한번 공부하면서 사용하였습니다.
Recoil
기존에 React를 이용해 프로젝트를 진행하면 항상 Redux를 이용하여 진행하였습니다. 하지만 Redux는 React만을 위해 만들어진 라이브러리가 아니었고 Recoil은 React를 만든 facebook팀에서 만든 라이브러리이다 보니 아무래도 좀 더 React스럽게 동작합니다.
Atom
Atom은 Recoil에서의 상태 단위 입니다. 각 Component들이 필요한 Atom들을 구독할 수 있고 Atom이 변하면 해당 Atom을 구독하고 있는 Component가 리렌더링 됩니다.
Selector
Atom 혹은 다른 Selector들을 받아 사용하는 순수함수 입니다. filering같은 것을 Selector를 통해 할 수 있습니다. 아직 사용하지 않아 깊게는 모르는 관계로 넘어 가도록 하겠습니다.
기존 프로젝트에 필요한 만큼만 공부해 놓은 상태이며 시간이 나면 좀 더 깊게 공부해 보도록 하겠습니다.
인피니티 스크롤
개인과제 요구 사항에 인피니티 스크롤이 있어서 구현을 하는데 정말 사소한 실수로 너무 많은 시간을 소비 하였습니다.
문제가 뭐였냐?
스크롤이 닿을 때 마다 새로운 데이터를 받아 오게끔 설계 하였는데 자꾸 스크롤이 최상단으로 올라가는 것입니다.
문제의 원인은 무엇인가?
검색 리스트를 보여주는 컴포넌트 보다 상위 컴포넌트에서 검색 결과의 값들을 관리하고 있었기 때문에 상위 컴포넌트들이 리렌더링 되다 보니 스크롤이 자꾸 최상단으로 올라가는 현상이 나타난 것입니다.
해결방법
빠르게 Recoil로 상태 관리를 할 수 있게끔 구현하여서 검색 리스트를 보여주는 컴포넌트에서 상태를 구독하여 사용하니 더이상 그런 현상이 발생하지 않았습니다.
후기
오늘 최대한 많은 기능을 구현하고자 하였는데 조금은 아쉬운것 같습니다. 최대한 빠르게 기능을 정리해야 여유있게 제출할 수 있지 않을까 생각합니다. 빨리빨리빨리빨리
