React(리액트) redux에서 recoil로 recoil 기초 사용법

recoil 설치 명령어
npm install recoil
yarn add recoil

recoil vs redux
이번 프로젝트에서 상태관리 라이브러리를 선택하는 과정에서 여러 고민을 했었다.
그 동안 사용했던 익숙한 redux를 사용하는가, 새로운 recoil을 사용해보는가

결과는 처음에는 redux였고, 이제는 recoil이다.

1. 처음 redux를 선택한 이유
   개인적으로 상태관리 측면에서만 본다면 원툴이라 생각할 정도로 확실한 상태관리를 할 수 있다.
   또한 지금까지 사용하면서 익숙하기 때문에 코드를 빠르게 작성할 수 있다.
2. 그럼에도 recoil로 갈아탄 이유는 ?
   우선 전역 상태관리를 해야하는 데이터가 거의 없었다. 클라이언트 데이터도 거의 없고 아직까지 서버 데이터는 없다.
   이런 상황에서 비교적 무겁고 코드가 긴 redux를 쓸 이유가 없어졌다. 또한 데이터가 없어 흐름을 파악하는 일이 쉬워졌고, redux develop 등 redux에 장점이 점점 필요없어지는 환경에 이르렀다.

mobx 등 가볍게 사용할 수 있는 다른 라이브러리도 있었지만, 자주 눈에 보였던 recoil을 선택했다.

아주아주 기초 사용법 atom

atom
리액트 훅인 useState와 구조가 유사? 거의 똑같다

// 세팅
import { atom } from  "recoil";
const textState =  atom({  
key:  'textState',  // unique ID (with respect to other atoms/selectors)  
default:  '',  // default value (aka initial value)  
});

// index.js
import  {  
RecoilRoot,  
atom,  
selector,  
useRecoilState,  
useRecoilValue,  
}  from  'recoil';

// 공식문서에는 App.js에서 RecoilRoot를 감싸지만 나는 먼가 index.js에 감싸는게 좋은 것 같다.
<RecoilRoot>  
    <App />
</RecoilRoot>
});

공식문서 atom 정의
Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 재 렌더링 되는 결과가 발생할 것이다.

세팅은 이렇게 query-key와 유사하게 고유한 키값과 초기 값을 세팅하면 된다.
만일 key값이 동일한 atom이 여러개가 있다면 서로 데이터를 덮어 쓰기 때문에 신경써야한다.

 //사용하기
 import { useRecoilState } from  "recoil";
const  [text, setText]  =  useRecoilState(textState);

형태가 너무 익숙하다 바로 useState와 동일한 구조를 가지고 있다.
text는 해당 recoil 상태관리에 값이 될 것이고 setText를 통해 값을 변경할 수 있다. 정의에서 나오듯 자동 구독이 된다. 즉 redux에 useSelector와 같은 기능을 갖게 되며 구독하는 컴포넌트는 리랜더링 되게 된다.

selector , useRecoilValue()
atom외에도 Selector라는게 있다.
공식 문서에 나온 정의는 Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.

예시 코드를 본다면 충분히 이해할 수 있지만, 난 아직 사용 해본적이 없기 때문에 사용을 해보고 다시 정리해보고자 한다.

추가 Atoms

위에 예제는 아주 간단한 예제이다 공식문서가 너무 잘되어 있다. 한국어 지원까지 최고다!!! 참고해보자.
만일 상태값을 변경하기만 하거나, 값만 사용할 경우 useRecoilState를 사용할 수 있지만, useRecoilValue, useSetRecoilState를 꼭 사용하자. 시간많아서 만든게 아니다. 특히 값만 변경할 경우 useRecoilState를 사용할 경우 자동 구독됨으로 불필요한 렌더링이 일어난다. useSetRecoilState을 이용하여 불필요한 렌더링 없이 깔끔하게 처리해보자

참고자료
recoil 공식문서