Recoil 기초부터 이해하자！（Selector편）

이 글은 [초보 개발자], [개발자와 대화가 필요한 사람들]을 대상으로 작성하였습니다.

 

Recoil(리코일)은 페이스북에서 만든 라이브러리인 React(리액트)를 위한 상태 관리 라이브러리입니다.

 

・ React에서 상태 관리 도구를 사용하고 싶다.

・ 하지만 학습 비용이 높고 어려울 것 같다.

 

이렇게 느끼고 있는 사람들에게 Recoil을 추천하는데요

Recoil의 기본적인 부분에 대해 알아봅시다.

 

Recoil은 크게 Atom(아톰), Selector(셀렉터, 연산자)로 이루어져 있습니다.

 

Atom은 하나의 상태 값

상태 값이 변하면 그 상태 값을 가지고 있는 부분(컴포넌트)이 새로운 상태값으로 보여져야(렌더링) 합니다.

예 스위치가 켜졌다란 상태값을 가지고 있다가 스위치가 꺼졌다는 상태값으로 바뀌었다면 스위치가 꺼진 상태로 다시 보여져야 한다.

 

Selector는 상태값을 보고(참조) 새로운 값을 만드는 기능(함수)

예를 들어, kg단위로 되어 있는 체중을 파운드로 변환하려 할 때,

또다시 파운드로 되어 있는 상태 값을 만들 필요 없이,

kg 값을 참조하여 파운드로 변환해주는 selector를 사용하면 됩니다.

 

이렇게 컴포넌트에서 상태 값과 이 상태에 대한 조작을 위해 필요한 것들(※)을 모아놓은 라이브러리가 recoil입니다.

※필요한 것들 : 오브젝트(atom, selector,...), 함수(useRecoilState(), useRecoilValue(), useSetRecoilState(),...)

 

컴포넌트 설명

컴포넌트(Component)란 재사용 가능한 블럭(모듈)입니다.
레고 블록처럼 이미 만들어져 있는 컴포넌트들을 조합하여 화면을 구성할 수 있습니다.

프로그래밍과는 상관없는 보통 사람들이 웹 페이지를 보고 윗부분 아랫부분 식으로 말하는 것을 이렇게 블럭 개념으로 나눠놓은 것입니다.

 

컴포넌트에서 atom을 직접 참조해도 되고,

단순히 상태 값만 받아오면 괜찮고,

kg 파운드 변환처럼 처리를 해야 하는 경우에는 selector를 쓰면 된다.

 

예제

마지막으로 체중 Atom을 참조하는 Selector작성 예입니다.

 

// 체중 Atom 만들기
const weightState = atom({
  key: "weight",
  default: 50
});

// Selector 만들기
const weightUnitState = selector({
  key: 'weightUnit',

  // get 으로 상태값 취득
  get: ({ get }) => {
    // 체중 Atom을 참조
    const weight = get(weightState);
    const unit = 'kg';

    // 단위(kg)를 붙여서 체중을 return
    return `${weight}${unit}`;
  },

  // set으로 상태값 갱신
  set: ({ set }, newValue) => {
    set(weightState, newValue)
  }
});