Recoil 🖐

Recoil 이란?

페이스북에서 만든 Recoil은 React에서 상태를 관리하는데 사용되는 라이브러리입니다. React에서 컴포넌트는 프롭스와 스테이트를 사용하여 데이터를 전달하고 관리합니다. Recoil은 이러한 상태 관리를 간편하게 만들어줍니다.

Recoil 핵심 ✍

RecoilRoot

recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.

Atom

Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트가 재 렌더링 되는 결과가 발생할 것이다.

const textState = atom({
  key: 'textState', // 유니크한 값이 들어간다
  default: '', // 기본 값이 들어간다.
});

컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useState()처럼 useRecoilState()를 아래와 같이 사용하면 된다

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

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

Selector

Selector는 파생된 상태(derived state)의 일부를 나타낸다. 파생된 상태는 상태의 변화다. 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.

const charCountState = selector({
  key: 'charCountState', // 유니크한 값
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

useRecoilValue() 훅을 사용해서 charCountState 값을 읽을 수 있다.

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

Recoil로 장바구니 만들어보기

RecoilRoot로 일단 감싸주자

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
import { RecoilRoot } from 'recoil'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RecoilRoot>
      <BrowserRouter>
      <App />
      </BrowserRouter>
    </RecoilRoot>
  </React.StrictMode>,
)

Cart의 값을 저장함 atom을 만든다

// Cart.js
import { atom } from "recoil";

export const Cart = atom({
  key: "Cart",
  default: [],
});

카트 아이템 컴포넌트로 가서 atom설정 한거를 불러온다

import React from 'react';
import { useRecoilState } from "recoil";
import { Cart } from "../recoil/Cart";

const CartItem = ({ data }) => {
  const { id, title, description, price } = data;
  const [cartItem, setCartItem] = useRecoilState(Cart);
  
  const isAlreadyInCart = cartItem.filter((e) => e.id === id).length;

  const AddToCart = () => {
    if (!isAlreadyInCart) {
      setCartItem((prev) => [...prev, data]);
    }
  };

  return (
    <div className="rounded-md shadow-md p-4 my-4 flex flex-col items-center">
      <div className="mb-4 h-40 w-full bg-gray-100 flex items-center justify-center rounded-md">
        <span className="text-gray-700 text-2xl font-bold">이미지 준비 중입니다.</span>
      </div>
      <div className="flex-grow w-full">
        <div className="font-bold text-lg mb-2">{title}</div>
        <div className="text-gray-600 text-base mb-2">{description}</div>
        <div className="text-gray-900 font-bold text-lg mb-2">{price}원</div>
        <div className='flex justify-center mt-2'>
          <button 
          onClick={AddToCart}
          disabled={isAlreadyInCart}
          className="bg-zinc-600  hover:bg-zinc-900 text-white font-bold py-2 px-4 rounded ">
            {isAlreadyInCart
            ? `장바구니에 추가됬습니다`
            : "장바구니에 추가"}
          </button>
        </div>
      </div>
    </div>
  );
}

export default CartItem;

console.log을 찍어보니까 잘 나온다

Recoil에서 상태 업데이트를 할 때는 push()와 같은 불변성을 깨는 메서드를 사용하지 않아야 합니다. Recoil이 자체적으로 상태 업데이트를 추적하지 못하게 되며, 이로 인해 렌더링이 되지 않는 문제가 발생할 수 있습니다. ❌

다시 recoil Cart.js로 가서 총 카트 수량을 나타내는 selector를 만들어준다

import { atom, selector } from "recoil";

export const Cart = atom({
  key: "Cart",
  default: [],
});

export const QuantitySelector = selector({
  key: "QuantitySelector",
  get: ({ get }) => {
    const CurrentItem = get(Cart);
    return CurrentItem.length.toLocaleString();
  },
});

Navbar 컴포넌트로 가서 0보다 클떄만 갯수가 나오게 적용

import React from 'react'
import { Link } from 'react-router-dom'
import { QuantitySelector } from '../recoil/Cart'
import { useRecoilValue } from 'recoil';

const Navbar = () => {
  const TotalQuantity = useRecoilValue(QuantitySelector);
  return (
    <div className='w-full h-14 flex justify-around items-center border bg-zinc-100'>
      <Link className='text-2xl font-bold' to="/">Home</Link>
      <Link 
      className='flex gap-2 relative'
      to="/cart">
        <p className='z-10 font-bold'>My Cart</p> 
        {TotalQuantity > 0
        ?
        <p className='absolute top-[-12px] right-[-16px] rounded-full bg-red-500 w-6 h-6 flex justify-center items-center'>
          {TotalQuantity}
        </p> :
        null
        }
      </Link>
    </div>
  )
}

export default Navbar

이런식으로 카트의 갯수가 잘 나온다.
이제 Cartpage.js 컴포넌트로 가서 카트 페이지를 꾸며보자
일단 Recoil Cart.js로 가서 카트 총 가격 selector를 추가해주자

import { atom, selector } from "recoil";

export const Cart = atom({
  key: "Cart",
  default: [],
});

export const QuantitySelector = selector({
  key: "QuantitySelector",
  get: ({ get }) => {
    const CurrentItem = get(Cart);
    return CurrentItem.length.toLocaleString();
  },
});

export const TotalPriceSelector = selector({
  key: "TotlaPriceSelector",
  get: ({ get }) => {
    const CurrentItem = get(Cart);
    return CurrentItem.reduce(
      (acc, cur) => acc + cur.price,
      0
    ).toLocaleString();
  },
});

Cartpage.js

import { useState } from "react";
import { useRecoilValue, useSetRecoilState } from "recoil";
import {
  Cart,
  QuantitySelector,
  TotalPriceSelector,
} from "../recoil/Cart";
const Cartpage = () => {
  const cartItem = useRecoilValue(Cart); // Cart들을 담은 배열
  const TotalQuantity = useRecoilValue(QuantitySelector); // Cart의 총 갯수
  const TotalPrice = useRecoilValue(TotalPriceSelector); // Cart의 총 가격
  const setCartItem = useSetRecoilState(Cart); // Cart를 삭제하기 위한 훅 함수

  const removeFromCart = (id) => {
    setCartItem((prev) => prev.filter((e) => e.id !== id));
  };

  return (
    <div className="container mx-auto p-4 w-full md:w-4/5">
      <h1 className="text-2xl font-bold mb-4">My Cart</h1>
      {cartItem.length === 0 ? <h2 className="text-center mt-20 font-bold text-2xl">Cart가 비어있습니다</h2>
      :
      <>
      {cartItem.map((item) => (
        <div
          key={item.id}
          className="flex justify-between items-center border-b border-gray-300 py-4"
        >
          <div className="flex items-center">
            <img
              className="w-20 h-20 object-cover mr-4"
              src="https://via.placeholder.com/150"
              alt={item.title}
            />
            <div>
              <h2 className="text-lg font-bold">{item.title}</h2>
              <p className="text-sm text-gray-600">{item.price} 원</p>
              <p className="text-sm text-gray-600">{item.description}</p>
            </div>
          </div>
          <button
            className="text-sm text-red-500 font-bold"
            onClick={() => removeFromCart(item.id)}
          >
            삭제
          </button>
        </div>
      ))}
      <div className="flex justify-end items-center mt-4">
        <p className="text-gray-600 font-bold text-lg">
          총 {TotalQuantity}개 상품
        </p>
        <p className="text-gray-900 font-bold text-2xl ml-4">
          총합계: {TotalPrice} 원
        </p>
      </div>
      </>
      }
    </div>
  );
};

export default Cartpage;

결과물

참고
https://recoiljs.org/ko/
https://wit.nts-corp.com/2022/10/13/6586
https://www.youtube.com/watch?v=k5DLjVmMC2w