React Query Fetching, caching, synchronizing and updating server state 라이브러리 React Query Star : 8.4K SWR Start : 5.6K 왜 등장했지 ? 전통적인 상태관리 라이브러리는 client 상태를 다루는데는 좋았지만 async 또는 server 상태관리에는 좋지 않았다. Server 상태는 Client와는 매우 다르기 때문이다. client에서 제어할 수 없음 비동기 요청이 필요함 나도모르게 변경될 수 있음 최신결과를 가져오지 않으면 "오래된"상태로 남아있음 이러한 특징 때문에 하나의 store에서 둘의 상태를 관리하는 것은 쉽지 않았다. 또한 아래와 같은 것들을 해결해내기위해 엄청난 리소스가 투입이 되어야했다. 캐싱 - 구..

cloneElement() React.cloneElement( element, [config], [...children] ) 새로운 element를 복사하여 반환하는 func config는 key, ref를 포함한 모든 props를 담음 결과 element는 원본 element의 prop과 새로 추가된 props을 합친 요소다 새로운 children역시 기존 children을 대체하는 새로운 요소가 된다 원본의 key, ref는 config에 새로운 prop이 없다면 유지된다. import React from "react"; import "./styles.css"; const Parent = ({ children, anotherProps }) => { const parentsVar = "Tired"; r..

LightHouse 과제를 수행하며 해결해나간 항목들을 정리해둔 것 웹 페이지 품질 개선할 수 있는 자동화도구 Chrome의 개발자도구 탭에서 사용가능 npm으로 설치해서 사용가능 Lighthouse에서 측정하는 지표는 실제 사용자의 사이트 경험을 이해하고 개선하는데에 중요하다. Lighthouse으로 미리 측정하여 확인하면 이런 해프닝을 방지할 수 있다. 다음은 Lighthouse에서 측정해주는 UX를 높이는데에 필요한 지표들을 알아보자. 성능측정 지표 Lighthouse는 Mertics(척도)로 다음 6가지를 측정한다. 이 성능값들은 절대적인 수치가 아니다. 컴퓨터의 퍼포먼스나 익스텐션들로 인한 네트워크 요청들, 바이러스 소프트웨어 등등에 의해 영향을 미칠 수 있다. 각 지표는 가중치를 매겨 전체 점..

Next.js는 React Framework 💪 SEO를 위한, SSR을 해주는 프레임워크라고만 알고있었다. 서버에서 미리 렌더링하는 것, 클라이언트에서 렌더링하는 것의 속도차이를 먼저 영상으로 확인해보고 글을 진행합니다. pre-render 유무의 따른 속도차이비교 클라이언트 렌더링 서버 pre-rendering 깜빡거리는건 새로고침입니다. 👏 Next.js가 해주는 것들 React에서 고려했어야할 것들을 해준다. 웹팩과 같은 번들러로 코드를 번들 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드를 문법에 맞도록 트랜스파일링) 코드스플리팅으로 production 최적화 성능 또는 SEO를 위한 Pre render (SSR, CSR을 사용) 추가로, Next.js는 다음과 같은 ..

Redux 직접 작성한 예제를 기반으로 작성 코드와 같이 보시면 더욱 도움될 것 같습니다 0. flow 이전 글 에서 크게 달라지는 것이 없다. Action, Reducer은 완전하게 동일하다. 달라지는 점은, Context API에선 전역 데이터에 접근하기 위해 Provider에 등록했고 Reducer를 호출하기 위한 Context도 생성해주었다면 Redux에선 useDispatch 를 통해 reducer에 action을 전달해줄 수 있다. 또한 useSelector 를 사용해 useContext 를 사용하지 않고 바로 전역 데이터를 가져올 수 있다. Flow는 다음과 같다. Store(전역 데이터 저장공간)생성 하위 컴포넌트에서 접근할 수 있도록 Provider로 전역 데이터 내려주기 하위데이터에서 ..

"Cancle an Axios request" Axios comes with a cancellation option to finish a request before it ends. This is useful besides the cleanup function to prevent memory leaking GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com useEffe..

React에서 Infinite scroll 구현하기 (IntersectionObserver) 무한스크롤을 구현하는 방법은 다양하다! scroll IntersectionObserver getBoundingClientRect() useRef 이중에서 2번째, 웹 API로 있는 I-O를 사용해서 구현해보도록 할 것이다. 보기에 앞서 왜 IO를 사용하게 되었는지를 잠깐 정리해본다. scroll 스크롤이벤트를 attachment하여 현재 스크롤위치를 계산해서 맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다. 스크롤마다 한번의 이벤트가 발생하므로(거의 픽셀단위) 성능이슈를 예방하기 위해 쓰로틀링 적용을 고려해야한다. 추가적인 정보는 아래 포스팅에서 확인할 수 있다. 스크롤로 구현하기 getBo..

React Key 리액트는 state, props가 변경되었을 때 리랜더링한다. 리랜더링은 render()함수를 다시 호출하는 것이고 이 때 새로운 React element tree를 반환한다. 이때 이전 상태로부터 변경된 요소를 확인하기 위해서 원래라면 O(n^3)의 복잡도를 갖는 연산을 수행한다. 그러나 리액트는 O(n)의 휴리스틱 알고리즘을 통해서 트리를 비교 연산한다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 비교 알고리즘 두 개의 트리를 비교할 때 두 엘리먼트의 Root부터 비교한다. 이 Root엘리먼트의 타입이 다른 경우 아예 새로운 트리를 구축하기 시작..