[Recoil] 상태관리 라이브러리를 통한 상태관리

Recoil이란

 

React의 전역 상태관리 라이브러리다.

기존 React스러운 상태관리는 단방향으로 이루어져 드릴링을 통해 자식에게 상태를 내려보내줘야 했고

이 때문에 자식요소들 간의 상태공유가 어려웠고, 프로젝트의 규모가 커질수록 드릴링이 깊어지게 되면서

단순히 상태 전달만 하는 불필요한 코드가 발생하고 어디에서 상태가 관리되고 있는지 추적하는데 어려움이 생겼다.

 

 

때문에 store개념을 두고 한 곳에서 상태관리가 이루어지는 대안이 생겼고 뒤늦게 React는 상태관리를 위한 contextApi를 제공했다.

하지만 늘 이글의 주제가 Recoil이듯이 contextApi가 만족스럽지는 못했다.

 

 

<Provider>를 앱 최상단에 래핑 해주게 되는데 context를 구독하는 컴포넌트들에게 변화가 감지되면 알려주는 역할이다.

하지만 context에서 변화가 생길 때마다 useContext로 구독한 컴포넌트들이 Re-Render 되어 성능 저하를 야기했다.

 

 

이후 Redux라는 친구가 나오긴 했지만 React만을 위한 상태관리 라이브러리는 아니고 바닐라 자바스크립트에서도 이용가능하다.

하지만 어렵고 복잡한 사용법에 사용성이 낮았고 그리고 사실 더는 모른다.  그냥 시대를 잘 타서 성공한 놈이라고 생각한다.

상태관리 라이브러리가 Redux라는 녀석이 워낙 유명하다 보니 조금 생소할 수도 있지만 나름 Facebook에서 개발했다.

 

 

Redux에 비해 아직은 조금 부끄러운 수준이지만 주간 다운로드수가 작성일기준 40만을 돌파했다.

아직 1.0도 안된 실험버전에 가깝지만(맞긴함) 꾸준히 개발되고있다.

하지만 개발자의 관점에서 보면 구글링 할 때 방대한 자료의 양이 퍼포먼스를 좌우하기에 트렌트를 따라가려면 Redux를 사용하는 게

맞을 거다. 아니 맞다. Redux의 복잡한 사용법을 대체하기 위해 Redux/toolkit이 나왔고

이조차 다운로드수가 Recoil의 5배를 막 넘었다.

 

 

 

내가 Recoil을 선택한 이유

 

Redux가 복잡하다는 말을 먼저 들었다.

두괄식으로 말하자면 상태관리라는 개념을 알기도전에작은 규모의 프로젝트만 하다 보니 내가 조금만 더 귀찮아지면

저런 거 필요 없다 생각했고 그러는 중에 리덕스로 골머리 앓는 사람을 많이 봤다.  그래서 그런가 시작도전에 정이 뚝 떨어졌다.

 

Facebook이 만들었으니까.

우리가 자동차도 그렇고 컴퓨터도 그렇고 정품에 순정만쓰는 느낌이랄까

튜닝의 끝은 순정이라하지 않았던가. 만든 놈들이니 더 꼼꼼하고 시작은 미약하지만 끝은 창대해지겠지.

오픈소스지만 든든한 빽이 있으니 돈 없다고 망하진 않을 테니까.

 

쉬웠다.

아직 프로덕트단계까지 깊게 사용한 건 아니지만 간단한 상태관리를 적용해 봤을 때 할만했다.

위에서 말했듯이 많은 양의 자료가 개발의 퍼포먼스를 좌지우지한다고 했지만 현재 규모에서는 충분히 쓸만하다고 느꼈다.

채용공고를 보면 꽤나 규모 있는 대기업에서도 사용 중인 걸로 봐서 내 사이즈의 프로젝트에서는 충분히 커버 가능하다고 믿었다.

 

간단한 비동기처리.

사용하기 쉽다고 들었지 사실 쓰면서 공부하는 거라 아래에서 자세한 걸 확인하길 바란다.

 

 

 

 

 

 

Atom과 Selector

atom과 selector라는 개념이 등장한다.

Recoil에서 atom은 상태라고 생각하면 된다.

우리는 기존에 state에 담아둔걸 이제 atom이라는 그릇에 담아두게 될 것이다.

기존 state처럼 atom을 구독하는 모든 녀석들은 atom에 변화가 생기면 리랜더링 한다.

selector은 atom의 상태를 가공해서 사용하기위한 녀석이다.

여러개의 atom들을 가져다가 원하는 로직을 붙여서 반환할 수 있다.

 

 

 

사용하기

 

atom

//atom.ts
import { atom } from "recoil";

export const itemState = atom<string>({
  key: "itemState",
  default: "bdev hello"
});

대충 요로코롱 상태 하나 만들어주고 

export const RecoilTest = () => {
  	const [item, setItem] = useRecoilState(itemState);
    console.log(item); // bdev hello
  }

이렇게 가져다쓰면 끝. 진짜 끝이다.

그냥 useState가 useRecoilState로 바뀌었을 뿐이다.

내 망상이지만 캡슐화 같은걸 위해 useRecoilValue나 useSetRecoilState같이 값을 가져오거나 수정만 하는 친구들도 존재한다.

킹치만 나는 귀찮으니 기존 방식대로 꺼내서 쓸 거다.

 

 

 

selector

위에도 언급했지만 그냥 진짜 atom을 가공해서 쓰기위한 상태값이다.

//atom.ts
import { atom, selector } from "recoil";

export const itemState = atom<string>({
  key: "itemState",
  default: "bdev hello"
});

export const nameState = atom<string>({
  key: "nameState",
  default: "consolekakao"
});

export const resultState = selector({
  key: "resultState",
  get: ({get}) => {
    const item = get(itemState);
    const name = get(nameState);

    return item+name;
  }
})

이렇게 맹글어두고

export const RecoilTest = () => {
  	const result = useRecoilValue(resultState);
    console.log(result); // bdev helloconsolekakao
  }

이렇게 가져다쓰면 끝난다.

 

 

 

복잡한 예제나 비동기처리 같은 부분은 다음에 다뤄보고

본 글에서는 지극히 주관적인 관점에서 Recoil을 사용해 봤다. 끝~