리액트의 상태관리
React에서는 변경된 상태를 파악하여 이전과 다르게 변경된 상태를 화면에서 재렌더링해준다. 따라서 화면을 전체만 렌더링 하는것이 아닌 변경된 곳만 다시 렌더링시켜 사용자에게 하여금 경험을 향상시켜준다. 하지만, React의 파일이 복잡하면 복잡해질수록 트리구조가 방대해지고, 상태를 업데이트 하기위해서는 공통 조상 Component로 상태를 lifting해야 하는데, 이 과정에서 구독하고 있는 친구들이 불필요한 값 변경시에도 렌더링되는 경우가 생길 수 있다. 이를 해결하기 위해 Redux, Mbox, Recoil 등이 있지만 이번 프로젝트에는 리코일을 적용해보기로 하였다.
Recoil
A state management library for React
'리액트를 위한 상태관리 라이브러리'리코일 공식문서에 적혀있는 Recoil에 대한 설명이다. 당장 이번 프로젝트때부터 Recoil을 사용해야 함으로 모든 Hook을 다 공부하고 사용하기 보다는 Recoil의 기본적인 flow인 atom(공유 상태)에서 selectors(순수함수)를 거쳐 Component로 내려가는 원리를 먼저 이해하고, 프로젝트 진행중에 필요한 부분을 그때그때 공부하기로 하였다.
Atom
Atom은 상태이다. Redux를 사용해보지는 않았지만, Store.js와 같이 store에서 관리한다는 것은 알고 있는데 이와 비슷하게 Atom의 상태를 구독할 수 있고, Atom의 상태값이 변경되면 이를 구독하고 있던 Component에서 렌더링이 일어나며 변경된 상태를 공유하게 된다. Atom은 아래와 같이 고유한 키값과 기본값을 가지고, 고유한 키값을 통해 필요한 Component에서 Atom을 사용할 수 있고, 기본값은 초기값이 된다.
export const countState = atom({
key: "countState",
default: 0,
});useRecoilState
useRecoilState는 React의 hook 'useState'와 사용하는 방식이 동일하다. 배열에서 첫번째 값은 상태의 값이 들어가고 두번째 요소에는 상태를 변경할 수 있는 함수가 들어간다. useState와 다른점은 변경된 상태가 global하게 공유된다는 것이다.
const [count, setCount] = useRecoilState(countState)useRecoilValue
useRecoilValue는 상태를 변경하는 함수없이 Atom의 값만 받는다.
const count = useRecoilValue(countState)Selector
A selector represents a piece of derived state
Selector는 공식문서에 따르면 파생된 state를 저장하고 있다고 한다. 따라서, atom의 상태에 의존하는 동적인 데이터를 생성하는데, selector의 get함수를 통해 atom정보들을 1개 이상 가져올 수 있고, 이를 조합하여 새로운 데이터를 생성할 수 있다. atom의 상태가 바뀌게 되면 해당 atom을 의존하는 selector도 자동으로 렌더링이 일어나고, selector에서 한개 이상의 atom정보를 업데이트 하도록 set함수를 받을 수 있다.
get 함수만 있으면 읽기만 가능한 RecoilValueReadOnly 객체 반환
set 함수도 있으면 쓰기 가능한 RecoilState 객체 반환
