// 아래와 같은 atom이 있다고 해볼게요
const EnglishSpellState = atom({
key: 'EnglishSpellState',
default: 'A',
})
// selector는 selector()함수를 이용하면 됩니다.
const EnglishSpellLabelState = selector({
key: 'EnglishSpellLabelSizeState',
get: ({get}) => {
const spelling = get(EnglishSpellState);
return `This is ${spelling}`;
}
}
JavaScript
복사
이전 페이지에서 atom과 selector라는 핵심 개념에 대해 알려주었습니다.
이번엔 사용법에 대해 적어볼게요
const EnglishSpellingLabel = () => {
const [spelling, setSpelling] = useRecoilState(EnglishSpellState);
const EnglishSpellLabel = useRecoilValue(EnglishSpellLabelState);
return (
<label>{EnglishSpellLabel}</label>
);
}
JavaScript
복사
이런 방식으로 사용가능합니다.
Recoil의 큰 장점 중 하나는,
ReactJS의 useState()와 매우 유사해서 응용하기가 쉽다는 겁니다
리덕스는 너무 복잡해..
useRecoilState는 useState처럼 써주시면 되고,
useRecoilValue는 함수명처럼 Value만 사용하는 함수라서 변수명이 하나입니다.
이로써 모든 내용을 살펴봤습니다.
간단해서 리덕스보다 사용하기가 너무 좋습니다.
하지만 리덕스는 기업들에서 많이 사용하므로 사용하기 불편하다고 공부를 소홀히 하지 마세요