React.js:

Recoil에 데이터 저장하여 활용하기

칠일오.

저번 글에서 Recoil에 대해 간략히 학습을 해보았는데, 오늘은 실제로 프로젝트에서 적용하고 활용한 방법에 대해 작성해보고자 한다.

 

가장 먼저 'recoil' 폴더를 만들어서 atom만의 파일을 만들어서 분리 작성하였다.

아래 코드처럼 작성하였다. 이때 default에는 우리가 사용할 데이터를 직접적으로 넣어주어서 사용하였다.

👀 반짝 Tip
default에 데이터를 직접적으로 넣어주어 타입이 결정되도록 할 수도 있고, 또는 명시적으로 문자열인지, 배열인지 리터럴로 작성할 수도 있다.

이제 사용할 컴포넌트로 가서 사용하면 끝이다.

import lineAtom from '../recoil/atoms';

const lineDatas = useRecoilValue(lineAtom);

 

일일이 넘겨주는 번거로운 작업 없이 데이터를 저장해서 간편하게 리코일로 꺼내쓸 수 있어 작업 효율성이 높아져서 이보다 더 적극적으로 활용해보고 싶다는 생각이 들었다. 그럼 다음 글로 찾아오겠다!