기술 스택

• Framework : React, React BoilerPlate(create-react-app)
• Route: react-router-dom
• State Management Tool: redux
• Network: Axios
• Convention: ESLint, Prettier
• Style: Emotion, styled component
• etc: formik + Yup, momentjs, react-dnd, emoji-picker-react

1. Recoil

• React 상태관리 라이브러리이다.
• 부모 트리(보통 App.js)에 RecoilRoot 태그로 한 번 감싸준 후 Atom(State) 등을 통해 상태를 관리, 사용한다.

사용 방법

1) state.js ⇒ 상태들을 저장, 관리한다.

import { atom } from "recoil";
// atom은 상태를 나타낸다.

export const textState = atom({
  key: "textState", // 
  default: "",
});

2) 사용될 컴포넌트

import { useRecoilState } from "recoil";
import { textState } from "./state";

const RecoilTest = () => {
  const [value, setValue] = useRecoilState(textState);

	// ...
}