파크로그
React + Infinity Scroll, Intersection Observer
Frontend/⚛ React 2022. 7. 15. 19:39

어떻게 구현했는지를 보여주는 글이 아닌 React 에서 어떻게 적용할 지 생각을 정리한 글 입니다. React + Infinity Scroll 처음 React 를 공부할 때 클래스 형 리액트에서 리액트의 생명주기를 찐하게 느꼈던 기능 구현이 하나 있었는데 바로 무한 스크롤이다. 스크롤 이벤트마다 리렌더링이 일어나고, 스크롤의 위치를 받아와서 viewport 의 scroll height 를 고려하는 등 어려웠던 기억이 난다. 코드스쿼드 과정을 하면서도 무한스크롤은 아니지만 스크롤 이벤트를 받아서 Header 의 CSS 속성을 수정하는 로직을 작성했던 적도 있었는데, 그 때는 throttling 을 활용해서 무수한 이벤트가 발생하는 것을 억제했던 기억이 났다. 그래서 그것을 활용해서 접근해볼까 하다가 다른 ..

React Context API
Frontend/⚛ React 2022. 7. 15. 00:08

Context API 오늘은 채용관련 사전과제 위주로 풀었다. 과제 중 Context API 를 사용하려는 데, Context API 를 어떤 기준에 의해서 사용하는게 좋을 지를 고민해보다가 velopert 님이 가장 최근에 쓰신 글을 읽었다. 사실 이전에 읽은적이 있던 typescript + Context API + useReducer 를 사용하는 방법을 찾으려고 구글링했다가 최신 글로 작성하신 게 있어서 읽게됐다. 이전 글에서는 하나의 Context API 를 사용하여 value 와 actions 를 따로 쓰는 곳에서 모두 리렌더링이 일어나는 것을 막기 위해 두 개의 Provider 로 나누어서 hooks 를 만든다는 발상이 신기했었다. 이전 글과 최근 글의 차이점은 useReducer 의 dispa..