React Recoil

- useState상태관리는 기본적으로 해당 component안에서만 쓰임. 다른 component에서 쓰려면 props를 통해서 써야하므로 props drill hell에 발생

- 상태값을 외부의 일종의 전역적 영역에 두고 여러 component에서 가져다 쓸수 있게 할 필요가 있음.

- redux를 제일 많이 쓰는데, 가장 많이 쓰지만 쓰기 너무 쓰레기

- recoil이 괜찮아 보임.

 

1. 상태 저장 : atom이나 selector를 사용해서 별도의 공간에 저장

2. 가져다 쓰기 : useRecoilValue, useSetRecoilState를 사용

3. RecoilRoot를 상위 요소에 감싼다.

4. 심플한 예

import {atom, RecoilRoot, useRecoilState} from "recoil";

const counterState = atom({
   key: 'counterState',
   default: 0
})

const ButtonPlus = () => {
   const [count, setCount] = useRecoilState(counterState);
   return <button onClick={() => {
      setCount(count + 1);
   }}>+</button>
}

const ButtonMinus = () => {
   const [count, setCount] = useRecoilState(counterState);
   return <button onClick={() => {
      setCount(count - 1);
   }}>-</button>
}

const CounterDisplay = () => {
   const [count, setCount] = useRecoilState(counterState);
   return <div>
      <ButtonPlus/>
      {count}
      <ButtonMinus/>
   </div>
}


export const AppRecoil = (props) => {
   return (
      <RecoilRoot>
         <CounterDisplay/>
      </RecoilRoot>
   );
}

 

참고

https://talkwithcode.tistory.com/75

https://talkwithcode.tistory.com/76