📆 22.11.14 - Recoil 알아보기

리코일을 왜쓸까..?

이전에 쓰던 redux, redux-toolkit 이 너무 불편했기 때문

RecoilRoot

recoil의 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 쓰임

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

Atoms

상태의 단위이며 업데이트되면 이 단위를 사용한 컴포넌트는 새로운 값을 반영하여
다시 렌더링

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

사용하려면 리액트 hook의 usestate처럼 useRecoilstate라는 hook으로 atom에 있는 값을 state로 사용할 수 있으며 변경된 값을 atom파일의 state로 저장하여 그 저장된 값을 다른 Components로 용이하게 보낼 수 있게 된다.

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    
    // setFontSize에 변화를 줘서 atom의 state 값을 변화하게 되고, 그와 동시에 같은 state값을 쓰던 다른 컴포넌트의 값도 증가하게 된다.
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

다른 예 )

const todoListState = atom({
  key: 'todoListState',
  default: [],
});

function TodoItemCreator() {
  const [inputValue, setInputValue] = useState('');
  const setTodoList = useSetRecoilState(todoListState);

  const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        isComplete: false,
      },
    ]);
    setInputValue('');
  };

  const onChange = ({target: {value}}) => {
    setInputValue(value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={onChange} />
      <button onClick={addItem}>Add</button>
    </div>
  );
}

// 고유한 Id 생성을 위한 유틸리티
let id = 0;
function getId() {
  return id++;
}

Selectors

atoms나 다른 selectors를 받아들이는 순수 함수. 이전에 vuex에서 썼던 mutations랑 많이 닮아 있는 듯 하다.

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All',
});

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

하나의 selector에 필요한 데이터를 모두 처리하는 것이 편하다고 사료.

atom 객체를 사용하려면 get 함수를, selector를 활용하려면, useRecoilValue함수를 사용