recoil 환경 세팅 및 RecoilRoot 설정, atom 정의

recoil은 몇 번 포스팅을 했었지만 사실 충분하게 이해하지 못했다. 거의 vuex만 써오던 나에게는 너무 생소한 스타일이기도 했고, 생각보다 레퍼런스가 많이 없었다고 핑계를 대본다... 하여 실무에서 리코일을 사용하며 애를 먹었고, 관련 작업을 할 때 너무 작아지는 기분이 들었다.

아직도 recoil은 어떻게 다루어야할지는 모르겠지만 공식 문서에 나온 todoList 예제를 보며 차분하게 따라해 볼 생각이다.

 

✔️ Recoil 테스트 환경 세팅

---

npx create-react-app 프로젝트명
npm install recoil

 

✔️ Recoil 사용 설정

---

단순 recoil 다운받았다. 사용시작! 이라고 하면 너무 좋겠지만 recoil을 사용하겠다는 일종의 세팅과정이 한 번 더 필요하다.

recoil 상태를 사용 할 부모 컴포넌트 어딘가에서 해주면 되는 과정이지만 보통 전역적으로 사용되기 때문에 최상단 루트 컴포넌트에 해당 코드를 넣어준다. 만약 특정 컴포넌트에서만 사용하고 싶다면 해당 컴포넌트의 부모가 되는 컴포넌트에 넣어주면 된다. 만약 여러 개 중첩으로 사용하게 된다면 가장 안쪽(깊은 곳)에 있는 RecoilRoot 컴포넌트가 우선권을 가지게 되어 상단 RecoilRoot를 사용할 수 없게 된다.

👉 options

• initializeState
  • 원자 상태를 초기화 하는 옵션으로 최초 랜더링 상태에 대한 설정 (비동기적인 변경에 따른 초기화 아님)
• override
  • 기본값은 true로 설정
  • true : 새로운 recoil 사용 범위 생성 (각각의 독립적인 atom의 providers/stroe 생성)
  • false : 랜더링 기능만 가능 (recoil 기능 불가)

 

나는 CRA로 생성한 프로젝트 중 app.js에 해당 코드를 넣었다. 이제 RecoilRoot 컴포넌트 하단으로 들어오는 컴포넌트의 모든 곳에서 recoil을 사용할 수 잇는 자격이 주어졌다.

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <div className="app"></div>
    </RecoilRoot>
  );
}

export default App;

 

✔️ Atom 생성하기

---

👉 Atom이란

애플리케이션 일부의 상태를 가지고 있는 곳이다. 어느 컴포넌트에서든 읽고 쓰기가 가능하며, 아톰을 import 하고 있는 컴포넌트들은 암묵적으로 이를 '구독'하기 시작한다. 고로 atom에 변화가 있을 때, 이를 구독하고 있는 (import 하고 있는) 모든 컴포넌트들이 재랜덩이 된다고 생각하여야 한다.

👉 options

• key
  • atom 식별자로 다른 atom과 selector에 대한 고유값
• default
  • 설정하고 싶은 초기값, Promise, 다른 atom 및 selector
• effects
  • atom effects to be continue...
• dangerouslyAllowMutability
  • 기본적으로 atom의 상태가 변경되면 이를 구독하고 있는 모든 컴포넌트가 랜더링 되는 것을 막음 ( 아톰의 상태는 변경되지만 컴포넌트에 변경 사항을 알리지는 않는 옵션)
  • boolean값

 

* 나는 파일의 명확한 구분을 위하여 recoil이라는 폴더를 생성하여 해당 폴더에 atom과 selector 파일을 생성 할 예정이다. 이렇게 되면 atom 파일에서 export과정과 사용할 컴포넌트에서 import 과정이 추가로 필요하다.

atom은 상태를 나타내기 때문에 보통 atom 이름에 State를 붙여 사용하는게 일반적이다. 테스트를 위하여 default 값을 넣어두었다.

import { atom } from 'recoil';

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

export default todoListState;

 

✔️ Atom 값 확인하기

---

상단에서 생성한 atom 값을 사용할 컴포넌트를 하나 만들었다. 더불어 이 값은 맨 처음에 세팅하였던 <RecoilRoot> 컴포넌트 하위에 있어야한다.

todoList.jsx

import React from 'react';

const TodoList = () => {
  return (
    <div>투두리스트</div>
  );
}

export default TodoList;

App.jsx

import React from 'react';
import { RecoilRoot } from 'recoil';
import TodoList from './component/TodoList';

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

export default App;

 

다시 todoList.jsx로 돌아와서 atom값을 불러보도록 하자. 코드는 간단하다. atom 값을 읽을 수 있는 useRecoilValue와 추가로 나는 atom을 별도의 파일로 분리하였기 때문에 해당 파일을 함께 import 해준다. 이후 useRecoilValue(읽으려는 atom)을 hook처럼 사용하여주면 된다.

import React, { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import todoListState from '../recoil/TodoListAtom';

const TodoList = () => {
  const todoLists = useRecoilValue(todoListState);
  useEffect(() => {
    console.log('todoLists', todoLists);
  }, []);

  return (
    <div>투두리스트</div>
  );
}

export default TodoList;

콘솔로 찍어보았을 때, default로 잡은 값이 잘 들어오는 것을 확인할 수 있다.

이 코드를 조금만 다듬어서 화면에 todoList를 화면에 띄워주도록 하자.

import React from "react";
import { useRecoilValue } from "recoil";
import todoListState from "../recoil/TodoListAtom";

const TodoList = () => {
  const todoLists = useRecoilValue(todoListState);

  return todoLists.map((todo, index) => <div key={index}>{todo}</div>);
};

export default TodoList;

✔️ Atom에 사용되는 Hooks

👉  종류

• useRecoilState : atom 값을 읽고 쓸 때, 사용
• useRecoilValue : atom 값을 읽기만 할 때, 사용
• useSetRecoilState : atom 값을 쓰기만 할 때, 사용
• useResetRecoilState : atom 값을 초기화 할 때, 사용
• useRecoilCallback : 컴포넌트에 등록되지 않았지만 atom 값을 읽어야 할 때, 사용

 

보통의 react hook의 사용 방법과 똑같다.

const [count, setCount] = useRecoilState(counter);

 

✔️ recoil과 관련된 이전 포스팅

---

https://hyermione.tistory.com/104

recoil이란 무엇인가, 왜 필요한가

https://hyermione.tistory.com/123

Recoil의 기본 개념 이모저모