레코일을 기본부터 이해하세요!(환경 구축·Atom 편)

네, 그것도 좋아요.

상태 관리 도구를 React에서 사용하려고 합니다.

그런데 학습 원가가 높아서 어려워요.

이런 느낌을 가진 사람을 대상으로 리코일의 사용법을 정리했다.

레코일을 기본부터 이해하세요!(환경 구축·Atom 편) now

레코일을 기본부터 이해하세요!(Selector 편) 　

필자는 Redux와 유사한 도구를 사용한 적이 있지만, 나는 "Recoil은 절대 간단하다"고 생각한다.
상태 관리 도구의 선정이 막막한 분들은 Recoil의 사용법을 고려해 보세요!!
리콜이 뭐야?
React의 공급원 메타(FaceBook)가 개발 중인 새로운 상태 관리 라이브러리입니다.
Redux와 ReactQuery의 위치에 있는 라이브러리입니다!
2022년 2월까지는 예발표 상태(v0.6.1)이지만 리액트의 생부로 제작돼 상태관리고로서 표준으로 활용될 가능성이 크다.
이루어지다
그럼 바로 쓰세요!
먼저
Next.js와 Recoil 등 필요한 프로그램 라이브러리를 설치합니다.
먼저 설치Next.js합니다.

npx create-next-app nextjs-recoil

생성된 nextjs-recoilディレクトリ 내용을 루트 디렉터리로 가져옵니다.
(좀 안 예뻐요.)
이렇게 움직일 수 있게 해주세요!

.
├── LICENSE
├── README copy.md
├── README.md
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
└── styles

이번 메인 Recoil을 설치합니다.

npm install --save recoil

Recoil 사용
Recoil은 RecoilRoot로 둘러싸인 어셈블리에서 사용할 수 있습니다.
루트 구성 요소에 설정하는 것을 추천합니다 /pages/_app.js.
/pages/_app.js

import {　RecoilRoot　} from 'recoil';

function MyApp({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  )
}

export default MyApp

이런 설정이면 리코일을 사용할 수 있어요!
스케줄러:아주 간단하네...!
부팅Next.js.

npm run dev

아톰이란?
리코일에서는 Atom 단위로 다양한 상태를 관리할 수 있다.
다음Atom을 작성하여 서로 다른 페이지 간의 상태를 관리할 수 있습니다.
Atom의 기본 형태

const todoState = atom({
  key: "todo", // 一位のキー名
  default: ["todo1"], // 初期値
});

키: 제작된 Atom의 첫 번째 키 이름 부여(중복 불가)

default:Atom의 초기값

데이터 표시 및 업데이트
이번에 우리는 간단한 토도 앱을 제작해 토도의 상태를 관리Atom했다./recoil/todo.js에 Atom를 생성하여 모든 디렉터리에서 사용할 수 있도록 합니다export.
/recoil/todo.js

import { atom } from "recoil";

//todo Atom
export const todoState = atom({
  key: "todo",
  default: ["todo1"]
});

방금 제작한 것을 바로 보여 줍시다Atom.
Recoil은 기본적으로 ReactHooks를 사용하여 상태 작업을 수행합니다.
데이터를 편집할 때는 useRecoilState()를 사용합니다.
useRecoilState()의 기본 형태

//const [Atomの状態変数, Atomを更新する関数] = useRecoilState(対象のAtom)
const [todoList, setTodoList] = useRecoilState(todoState)

제1원소: Atom의 현재값

제2원소: 업데이트Atom의 현재 값에 사용되는 함수

이번에는 이런 형식/pages/index.js으로 실시한다.
/pages/index.js

import { useState } from "react"
import { useRecoilState } from "recoil";
import { todoState } from "../recoil/todo"

export default function Home() {
  // TodoのAtomを呼び出し
  const [todoList, setTodoList] = useRecoilState(todoState)

  const [todo, setTodo] = useState("")

  const handleChange = (e) =>{
    setTodo(e.target.value)
  }

  // Todoリストを更新する
  const pushTodo = (newTodo) => {
    setTodoList([...todoList, newTodo])
    setTodo("")
  }

  return (
    <div>
      <p>todo list</p>
      <ul>
        {todoList.length && todoList.map((v, i) => (
          <li key={i}>{v}</li>
        ))}
      </ul>
      <div>
        <input type="text" value={todo} onChange={handleChange} />
        <button onClick={() => pushTodo(todo)}>
          add Todo
        </button>
      </div>
    </div>
  )
}

방문localhost:3000하면 Todo 앱을 사용할 수 있을 것 같아요!

[Tips]
리코일에는 데이터만useRecoilValue() 표시하는 훅스와 업데이트만useSetRecoilState() 상태의 훅스도 준비됐다.useRecoilValue() 잘 안 쓰지만 꼭 사용하세요useSetRecoilState()!
React의 성능을 향상시키기 위해서는 데이터의 재현을 줄이는 것이 중요하다.useSetRecoilState()를 사용하면 불필요한 렌더링을 방지할 수 있습니다.
상태만 업데이트하면 적극 사용하세요!!

// Todo Atomのデータ表示のみを行う場合、こんな感じ
const todoList = useRecoilValue(todoState)
// Todo Atomのデータ更新のみを行う場合、こんな感じ
const setTodoList = useSetRecoilState(todoState)

최후
다음에는 RecoilのSelector에 대해 쓰고 싶어요!
이번에 사용한 코드는 여기 있다!(필요 없는 파일이 삭제되었습니다.)
https://github.com/takusan64/nextjs-recoil