[React] Ep1. Recoil 시작하기

안녕하세요. 모리스입니다.😄

이번 포스트에서는 React에서 상태관리 라이브러리 중 하나인 Recoil 라이브러리에 대해서

아주 간단하게 찍먹 해보려고 합니다.!!

 

참고로 저는 RN개발을 했기 때문에 대부분의 예제는 RN으로 작성했습니다.😁

자 그럼 React의 Recoil은 무었이냐.. 부터 볼까요?

 

Recoil은 React의 상태 관리를 위해 Facebook에서 만든 라이브러리예요. Atoms(공유 상태)와 Selectors(파생 상태)를 중심으로 데이터 흐름 그래프를 구성할 수 있어요. Atoms는 컴포넌트가 구독할 수 있는 상태의 기본 단위이고, Selectors는 이 상태를 기반으로 동기 또는 비동기 연산을 통해 새로운 값을 만들어주는 순수 함수예요.

---

📍 Atoms

Atoms는 상태를 저장하는 단위예요. 컴포넌트는 atom을 구독할 수 있고, atom의 값이 변경되면 해당 atom을 사용하는 모든 컴포넌트가 다시 렌더링돼요.

React의 useState처럼 사용할 수 있지만, 여러 컴포넌트 간에 상태를 공유할 수 있다는 점이 차이점이에요.

atom은 atom() 함수를 사용해 아래처럼 선언해요:

const fontSizeState = atom({
  key: 'fontSizeState', // 전역에서 고유한 키
  default: 14, // 초기값
});

• key는 전역에서 고유해야 해요. 두 개의 atom이 같은 키를 가지면 오류가 발생해요.
• 컴포넌트에서는 useRecoilState() 훅을 사용해서 값을 읽고 변경할 수 있어요.

아래 예시는 버튼을 누르면 폰트 크기가 1씩 커지고, 동일한 atom을 사용하는 다른 컴포넌트의 폰트 크기도 함께 변경되는 예제예요:

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <TouchableOpacity 
      style={{ fontSize }}
      onPress={() => setFontSize(size => size + 1)}>
      <Text>Click to Enlarge</Text>
    </TouchableOpacity>
  );
}

function TextComponent() {
  const [fontSize] = useRecoilState(fontSizeState);
  return (
    <Text style={{ fontSize }}>
      This text will increase in size too.
    </Text>
  );
}

 

---

📍 Selectors

Selector는 하나 이상의 atom이나 다른 selector를 입력으로 받아 새로운 값을 반환하는 순수 함수예요.

상위 상태가 변경되면 해당 selector도 다시 계산되고, 이 값을 구독하고 있는 컴포넌트가 자동으로 업데이트돼요.

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({ get }) => {
    const fontSize = get(fontSizeState);
    return `${fontSize}px`;
  },
});

• get 함수는 필요한 atom이나 selector의 값을 가져와 새로운 값을 계산해요.
• useRecoilValue()를 사용해 selector 값을 읽을 수 있어요.

selector는 계산된 값을 반환하므로 직접 수정할 수는 없어요. (수정 가능한 selector는 이후 포스팅에서 다뤄볼게요!)

아래는 selector를 활용한 예제예요. 버튼을 누르면 폰트 크기가 증가하고, 현재 폰트 크기를 텍스트로 보여줘요:

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);
  
  return (
    <>
      <Text>Current font size: {fontSizeLabel}</Text>
      <TouchableOpacity 
        style={{ fontSize }}
        onPress={() => setFontSize(size => size + 1)}>
        <Text>Click to Enlarge</Text>
      </TouchableOpacity>
    </>
  );
}

 

---

Recoil은 React에서 전역 상태를 다룰 때 아주 유용한 라이브러리예요. 간단한 문법으로 구성되어 있어 진입장벽도 낮고, 성능적으로도 훌륭한 편이라고 생각해요!!

📖 참고

https://recoiljs.org/ko/docs/introduction/core-concepts

주요 개념 | Recoil

 

잘 못되었거나 수정할 부분이 있다면 언제든 댓글로 혼내주시길 바랍니다.!!

오늘도 긴 글 읽어주셔서 감사합니다.😊