React에서 Infinite scroll 구현하기 (IntersectionObserver) 무한스크롤을 구현하는 방법은 다양하다! scroll IntersectionObserver getBoundingClientRect() useRef 이중에서 2번째, 웹 API로 있는 I-O를 사용해서 구현해보도록 할 것이다. 보기에 앞서 왜 IO를 사용하게 되었는지를 잠깐 정리해본다. scroll 스크롤이벤트를 attachment하여 현재 스크롤위치를 계산해서 맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다. 스크롤마다 한번의 이벤트가 발생하므로(거의 픽셀단위) 성능이슈를 예방하기 위해 쓰로틀링 적용을 고려해야한다. 추가적인 정보는 아래 포스팅에서 확인할 수 있다. 스크롤로 구현하기 getBo..
Styled-Components With TS(theme, globalStyle) TypeScript TS에 Styled-Components를 적용해보자 설치 npm install @types/styled-components 1. 테마 공통적으로 사용되는 스타일을 테마로 묶어서 코드일관성을 지킬 수 있도록 한다. 이를 위해 먼저 타입선언과 테마를 작성해야한다. 1.1 styled.d.ts: 타입선언파일, 테마작성하기 .d.ts를 타입선언파일이라고 한다. TS코드의 타입 추론을 돕는 파일이다. 첫번째 단계는 styled.d.ts 라는 테마에 사용될 변수들의 타입들을 선언하는 파일을 만드는 것이다. styled.d.ts 만들기 import 'styled-components'; // and ex..
Recoil 전역상태관리 라이브러리로써 context, mob x, redux,.. etc가 있다. Recoil은 그 중 하나로써 최근에 나온 라이브러리다. Recoil은 크게 atoms, selectors으로 이루어져있다. atoms atoms은 상태의 단위로 업데이트 및 구독이 가능하다. => state로 생각 atom이 업데이트 되면 이를 구독하는 컴포넌트들이 리랜더링된다. atom 함수를 사용해 생성한다. const aState = atom({ key: 'uniqueKey', default: defaultValue, }) key, default 를 가지며 각각 전역적인 고유키, 초기 값을 뜻한다. useRecoil() 컴포넌트에서 읽고 쓰기 위해서 useRecoilState 를 사용한다. => 상..
Scroll Restoration Browsers are starting to handle scroll restoration with history. React-router-dom에서 Scroll Restoration 을 기본적으로 지원한다. 옵션엔 auto , manual이 있다. auto면 이미 방문한 곳의 이전 스크롤을 복원해준다. 현재 프로젝트에서 post list를 보는 곳은 스크롤이 복원되어야하지만, post 상세보기에서는 맨 위로 위치시켜야한다. 따라서 detail 페이지에 라우팅되었을 때 스크롤을 최상단으로 위치하는 함수를 추가해야한다. import { useEffect } from "react"; import { useLocation } from "react-router-dom"; exp..
React Key 리액트는 state, props가 변경되었을 때 리랜더링한다. 리랜더링은 render()함수를 다시 호출하는 것이고 이 때 새로운 React element tree를 반환한다. 이때 이전 상태로부터 변경된 요소를 확인하기 위해서 원래라면 O(n^3)의 복잡도를 갖는 연산을 수행한다. 그러나 리액트는 O(n)의 휴리스틱 알고리즘을 통해서 트리를 비교 연산한다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 비교 알고리즘 두 개의 트리를 비교할 때 두 엘리먼트의 Root부터 비교한다. 이 Root엘리먼트의 타입이 다른 경우 아예 새로운 트리를 구축하기 시작..
서버사이드 렌더링을 통하여 얻을 수 있는 가장 큰 이점은 검색엔진 최적화 CSR, SSR SPA Single Page Application (SPA) 즉 리액트나 앵귤러같이 초기에 서버에서 JSON 형태로 값을 받아오고 나면 그 뒤로부터는 마치 네이티브 앱을 사용하는 것처럼 작동하는 웹앱을 말한다. 새로고침 방식의 웹과 달리 필요한 static파일을 한번에 또는 나눠서 다운받고 필요한 데이터만 서버로부터 동적으로 받아 네이티브한 형태인 것. 초기 페이지에서 모든 리소스를 다운받지 않고, 리소스를 청크(Chunk) 단위로 묶어서 해당 리소스에 대한 요청이 있을 때만 다운로드 받도록 하는 방법을 적용하면 초기 구동속도 문제를 많이 완화시킬 수 있다. CSR? Client side rendering 최초 로딩..
- Total
- Today
- Yesterday