2022/05 (26) 썸네일형 리스트형 [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 Pattern : Selector Composition (셀렉터 조합하기) https://learnrecoil.com/video/selector-composition Selector Composition - Free Recoil.js Course We create a new selectorFamily that composes functionality on top of our existing editProperty selectorFamily. learnrecoil.com 기존 editProperty selectorFamily 위에 기능을 구성하는 새로운 selectorFamily를 만듭니다. Motivation 리코일은 각 아톰, 셀렉터의 getter, setter를 조합해 상위 getter setter를 조합하여 파생 상태를 만든다. (selector는 반드시 아톰으로부터 파생.. 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({ .. Lean Recoil 강의 정리 : Atom Families / Selector Families Atom Family : Id로 동일한 아톰 여러개 만들 때 사용 export const elementState = atomFamily({ key: 'element', default: { style: { position: {top: 0, left: 0}, size: {width: 200, height: 200}, }, }, }) // 새로운 id가 들어올 때마다 Map처럼 작동하여 새로운 객체를 만들어준다. const [element, setElement] = useRecoilState(elementState(id)) SelectorFamily : 파생 상태를 ID 별로 다르게 // 타입스크립트 : id , 파라미터 순서 const editProperty = selectorFamily({ key: 'ed.. Lean Recoil 강의 정리 : Atoms And Selectors https://learnrecoil.com/ Atom : 공유 상태 단위 기본적인 공유상태 해법은 상태를 상위 컴포넌트로 hoisting 하는 것이다. 이는 props drilling및 불필요한 렌더링을 유발한다. 가장 기본적인 Recoil의 상태인 Atom을 이용하면, 상위 컴포넌트 (Atom)보다 하위에서 공유 상태를 사용할 수 있다. Atom은 React 컴포넌트 밖에 존재한다는 것에 유의한다. 또한 key 충돌을 주의해야 한다. 값만 사용하려면 useRecoilValue를 사용한다. const darkModeState = atom({ key: 'darkMode', default: false, }) const DarkModeSwitch = () => { const [darkMode, setDarkM.. Recoil로 Todo List 만들기. https://recoiljs.org/ko/docs/basic-tutorial/intro 도입부 | Recoil 이 섹션은 Recoil과 React를 설치했다고 가정한다. Recoil과 React를 처음부터 시작하는 방법은 Getting Started를 보면된다. 앞으로의 섹션의 컴포넌트들은 부모트리에 ``가 있다고 가정한다. recoiljs.org 리코일 공식 문서를 그대로 따라한 코드이다. 배울만한 점을 복기해본다. HTML 삽입 미리보기할 수 없는 소스 1. TodoList 가장 최상단의 컴포넌트이다. todoListState Atom을 갖고 있다. 또한 List+Filter Atom을 조합해 파생한 filteredTodoListState를 화면에 보여준다. 즉 사용자가 보는 데이터는 filtere.. Recoil 배경 및 기본 알아보기 왜 리코일이어야 하는가? 리액트 공식 상태관리 라이브러리 Recoil의 등장 배경에 대해 알아보자. 단방향 데이터 바인딩 VS 양방향 데이터 바인딩 단방향 데이터 바인딩은 이벤트 혹은 뷰 업데이트 코드를 통해서만 명시적 업데이트 가능 양방향 데이터 바인딩은 뷰가 데이터를 수정하고, 데이터가 뷰를 수정할 수 있음. (단뱡향 + 프레임워크의 변수 watcher) Flux Architecture 페이스북의 flux 아키텍처는 전통 MVC, MVVM의 안티테제임. MVC의 문제점은 기존과 다른 컴포넌트 중심 설계 사상에서, view와 model의 양뱡향 연결 갯수가 너무많아 추적이 어려워진다는 것임 (이전에는 view가 하나의 페이지 였다면 - 이제는 컴포넌트 단위로 쪼개짐) Flux 아키텍처는 단방향 데이터 .. 이전 1 2 3 4 다음
