recoil (12) 썸네일형 리스트형 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 다음
