Recoil
나의 경우에 리코일을 알게된, 사용하게된 경위는
프로젝트 진행 도중 기한이 다가오는데 여러 feature가 병합되는 과정에서
각 기능별 상호작용 부분에서 props , state 관련 이슈가 생겨서
이를 트러블슈팅하는 치트키로 사용하게된 케이스이다..
해당 이슈는 이전 프로젝트를 진행할 때에도 비슷하게 겪었던 경험이 있었는데..
중략하고 글을 마저 작성해보겠다..
시작하기
나의 경우는 이미 Creat-React-App 기능으로
프로젝트 폴더를 생성하여 사용하고있었기 때문에.
간단하게 터미널에 npm install recoil 명령어로 설치하여 사용했다.
Atom.js
//Atom.js
export const globalState = atom({
key: 'globalState',
default: '',
});
Atom.js 파일은 전역 State 를 관리하는 js확장자 파일이다.
해당 파일은 프로젝트 폴더의 root 위치에 생성하여 관리한다.
위의 key 는 다른 전역 state와 중복되지않는 유니크한 값이여야 한다.
default는 useState의 초기값과 같은 역할을 한다.
Index.js
꼭 Index.js 파일이 아니여도
프로젝트 내의 최상위 js 파일을 의미한다.
import variables from './styles/variables';
import theme from './styles/theme';
import Router from './Router';
import { RecoilRoot } from 'recoil'; // <- RecoilRoot
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ThemeProvider theme={{ style: theme, variables }}>
<GlobalStyle />
<RecoilRoot>
<Router />
</RecoilRoot>
</ThemeProvider>
);RecoilRoot 를 Import 하고,
Router.js 구문을 RecoilRoot 태그로 감싸준다.
이렇게되면 모든 컴포넌트에서 전역 state를 사용할 준비가 끝났다..
사용하기
기본적으로 제공되는 4가지 함수가 있다.
-
useRecoilState() : useState() 와 유사하다. [state, setState] 의 구조로 선언하고 사용한다, 인자에 Atom.js 에서 선언한 값을 넣어준다.
-
useRecoilValue() : getter이다. 값을 set 할 필요 없이 참조하기만 하는 컴포넌트에서 주로 사용한다.
-
useSetRecoilState() : setter이다. 값을 get 할 필요 없이 변환하기만 하는 컴포넌트에서 주로 사용한다.
-
useResetRecoilState() : 전역상태를 default(초기값)으로 Reset 하기 위해 사용된다.
// component.js
// import 하는 방법.
import {globalState} from '../../Atom.js';
import {
useRecoilState,
useRecoilValue,
useSetRecoilState,
useResetRecoilState
}
from 'recoil';
const Component = () => {
// 선언하는 방법.
const [globalStates , setGlobalStates] = useRecoilState(globalState);
const getGlobalState = useRecoilValue(globalState);
const setGlobalState = useSetRecoilState(globalState);
const resetGlobalState = useResetRecoilState(globalState);
return(
// 리턴문
);
}위와같이 Atom.js 의 atom 객체를 import 하고
사용하고자 하는 recoil의 함수를 import 하여 사용한다.
기능과 사용법은 useState와 매우 유사하다.
참고한 글
