Now or Never

프론트엔드에서 렌더링은 범용적인 용어이다, 브라우저에서도 리액트에서도 렌더링이 발생한다. 리액트에서 렌더링은 무엇일까? TL;DR 렌더링이란?브라우저 DOM을 직접적으로 수정하는 비용을 줄이기 위해 React에서 수행하는 작업이며 브라우저 DOM을 업데이트할 범위를 결정하고 반영하는 과정. Trigger, Render, Commit리엑트는 "렌더링과정"을 통해 브라우저 DOM을 업데이트할 범위를 결정하고 반영한다. 여기서 렌더링과정은 "Trigger", "Render", "Commit" 단계로 나뉜다.  Trigger렌더링을 유발하는 단계로 두 가지 상황이 있다.1. 앱 시작 초기(initial render)initial render는 target DOM node(root)와 함께 createRoot를 ..

https://careerly.co.kr/qnas/1273?fa=qna-list react-query useQuery vs... 안녕하세요. react-query에서 useQuery와 useMutation을 쓰는 도중 의문이 생겨서 질문드립니다. 보통 Read 작업은 useQuery를 쓰고... careerly.co.kr 커리어리에 올라온 질문에 답변을 하다가 react-query를 이용하여 데이터를 특정 상황에서만 조회하고 싶을 때 어떤 hook을 사용해야 하는지 고민해보았다. 2가지 방법으로 특정 상황에서만 데이터를 조회할 수 있을 것 같다. 1. useQuery 사용 - useQuery를 기본적으로 enable: false 상태로 두고, refetch 함수를 통해 특정 상황에서 데이터를 가져온다 2..

Define Styled Components outside of the render method It is important to define your styled components outside of the render method, otherwise it will be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically slow down rendering speed, and should be avoided. Write your styled components the recommended way: const StyledWrap..

라이브러리에 대한 고찰 및 SWR관련 이슈 해결 기록 회사에서는 SWR을 사용하고 있다. SWR을 간단하게 소개하면, 데이터 fetch 라이브러리로써 내부적으로 처리되는 로직으로인해 컴포넌트는 수시로 업데이트된 데이터의 stream을 받을 수 있다. 따라서 SWR은 알림기능, 라이브 기능 등에 최적화된 라이브러리라고 할 수 있다. `With SWR, components will get a stream of data updates constantly and automatically. And the UI will be always fast and reactive.` 이번에 발생한 이슈는 SWR API의 다양한 기본 옵션중에서 ShouldRetryOnError와 관련된 이슈였다. shouldRetryOnErr..