넷째주 #17 React Js - Recoil

상태관리 라이브러리를 쓰지 않았을 때 상황

• 다크모드 토글 함수와 그 불린값이 📂 App 에 있음.
• 📂 Router 에서 <Coins /> 컴포넌트에서 다크모드 토글 함수의 값이 필요함
• 📂 App -> 📂 Router -> 📂 Coins props 보내줘야 한다. 계층 구조마다.
• 어플리케이션 전체에서 공유하는 state인 global state 다루기가 불편하다.

📂 App
function App() {
  const [isDark, setIsDark] = useState(false);
  const toggleDark= () => setIsDark((c) => !c);
 
<Router isDark={isDark} toggleDark={toggleDark}/>
//App -> Router
}
  
📂 Router
function Router({ toggleDark, isDark }) { // props 받고
	return (
    ...생략
      <Coin isDark={isDark} />
      <Coins toggleDark={toggleDark} />
    ) // Router -> Coins
}

Recoil

• state management library (페이스북에서 만듬)
• global state를 분리된 공간에서 관리할 수 있음.
• state를 atom으로 만들고 필요시 어떤 컴포넌트에서나 읽고 쓰기 가능
• atom에 변화가 생기면 구독중인 컴포넌트들은 리렌더링
• ContextAPI보다 기능이 더 다양함. (selectors, getters, setters)

기본 사용법

1. 📂 index에서 RecoilRoot import해서 <App /> 감싸기.

2. 📂 atoms.ts 파일 만들어서 isDarkAtom 만들기

import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark", // 고유한 이름
  default: false, // 기본 값
});

3. 📂 App에서 isDarkAtom 사용하기 - useRecoilValue()

import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./atoms";

function App () {
  const isDark = useRecoilValue(isDarkAtom) // 아톰 이름으로 use~
  
  return (
    ...
  <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
    ...
  )
};

4. isDarkAtom 값 수정하기 - useSetRecoilState()

function App () {
  const setterFn = useSetRecoilState(isDarkAtom); // false
  const toggleFn = () => setterFn((prev) => !prev); // F -> T ->
  
  return (
    ...
  <button onClick={toggleFn}> Toggle Mode </button>
	//setState 방식으로 사용
    ... 
  )
};

useRecoilState

• useRecoilValue와 useSetRecoilState 함축.
• value 와 modifier 함수를 반환
• react의 useState와 같은 방식

interface IToDo {
  text: string;
  category: "TO_DO" | "DOING" | "DONE"
}

const toDoState = atom<IToDo>({
  key: "toDo",
  default: [], 
  // []로 두면 빈 배열이어야 하는 상태. toDoState는 toDo들의 배열이다: IToDo
})

function ToDoList() {
  const [toDos, setToDos] = useRecoilState(toDoState);
  const {register, handleSubmit} = useForm<IForm>();
  const handleValid = (data: IForm) => {
  console.log("add to do", data.toDo) // key: "toDo"
    
  setToDos(oldToDos =>
  	[{text: toDo.data, category: "TO_DO"}, ...oldToDos]);
  //바로 배열에 Push하면 안되기에 [...oldToDos], text에는 입력한 input값 toDo가 들어감
  }
  return (...생략)
}

#6.11까지의 메모

selector