[TIL] 22.07.20

1. recoil
2. 마인드

💡 recoil

• React 전용 전역 상태관리 라이브러리로 2020년 5월 Facebook에서 출시하였다.
• 애플리케이션이 특정 value에 접근할 때 사용한다.

// index.tsx

<RecoilRoot>
	<elements>
    .
    .
    .
</RecoilRoot>

value 받아오기

• atom : Recoil 상태의 단위를 의미한다. 컴포넌트간에 이 상태는 공유되며, 구독 및 업데이트가 가능하다. 특히, atom의 상태가 업데이트되면, 이를 구독하던 컴포넌트들이 모두 리렌더링된다.
• key : 고유한 key 값(보통 해당 atom을 생성하는 변수 명으로 지정)
• default : atom의 초기값

// atoms.ts

import { atom } from "recoil";

export const isDarkAtom = atom({
	key: 'isDark',
    defauult: false,
 });

value 값 수정

function App() {
	const isDark = useRecoilValue(isDarkAtom);
    return(
    <>
    <ThemeProvider theme={isDark? : darkTheme : lightTheme}>
    </ThemeProvider>

function App() {
	const setDarkAtom = useSetRecoilState(isDarkAtom);
    const toggleDarkAtom = () => {
    setDarkAtom(prev=>!preV);
    
	const isDark = useRecoilValue(isDarkAtom);
    return(
    <>
    <Button onClick={toggleDarkAtom>
    </Button>

💡 마인드

• 기술은 문제를 해결하기 위해 만들어진다.