[포트폴리오] Recoil

프로젝트에 들어갈 정보들을 하드코딩해도 되지만, 전역 상태관리 라이브러리인 Recoil을 사용해보고 싶어서 포폴에 적용해 보았다

Recoil 시작

설치

npm install recoil

RecoilRoot

//index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { createGlobalStyle } from "styled-components";
import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <>
    <GlobalStyle />
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </>
);

Recoil을 적용하기 위해 최상위 컴포넌트에 <RecoilRoot>을 적용한다.

Atom

간단히 말해서 전역상태를 관리 / 저장하는 파일이다.
생성 위치는 최상위 컴포넌트와 같은 위치에 만들면 된다.

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

export const projectList = atom({
  key: 'projectList', // 키값은 고유한 값으로 만든다.
  default: , [ // 전역상태 projectList의 디폴트값. useState([...])같은 의미
    { id: 1, url: "abc" },
    { id: 2, url: "abc" },
  ]
});

값 불러오기

import { useRecoilValue } from "recoil";//값만 가져오기
import { projectList } from "../atoms";


const Project = () => {
	const List = useRecoilValue(projectList);
	console.log(List);
}

제대로 값을 가져오는 모습이다.

값뿐만 아니라 상태변경 함수도 불러오고 싶다면,

import { useRecoilState } from "recoil";
const [list, setList] = useRecoilState(projectList);

를 사용하면 된다.