React에서 데이터의 흐름은 단방향으로 만흐른다
State vs Props: Props와 다르게 내부에서 수정될 수 있는 값이 스테이드다! 컴포넌트 내부에서 변화하는 값이 상태이다
상태는 무엇? 컴포넌트 내에서 변화할 수 있는 값
예를들어 갯수를 추가하고 빼는것 ==>추가하고 빼는 버튼에 상태가 들어가야함
그런데 다른 페이지에서 이 컴포넌트를 보여주고싶다면 내리고내리고 내려야함….
Atom
공중에 떠있는 상태
리코일에서 상태의 최소단위
Selector
아톰을 기반으로 파생된 데이터
사용법 (장바구니 만들기)
*Presentational Component :
자체적으로 상태를 가지지 않고 부모 컴포넌트로부터 받아서 표시만 해주는 컴포넌트
1.
리코일 설치 명령어 npm install recoil
2.
Recoil Root 컴포넌트 작성 : 최 상단에 작성하기 ==> 아톰이 떠있을 곳에
<RecoilRoot></RecoilRoot>
index.js에 감싸주면됨
*전역상태 관리는 한곳에 모아서 관리해주면 유지보수에도 좋기 때문에 폴더 따로만듬
3.
Atom.js 만들고 두 가지 속성 적어주어야함
- key : 아톰의 이름, 전역적으로 유일한 이름 값이어야 함
- default : usestate초기값과 같음
4.
Atom부르기 : useState에 Recoil만 붙이면 됨
useRecoilState(사용할 아톰)
* 장점 state와 setState값을 따로 불러와서 쓸 수 있음
- value만 쓰는 경우
const state = useRecoilValue(‘값’)
- set 함수만 사용하는 경우
const setState = useSetRecoilState(‘값’)
배열, 객체를 다룰 때는 사용하는 메서드가 원본배열을 훼손하진 않는지 꼭 살필 것! : […] 사용하기
5.
Selector 사용하기
const Selector = selector({ key : ‘키값’, get: ({get}) => { const원본 = get(아톰) return 원본변형값 }
})
*리코일 관련 익스텐션 사용하면 바로 쳐짐
*셀렉터는 순수함수 : 같은 인풋이 들어오면 같은 인풋을 리턴하고, Side Effect가 존재하지 않는 함수
