[Recoil]리코일 사용하기

리액트의 상태관리

리액트는 단방향 데이터흐름을 갖는다.부모에서 자식으로만 데이터를 props로 전달할 수 있고

자식이 갖는 데이터는 부모에게 전달할 수 없다.

그래서 공유할 상태를 부모 컴포넌트에서 선언하고 상태 변경 함수인 setState를 자식 컴포넌트에게 props로 전달하여

수정을 할 수 있도록 상태 끌어올리기를 수행하거나, 추가 라이브러리를 사용하여 상태관리를 한다.

가장 대표적인 라이브러리로 Redux가 있다. 하지만 상태 하나를 관리하기 위한 boilerplate코드가 많이 사용된다.

그래서 이번에는 배우기 쉽고 간단한 Recoil에 대해서 상태관리를 해본다.

 

리코일

• 페이스북에서 만든 리액트 상태관리 라이브러리
• 리액트 문법에 최적화되어있다. 
• 다른 상태관리 라이브러리에 비해 쉽게 배울 수 있다.
• 비동기 처리를 추가적인 라이브러리 없이 Recoil만으로도 가능하다.

 

리코일 사용하기

1.RecoilRoot 생성하기

루트 컴포넌트에 RecoilRoot가 필요하다. RecoilRoot 하위에 있는 컴포넌트들은 atom에 접근이 가능하다.

 

2.atom 생성하기

• Recoil에서 하나의 전역 상태인 atom은 상태의 단위이다.
• atom이 업데이트 되면 해당 atom을 구독하는 모든 컴포넌트들도 새로운 값으로 리렌더링 된다.
• atom 함수를 통해서 atom을 생성할 수 있고 atom은 key와 default 값을 갖는 객체를 매개변수로 받는다.

const todoList = atom({
  key:'todoListState',
  default:[],
})

고유한 key 값을 이용하여 atom을 구분하고, default로 atom의 기본 값을 지정한다.

 

3.atom을 사용하기

atom을 불러올 때 사용하는 hooks는 useState와 매우 유사하다. 

//atom의 값만 사용할 경우
const todoList = useRecoilValue(todoListState);

 

 

//atom의 setter함수만 사용할 경우
const setTodoList = useSetRecoilState(todoListState)

//value와 setter함수 모두 사용할 경우
const [todoList,setTodoList] = useRecoilState(todoListState)

 

 

 

 

https://recoiljs.org/