Recoil: 현대적인 상태 관리 라이브러리.

상태 관리 라이브러리와 관련하여 React는 상당한 점유율을 가지고 있습니다. 때때로 새로운 것이 등장할 때 프로그래머가 무엇이 가장 좋은지 어떻게 알 수 있습니까? 작년에 Facebook은 Recoil이라는 상태 관리 라이브러리를 도입했습니다. 이 기사에서는 Recoil이 무엇이며 다음 프로젝트에서 Recoil을 사용해야 하는 이유를 알게 될 것입니다.


면책 조항: 현재 Recoil은 여전히 ​​실험적인 것으로 간주되므로 자신의 책임하에 사용하십시오.

Recoil이 현재 가장 인기 있는 상태 관리 라이브러리인 Redux 및 Context API와 어떻게 비교되는지부터 시작하는 것이 중요하다고 생각합니다.

Redux보다 Recoil을 선호하는 이유

예를 들어, Recoil은 React용으로 특별히 제작되었으며 Redux는 React 라이브러리가 아니며 저장소는 외부에서 처리되는 것입니다. 즉, React의 내부 스케줄러에 액세스할 수 없습니다. Recoil은 후드 아래에서 반응 상태를 사용하므로 React가 동시 모드를 출시할 때 Recoil은 크게 뒤처지지 않습니다. 또한 복잡성이 작용합니다. 기본 상점을 설정하려면 많은 상용구와 코드가 필요합니다. 비동기 데이터를 포함하거나 계산된 값을 캐싱하려면 기본 라이브러리와 별개가 아니며 더 많은 라이브러리가 필요합니다. Redux의 제작자는 최근 Twitter에서 Redux를 너무 복잡하게 만든 것에 대해 사과했습니다. 주의사항이 아닌 경우입니다. 나는 그것이 무엇인지 모른다.

Context API에 무슨 문제가 있습니까?

복잡하지는 않지만 React 고유의 기능이지만 여전히 한계가 있습니다. 반복적이거나 복잡한 업데이트에 사용하면 그다지 효율적이지 않습니다. Facebook의 엔지니어인 Sebastian Markbage는 말합니다.

Context is ready to be used for low frequency unlikely updates. It's also good to use for static values and then propagate updates through subscriptions. It's not ready to be used as a replacement for all flux-like-state propagation.
In layman's terms: Context API doesn't let you subscribe to a subset of the data it contains.

경쟁에 대해 충분히 좋습니다. 무엇이 Recoil을 그렇게 훌륭하게 만들까요?

시작하려면 Recoil을 배우기가 매우 쉽습니다. React hooks 사용에 이미 익숙한 사람들에게는 매우 간단하고 자연스럽게 느껴집니다. 시작하려면 앱을 RecoilRoot 로 래핑하고 데이터를 atom 이라는 단위로 선언하고 useState 를 Recoils useRecoilState 로 바꾸는 문제입니다. 또한 Recoil을 사용하면 구성 요소가 소비하는 데이터의 정확한 부분을 구독할 수 있으며 비동기 데이터 흐름을 처리하는 메서드가 내장되어 있습니다.

반동 - 기본

Atom - 원자는 모든 구성 요소가 구독할 수 있는 Recoil의 상태 조각입니다. 원자 값을 변경하면 구독한 모든 구성 요소에서 다시 렌더링됩니다. 원자를 생성하려면 애플리케이션과 기본값에서 고유해야 하는 키를 제공해야 합니다. 기본값은 정적이거나 함수일 수 있습니다. 이것은 어떻게 보일 것입니다.

export const nameState = atom({
key: 'nameState',
default: 'Aiesha Brown'
)}

useRecoilState - 원자 값을 구독하고 업데이트할 수 있는 후크

useRecoilValue - 원자 값만 반환
useSetRecoilState - setter 함수만 반환

import {nameState} from './myFile'
const NameInput = () =>{
const [name, setName] = useRecoilState(nameState)
const name = useRecoilValue(nameState)
const setName = useSetRecoilState(nameState)
}

선택기 - 선택기는 파생된 상태의 일부를 나타냅니다. 다른 원자에 의존하는 동적 데이터를 구축할 수 있습니다.

결론적으로

배우기 쉽고 직관적인 상태 관리 라이브러리를 갖는 것이 중요합니다. 지금까지 읽은 내용이 마음에 들면 다음 프로젝트에서 사용하는 것이 좋습니다. 앞으로 Recoil이 얼마나 잘 확장되는지 계속 지켜봐 주십시오.