[Recoil] Facebook이 실험중인 상태관리 라이브러리 Part.2

Code 🎈

이번 프로젝트를 하면서 웹앱의 특성상 history.push를 하면서 다른 페이지로 안넘어가고 탭을 이용해서 넘어가기 때문에 상품리스트에서 상품을 담고 장바구니 탭으로 넘어가면 바로 업데이트가 안되어있고 새로고침을 해야 장바구니가 업데이트되는 문제를 경험했다. 물론 f7router를 이용하여 강제 새로고침을 할수 있지만, 이런 경우에는 상태관리 라이브러리를 쓰는게 맞다는 조언에 따라 Recoil을 처음 쓰게 되었다.

👻 (아직 공식문서를 더 봐야하지만) 아주 간단하게 Recoil을 쓸수있는 방법! 👻

1. 먼저 src 폴더 밑에 state.js 파일을 만들고 여러 파일에서 상태관리를 해야하는 state를 정해준다. 밑의 경우에는 cartlist의 상태관리가 필요하기때문에 cartlistState를 선언해주었다. default에는 state의 초기값이 들어간다.

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

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

2. cartlist에 상태 변화가 일어나는 지점인 itemlist.jsx에서 밑과 같이 import 해준다.

// itemlist.jsx
import { useRecoilState } from "recoil";
import {
  cartlistState,
} from "../../src/state";

3. useState([])가 아닌 useRecoilState(cartlistState)를 사용한다. cartlistState는 cartlist의 초기값이며 state.js에서 []로 선언해주었었다.

// itemlist.jsx
const itemlist = () => {
  
  const [cartlist, setCartList] = useRecoilState(cartlistState);

  

4. 장바구니에 담기 버튼을 누를때마다 백앤드에게 아이템의 ID를 보내주고 새로운 장바구니 리스트를 다시 받을때 setCartList를 통해서 장바구니 리스트를 업데이트 시켜준다.

// itemlist.jsx
  const addToCart = (e) => {
    const data = {
      item_id: e.target.id,
    };
    axios({
      method: "post",
      url: "http://localhost:3000/line_items/newitem",
      headers: { Authorization: localStorage.getItem("practice_token") },
      data: data,
    }).then((res) => {
      setCartList(res.data);
    });
  };

}

5. 이제 실제 장바구니 js파일에서 똑같이 import해주고 useRecoilState로 상태관리를 하게 된다면 itemlist.jsx에서 바뀐 장바구니 리스트가 바로 바로 업데이트 되는것을 확인할수 있다!

// cartlist.jsx
import { useRecoilState } from "recoil";
import { cartlistState } from "../../src/state";

const cart = () => {
  const [cartlist, setCartlist] = useRecoilState(cartlistState);
  
}

6. 결과물 🌈