React에서 Recoil 써보기

React에서 다른 상태관리 라이브러리 쓰는거보다 이질감없이 사용할 수 있어서 좋았다.

Todo List를 만들어 보았는데,

내용을 따라가면서 정리해보도록하자.

 

1. npm install recoil 명령어를 통해서 recoil 라이브러리를 받아온다.

2. index.js안에 App 컴포넌트를 RecoilRoot 로 감싸준다.

 - 그럼 전역에서 Recoil로 만든 상태를 쓰는 준비는 끝이다.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <RecoilRoot>

      <App />

    </RecoilRoot>

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

3. 상태는 atom을 통해서 만들어 준다.

import { atom} from "recoil";

export const todoListState = atom({

  key: "todoListState",

  default: []

});

4. 상태를 등록할 때는 useSetRecoilState() 를 사용한다.

 - 3번에서 만든 atom을 가져온다.

import { useSetRecoilState } from 'recoil';

import { todoListState } from '../todoAtoms';

const TodoItemCreator = () => {

  const setTodoList = useSetRecoilState(todoListState);

5. setTodoList에 할당한 atom에는 현재 이전의 값이 들어있다.

 - 알맞은 방법으로 값을 넣어주면 atom이 값을 가지고 있는다.

const addItem = () => {

    if(inputValue.length > 0) {

      setTodoList((oldTodoList) => [

        ...oldTodoList,

        {

          id: getId(),

          text: inputValue,

          isComplete: false

        }

      ])

      setInputValue("");

    }

  }

6. useRecoilState를 사용하면 useState처럼 recoil을 사용할 수 있다.

const [todoList, setTodoList] = useRecoilState(todoListState);

7. useRecoilValue를 사용하면 atom의 값을 가져올 수 있다.

import { todoListStatState } from '../todoAtoms'

import { useRecoilValue } from 'recoil';

const TodoListStats = () => {

  const {

    totalNum,

    totalCompletedNum,

    totalUncompletedNum,

    percentCompleted

  } = useRecoilValue(todoListStatState);

8. axios 라이브러리를 이용한 비동기 처리하기

 - 여기까지 사용법은 동일하다.

 - selector를 사용하면 atom에 저장된 값들을 가져올 수 있다.

 - 여기서는 currentUserIdState에 저장 된 default 값인 1을 가져왔다.

 - database에 있는 회원정보 같은거 atom에 저장해놓고 쓸 수 있을 것 같다.(로그인을 잘 구현한다면 말이지)

import axios from "axios";

import { atom, selector } from "recoil";

export const currentUserIdState = atom({

  key: "currentUserIdState",

  default: "1"

});

export const currentUserNameQuery = selector({

  key: "currentUserNameQuery",

  get: async ({ get }) => {

    const path = "http://jsonplaceholder.typicode.com/users/";

    const response = await axios.get(`${path}${get(currentUserIdState)}`);

    return response.data.name;

  }

})

9. 비동기 처리동안에 다른 컴포넌트 출력하기

 - 8번에서 만들어둔 selector의 반환값을 가져왔다.

const CurrentUserInfo = () => {

  const userName = useRecoilValue(currentUserNameQuery);

  return <div>{userName}</div>

}

 - React.Suspense로 비동기처리부분을 감싸고 fallback에 원하는 컴포넌트를 넣어주면 값을 받아오기 전까지 해당 부분을 실행시키다가 값을 받아오면 받아온 값으로 리렌더링 된다.

<React.Suspense fallback={<div>...loading</div>}>

        <CurrentUserInfo />

      </React.Suspense>

 

10. Recoil을 통해 만든 TodoList 구경하러가기

 - 다른 공부 마치고 CSS 적용해서 제대로 만들어서 배포해보겠다.

https://github.com/jmpark24/react-recoil-todo-app

GitHub - jmpark24/react-recoil-todo-app