본문 바로가기

recoil

(12)
언제 리코일을 사용하는게 좋을까? TL;DR : 캔버스나 GUI 같은 앱이 아니면 딱히 필요하지 않다. 프로젝트 초반에 리코일을 도입하기 위한 리서치를 진행하다 어쩌다보니 사용하지 않고 있는데요. 사실 생각보다 원하는대로 쓰기 어렵다는 것 외에도 (뒤에 이유를 설명합니다.) 전역 상태 관리 도구로서 에측하지 못한 하나의 단점이 있는데요. 반드시 데이터가 리액트 컴포넌트 내부에 존재해야 한다는 것입니다. 생각보다 개발하다보면 마이크로 최적화를 위해 렌더링 없이 상태 참조가 필요한 경우가 왕왕 있습니다. (useRecoilCallback을 활용할 수도 있지만, useCallback과 같은 문제가 있습니다.) https://recoiljs.org/docs/api-reference/core/useRecoilCallback/ 물론 ms단위의 미묘..
리액트 성능 최적화 : Death By a Thousand Cuts (천 번 베이면 죽는다.) Death By a Thousand Cuts 잦은 상태 업데이트는 성능 이슈가 됩니다. 이는 보통 하나의 컴포넌트가 너무 많은 일을 할 때 발생합니다. 이 문제는 식별하기 쉽습니다. 하지만 하나의 상태 업데이트에 너무 많은 컴포넌트가 묶여있으면 찾기 어렵습니다. 이게 contextAPI의 단점입니다. 따라서, 컴포넌트를 일단 작게 만드는게 중요합니다. 기존의 최적화 방법들엔 아래와 같은 문제들이 존재합니다. useMemo, callback등 캐시 방법은 앱의 복잡도를 높입니다. 리액트는 렌더링 외에, 최적화를 위한 연산을 수행합니다. 때로는 메모보다 그냥 렌더링하는게 성능이 좋을 수도 있습니다.(ex 긴 리스트 컴포넌트) 불필요한 리렌더링을 방지할 수 있는 성능 최적화 방법들을 알아보겠습니다. 여러개의 ..
Recoil로 Excel(SpreadSheet) 만들기 원래 Xstate로 만드려다가 실패했다. Xstate는 이전 비즈니스 로직에서 다음 비즈니스 로직으로의 전환을 관리하는덴 좋지만, 지금같은 Reactivity가 필요한 솔루션에는 별 도움이 안되는것 같다~ 라고 생각했는데 해당 내용을 정리하면서 다시 한번 생각해보니 굳이 XState로 만들려 하면 할 수도 있을 것 같다. 원래 Recoil과 같이 변경되는 부분만 최적화 하는게 어려울 것이라 생각했는데, selector를 잘 응용하면 될것 같기도 하다. Recoil로 중간에 변경한 이유는 중첩 참조 때문인데, 구현해보니 어차피 중첩 참조는 직접 구현해줘야 했다(...) 일단 cellsAtom에는 순수하게 입력한 input만 넣어두고, 셀렉터로 input을 평가해서 화면에 뿌려준다. 왜냐햐면 input에 포..
Recoil, Redux. 상태관리 라이브러리의 Selector 개념 Redux의 셀렉터 Deriving Data with Selectors | Redux Usage > Redux Logic > Selectors: deriving data from the Redux state redux.js.org 모든 앱의 상태를 싱글턴 기반으로 추적하는 개념인 Redux는 탑 다운 스타일로 상태 그래프의 해당 상태를 컴포넌트와 연결한다. 즉, 기본적으로 상태가 변경되면 전부 변경되지만, 그렇게 되면 최적화가 어려울 것이기에, 일부 데이터만 구독하도록 최적화한다. https://redux.js.org/usage/deriving-data-selectors 반대로 contextAPI는 컴포넌트 하단으로 데이터를 전달하기 위한 도구이다. 즉 props drilling을 피하기 위한 도구지, ..
Recoil 실전 패턴 : 상태의 계층화와 분리 원문 보기 Recoil Patterns: Hierarchic & Separation This article will discuss practical patterns in Recoil. It’s an advance topic that goes beyond Recoil basics, so we won’t spend time… medium.com 이 아티클에서는 Recoil의 실전 패턴에 대해 설명합니다. * 공식 Recoil YouTube * Recoil documentation 이 기사는 WeKnow에서 제공했으며 REDUX에서 Recoil로 이동하는 동안 아키텍처 작업에서 얻은 통찰들을 보여줍니다. 글로벌 상태를 분리된 자율적인 상태로 유지하며, 높은 레벨의 추상화, 합성을 통해 그 상태들을 조합하는 방..
[Recoil]Jotai의 구현으로 알아보는 atom 종속성 추적 https://jotai.org/docs/guides/core-internals Core Internals — Jotai A simplified version of the core implementation jotai.org Jotai는 Recoil에서 영감을 받은 원자 모델을 사용하여 React 상태 관리에 대한 상향식 접근 방식을 취합니다. 원자를 결합하여 상태를 구축할 수 있으며 원자 종속성을 기반으로 렌더링이 최적화됩니다. 이는 React 컨텍스트의 추가 리렌더링 문제를 해결하고 메모이제이션 기술의 필요성을 제거합니다. Jotai 핵심 구현의 완전한 예가 아니라 단순화된 버전입니다. (Recoil의 코드베이스는 React와 연계하여 최적화 하기 위한 코드가 너무 많이 들어가 쉽게 분석할 수가 없습..
Recoil 패턴 : Intermediate Selectors (중간 선택자로 리렌더링 최적화) https://learnrecoil.com/video/intermediate-selectors Intermediate Selectors - Free Recoil.js Course We make use of an "intermediate selector" to control when the data fetching happens. learnrecoil.com 아래와 같은 atomFamily가 있다고 하자. 해당 아톰은 드래그, 크기 조정 시마다 position이 변경된다. export type ElementStyle = { position: {top: number; left: number} size: {width: number; height: number} } export type Element = { s..
Lean Recoil 강의 정리 : Async Data Fetching (비동기 데이터 가져오기) https://learnrecoil.com/video/data-fetching-basics Data Fetching - Basics - Free Recoil.js Course We fetch user data using a selector and a selectorFamily, and learn how Recoil works with Suspense. learnrecoil.com selector와 selectorFamily를 사용하여 사용자 데이터를 가져오고 Recoil이 Suspense와 작동하는 방식을 배웁니다. HTML 삽입 미리보기할 수 없는 소스 기본 사용법 api는 동기 비동기가 다르지 않다. 리턴값만 프로미스로 변경해주면 된다. const userState = selectorFamily({ ..