Recoil 사용해보기

수많은 state와 Props를 관리하려면 전역 상태에서 관리가 필수 인 것 같다.
그래서 redux보단 npm 다운로드 수가 적지만 보다 쉽게 접근할 수 있는 Recoil을 사용해보기로 했다.

useState 개념으로 쓰는 거라 이해하기도 쉬울 거라 생각했다!

Recoil에는 atom(원자)개념이 있다. 즉 atom은 하나의 state라 보면 된다.

1.recoil이라는 폴더 안에 atom.js 파일 생성

input 태그로 함 살펴보자.

import {atom} from 'recoil';

export const inputAtom=atom({
   key:'',
   default:''
});

atom은 여러개일 수 있으니 중복되면 error 뜨므로, key는 유일한 값을 넣어야한다!

const [state,setState] = useState('')

원래 react에서 useState에 default값을 넣어주는 것과 유사하다!

2. 원하는 페이지에 와서

import {useRecoilState} from 'recoil';

export default function page(){
  const [input,setInput]=useRecoilState(inputAtom);
  
  return (
  	<>
       <h1>Main Page</h1>
       <input type="text" value={input} onChange={(e)=>setInput(e.target.value);} 
   </>  
   ;
  

recoil에서 제공해주는 'useRecoilState'가 따로 있다.
default에 넣는 곳에는 우리가 만든 inputAtom을 넣어준다.

3. 최상위 폴더로가서 로 감싸줘야 한다.

<React.StrictMode>
	<RecoilRoot>
       <App/>
    </RecoilRoot>
</React.StrictMode>

4. 그럼 main 페이지에서 input에 입력한 내용을
   다른 page에서 볼 수 있다.

import {inputAtom} from "../recoil/atom';

export default function PostsPage(){

  const input=useRecoilValue(inputAtom);
  return <h1>{input}</h1>;
}

만약,setInput이 아닌 input 값만 가져오고 싶다면?
-> recoil에서 제공하는 useRecoilValue() 개념을 쓰면 된다!

이렇게 input에 입력하면

다른 페이지에 이렇게 그대로 보인다!

근데 새로고침하면 다시 초기화되버려서 아마 저장하게 하려면 localstorage를 사용해야할 것 같다!

recoil 처음 접해봤는데 글에서 본거처럼 러닝커브가 어렵진 않은 것 같다.