본문 바로가기

분류 전체보기

 (989)
React Query에는 Debounce와 Throttling이 없다? React-query에서 기본적으로 제공하는 debounce, throttling 기능이 없어 곤혹을 겪었다. 복습 및 예방 차원에서 구현을 학습해보자. 원리는 쿼리키 배열로 전달되는 값의 변화를 지연하여 전달하는 것이다. 참고한 글 : https://www.codingdeft.com/posts/react-debounce-throttle/ Debounce(디바운스) 일정 시간동안의 요청을 묶어 최종 요청 하나만 처리한다. 요청은 뒤에 트리거된다. import React from "react"; export default function useDebounceValue(value: T, delay: number = 500) { const [debouncedValue, setDebouncedValue] = R..
대규모 프로젝트 React Query 아키텍처 원문 보기 Building The Real App With React Query — Smashing Magazine In this article, Georgii Perepecho explains the most common React Query features that you need to be familiar with when creating a real-life application that is stable when testing. www.smashingmagazine.com 원문의 완성된 프로젝트 레포지토리 GitHub - horprogs/react-query: An example of building the app using React Query. An example of building th..
리액트 라우터 v6(React Router v6) 딥 다이브 https://reactrouter.com/docs/en/v6/getting-started/concepts#main-concepts React Router | Main Concepts Declarative routing for React apps at any scale reactrouter.com 요즘은 대부분의 회사들이 CRA 대신 next.js를 디폴트로 사용하는것 같지만, 클라이언트 사이드 렌더링 기반 프로젝트를 제로부터 구축해야 하는 경우, 라우팅은 필수다. 직접 구축할 수도 있지만, (useEffect로 간단하게 할 수 있음... 과연 간단할까? 좀비 차일드 문제를 검색해보자) 대부분 리액트 라우터를 사용한다. 리액트 라우터는 6 버전부터, 이라는 컴포넌트와 함께, 컴포넌트 트리의 레이아웃에 직..
프론트엔드 지식 : Javascript Critical Rendering Path 원문 링크 정의에 따르면 Critical Rendering Path는 브라우저가 HTML 페이지를 가져오는 시간과 사용자가 시각화할 수 있는 웹 페이지 구축을 시작하는 시간 사이에 경로를 만드는 단계의 모음일 뿐입니다. 이 과정에서 브라우저가 수행하는 단계를 최적화해야 합니다. 크리티컬 렌더링 패스 최적화란, css, javascript, html을 적게 가져오고, 파싱 및 실행하여, 사용자의 인터랙션까지의 시간을 단축시키는 것을 의미한다. The Document Object Model 모든 웹 페이지에는 Document Object Model 또는 DOM이 있습니다. 이것은 구문 분석(parsed)된 상태에 있는 전체 HTML 페이지의 객체 표현입니다. HTML이 구문 분석되면 DOM 트리가 생성됩니..
리액트 성능 최적화 : Death By a Thousand Cuts (천 번 베이면 죽는다.) Death By a Thousand Cuts 잦은 상태 업데이트는 성능 이슈가 됩니다. 이는 보통 하나의 컴포넌트가 너무 많은 일을 할 때 발생합니다. 이 문제는 식별하기 쉽습니다. 하지만 하나의 상태 업데이트에 너무 많은 컴포넌트가 묶여있으면 찾기 어렵습니다. 이게 contextAPI의 단점입니다. 따라서, 컴포넌트를 일단 작게 만드는게 중요합니다. 기존의 최적화 방법들엔 아래와 같은 문제들이 존재합니다. useMemo, callback등 캐시 방법은 앱의 복잡도를 높입니다. 리액트는 렌더링 외에, 최적화를 위한 연산을 수행합니다. 때로는 메모보다 그냥 렌더링하는게 성능이 좋을 수도 있습니다.(ex 긴 리스트 컴포넌트) 불필요한 리렌더링을 방지할 수 있는 성능 최적화 방법들을 알아보겠습니다. 여러개의 ..
리액트 성능 최적화 : Production Monitoring 사용자가 성능 불만 접수 전에, 성능 문제를 해결합시다. 렌더링 시간의 일부를 어떻게든 추적하고 해당 정보를 서버로 보내 모니터링할 수 있다면 좋을 것입니다. React DevTools만큼 많은 정보를 제공하지는 않지만 유용한 정보를 제공합니다 참고 : facebook은 프로파일링 버전과 비 프로파일링 버전을 동시에 배포합니다, 즉 프로파일링 버전을 사용자의 일부에만 배포하여, 모니터링합니다. 주의 : 프로파일러는 기본적으로 프로덕션 모드에서 동작하지 않습니다. 성능 부하가 될 수도 있으니 주의합시다. Create React App v3.2 이상 버전에서는 다음과 같은 방법을 사용하여 프로덕션에서 프로파일링을 enable할 수 있습니다. yarn build --profile npm run build --..
리액트 성능 최적화 : Virtual DOM 1. Virtual DOM은 무엇인가요? (공식 문서) Virtual DOM (VDOM)은 UI의 "이상" 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다.. 실제 DOM과 Virtual DOM을 동기화하는 과정을 재조정이라고 합니다. Virtual DOM은 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다. Data 조작을 통해 UI를 업데이트하여 돔 조작 코드를 제거하여 생산성을 향상시킵니다. 2. 리액트 컴포넌트의 생명 주기 Re..
리액트 성능 최적화 :contextAPI 컨텍스트 API는 props drilling을 막기 위한 수단일 뿐이며, 내부의 state가 갱신되면, 하위 컴포넌트들이 전부 렌더링되는, 리액트 컴포넌트의 룰을 벗어나지 않는다. 즉, 가 다시 렌더링될 때마다 하위 컴포넌트는 전부 렌더링된다. const CountContext = React.createContext() function CountProvider(props) { const [count, setCount] = React.useState(0) const value = [count, setCount] return } 언제 zustand/redux를 사용하고 언제 context API를 사용할까? [짤막글] 언제 context API를 사용하고 언제 zustand나 redux를 사용할까요? TLD..

티스토리툴바