반응형

Recoil 2

[React.js] Recoil - Selector

Selector recoil에서의 함수 또는 파생된 상태 파생된 상태란 atom의 상태에서 파생된 데이터, 즉 atom의 상태에 의존하는 동적인 데이터를 의미 주어진 atom의 상태에 대해 항상 동일한 값을 반환하는 순수함수 Selector를 사용하는 이유? 최소한의 state만 atom에 저장하고 다른 모든 파생되는 데이터는 selector의 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지할 수 있다. Selector 생성하기 export const hourSelector = selector({ key: "hours", get: ({ get }) => { const minutes = get(minuteState); return minutes / 60; }, set: ({ set }, n..

[React.js] Recoil - atom

Recoil recoil은 리액트를 위한 전역 상태 관리 라이브러리 중 하나이다. 리액트의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 형태를 띄게 된다. 따라서 모든 컴포넌트에서 쓰여야 하는 상태가 있다면 이 정보를 계속 계속 하위 컴포넌트로 전달해야하는 불편함이 있다. 이를 해결하기 위해 나온 것이 recoil과 같은 상태 관리 라이브러리이다. recoil을 사용하면 위 그림과 같이 전역으로 관리해야하는 상태들을 atom 단위로 만들어놓고 해당 atom을 필요로하는 컴포넌트가 구독하여 사용하는 형식으로 동작한다. Recoil 설치하기 npm i recoil Recoil 준비하기 모든 컴포넌트를 RecoilRoot로 감싸주어야한다. ..

반응형