투두리스트 Recoil로 리팩토링

Today, What I learned?

타입스크립트와 리덕스 툴킷으로 리팩토링 했던 투두리스트를 리코일로 한번 더 !.. 리팩토링해보았다. 

(익혀보기에 투두리스트만한 것이 없다..)
리코일에 대해 간략하게 정리해보고 리팩토링 과정을 기록한다.

 

 

Recoil

리코일은 facebook에서 출시한 리액트를 위한 상태관리 라이브러리다.
많이들 사용하는 리덕스보다 보일러 플레이트가 적고,
액션, 리듀서, 디스패치.. 와 같이 알아야 할 기본 개념이 많은 리덕스에 비해 상대적으로 쉽게 익힐 수 있다.

또 사용방법이 useState 훅을 사용하는 것과 비슷하기 때문에 쉽게 사용할 수 있는 듯하다.
리덕스에선 비동기 작업을 위해 Redux-thunk나 Redux-saga 같은 미들웨어를 사용해야 하기 때문에 좀 더 어렵다고 할 수 있는데, 리코일에서는 내장된 Selector를 통해 비동기 로직을 쉽게 구현할 수 있다.

 

 

기본적인 Recoil 개념

RecoilRoot

리덕스의 Provider 같은 개념이다. 루트 컴포넌트에 감싸준다.

 

 

Atom

상태의 일부다. atom을 구독하는 컴포넌트는 어디에서나 atom의 데이터를 읽고 쓸 수 있다.
atom()으로 선언을 하는데, key와 default 값을 필수적으로 선언해야 한다.

import { atom } from 'recoil';

export const textState = atom({
  key: 'textState', // atom을 식별하는 전역적으로 고유한 값
  default: '', // 초깃값. 다른 atom이나 selector도 들어올 수 있다.
});

 

 

useRecoilState()

컴포넌트에서 useState()를 쓰듯이 atom을 읽고 쓰는 데에 사용하는 훅.
이 훅 외에도 atom을 읽을 때만 사용하는 useRecoilValue(), 쓸 때만 사용하는 useSetRecoilState() 훅 등이 있다.

상태값과 setter 함수를 리턴한다. atom 값이 변경되면 컴포넌트가 자동적으로 리렌더링 된다.

import React from 'react';
import { useRecoilState } from 'recoil';
import { textState } from './atoms';

const CharacterCoutner = () => {
  const [text, setText] = useRecoilState(textState);

  const onChange = (e) => setText(e.target.value);

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <div>{text}</div>
    </div>
  );
};

export default CharacterCoutner;

 

 

간단한 개념은 이 정도로 살펴보고 Selector 등의 개념은 공식문서를 참고해 보자!...
https://recoiljs.org/ko/docs/introduction/installation

설치 | Recoil

 

이제 본격적인 리팩토링 과정.

 

Recoil 설치

리코일을 설치해 준다.

npm install recoil

yarn add recoil

 

 

Recoil 설정

index.tsx에 기존의 redux provider 대신에 RecoilRoot로 감싸준다.

import App from './App';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

 

 

State 설정

recoil 폴더 안에 state를 넣을 파일을 생성한다.
타입스크립트 프로젝트이기 때문에 atom에 타입을 별도로 선언해 주었다.
첫 렌더링시 기본적으로 들어가 있을 값이 필요해서 default의 배열 값에 값들을 넣어주었다.

import { atom } from 'recoil';
import { TodoType } from '../components/todoForm/TodoForm';
import { v4 as uuid } from 'uuid';

export const todoState = atom<TodoType[]>({
  key: 'todos',
  default: [
    {
      id: uuid(),
      title: '리액트 공부',
      content: '리액트 숙련강의 처음부터 복습하기',
      isDone: false,
    },
   ...
  ],
});

 

 

적용

Todo 추가

useState를 쓰듯이 useRecoilState() 훅으로 위에 만든 state를 가져온다.

  const [todos, setTodos] = useRecoilState<TodoType[]>(todoState);

  ...

  const submitHandler = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    ...

    const newTodo: TodoType = {
      id: uuid(),
      title,
      content,
      isDone: false,
    };

    setTodos([...todos, newTodo]); // setTodos로 전역상태에 추가해주기

    setTitle('');
    setContent('');

    return true;
  };

 

 

Todo 완료 토글, 삭제

기존 리듀서의 reducers 안에서 이루어지던 로직이 핸들러 함수 안에서 이루어진다고 보면 될 것 같다.

 const [todos, setTodos] = useRecoilState<TodoType[]>(todoState);

  // 투두 완료/취소 토글 핸들러
  const toggleDoneHandler = (id: string) => {
    const newState = todos.map((item) => {
      return item.id === id
        ? {
            ...item,
            isDone: !item.isDone,
          }
        : item;
    });

    setTodos(newState);
  };

  // 투두 삭제 핸들러
  const deleteTodoHandler = (id: string) => {
    if (window.confirm('해당 투두를 정말 삭제하시겠습니까?')) {
      const newTodos = todos.filter((todo) => todo.id !== id);
      setTodos(newTodos);
    }
  };

 

 

Todo 상세

state의 값만 필요한 경우, useRecoilValue() 훅으로 setter함수 없이 state값만 가져올 수 있다.

const Detail = () => {
  const todos = useRecoilValue<TodoType[]>(todoState);
  const param = useParams();

  // id와 일치하는 투두 찾기
  const todo = todos.find((item) => item?.id === param?.id);

 

 

Todo 수정

todo 수정도 위와 비슷하게 리듀서에 작성했던 로직을 가져와서 쉽게 수정할 수 있다.

 const [todos, setTodos] = useRecoilState<TodoType[]>(todoState);

 ...

  const editTodoHandler = (id: string) => {
    ...

      const newState = todos.map((item) => {
        return item.id === id
          ? {
              ...item,
              title: newTitle,
              content: newContent,
            }
          : item;
      });

      setTodos(newState);
    }

    setIsEdit(!isEdit);
  };

 

 

이미지가 작아졌지만.. 아무튼 리팩토링 완료!...

확실히 리덕스에 비해 가볍고 쉽게 적용할 수 있는 것 같다.