🧢

Recoil 자료 정리

장점

React에 최적화된 상태관리 라이브러리

난이도가 쉬움

TypeScript를 기본적으로 지원 (의존 모듈 설치x)

Re-Render 최소화에 도움을 줌

Context API : 전역 데이터의 상태를 관리하려면 공통 조상 컴포넌트로 상태를 끌어올려야 하는데, 이 과정에서 너무 큰 트리가 리렌더링 될 수 있다. (구독하고 있는 컴포넌트들이 불필요한 값 변경시에도 렌더링 되는 이슈)

notion image

Recoil : React state와는 “수직적인 방향”으로 상태를 관리한다.

notion image

React 상태 트리가 바닥면이라면, Recoil의 상태는 위에서 아래로 내려오는 형태이다.

따라서 React의 상태의 영향을 받지 않고 필요한 부분에만 상태를 전달한다는 것을 의미한다.

그렇기에 구독중인 컴포넌트만 업데이트를 하는 것이 쉬워진다.

Recoil이 관리하는 상태는 atom이라고 하는데,

다음과 같이 간단하게 정의하고 사용할 수 있다.


// 정의
export const nameState = atom({
  key: 'nameState',
  default: 'Jane Doe'
});


// 사용
const [name, setName] = useRecoilState(nameState);

공식 문서

Brief Introduction into Recoil Recoil은 React처럼 작동하고 생각합니다. 앱에 추가하여 빠르고 유연한 공유되는 상태를 사용해 보세요. 파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리됩니다. 코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소를 구현합니다.

https://recoiljs.org/ko/

입문

Recoil - 또 다른 React 상태 관리 라이브러리?

원문: Sveta Slepner https://medium.com/swlh/recoil-another-react-state-management-library-97fc979a8d2b 많은 React 상태 관리 라이브러리들이 있고, 가끔 새로운 라이브러리가 등장한다. 그러나 페이스북에서 직접 상태 관리 솔루션을 소개하는 것은 흔하지 않다. 이 라이브러리가 어떤 장점이 있고 새로운 점이 있는지, 그리고 앞으로 시간을 투자할 가치가 있는지 알아보자.

Recoil - 또 다른 React 상태 관리 라이브러리?

https://ui.toast.com/weekly-pick/ko_20200616

Recoil - 또 다른 React 상태 관리 라이브러리?

실습

TypeScript React + Recoil을 이용한 TodoList 만들어보기 📘

안녕하세요! 오늘은 최근에 출시된 React의 상태관리 라이브러리, Recoil을 이용한 TodoList를 만들어 볼것입니다. 기존에 저는 다수의 Mobx 경험과 소수의 Redux 를 이용하여 상태관리를 해왔었는데요, 이번에 페이스북에서 공식으로 발표한 새로운 패러다임의 상태관리 라이브러리 이기에 한번 사용해보고 싶었습니다. 기존에 많은 사람들이 사용중인 상태관리 라이브러리 Redux, MobX는 그저 단순 자바스크립트 상태관리 라이브러리 일뿐, 리액트를 위한 상태관리 라이브러리는 아니었습니다.

TypeScript React + Recoil을 이용한 TodoList 만들어보기 📘

https://velog.io/@yiyb0603/TypeScript-React-Recoil%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-TodoList-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0

TypeScript React + Recoil을 이용한 TodoList 만들어보기 📘

기타 영상

[B1] 상태관리, 이제 Recoil 하세요.

상태관리, 이제 Recoil 하세요. - 김현태 | MASS ADOPTION발표자료: https://drive.google.com/file/d/1XzROX52XAeDFDYOfqgKOQ9ypDJkBBzal/view?usp=sharing

[B1] 상태관리, 이제 Recoil 하세요.

https://www.youtube.com/watch?v=0-UaleJZOw8

[B1] 상태관리, 이제 Recoil 하세요.