recoil

react를 사용 할때 다들 이러한 경험이 있을 것이다 1.부모 컴포넌트에서는 props 가 필요없지만 2.자식 컴포넌트에서 필요한 값을 위해서 0.조상 컴포넌트에서 1.부모를 거처서 2.자식컴포넌트로 props를 넘기는 경우를

이러한 경우 때문에 상태관리를 위한 여러 라이브러리가 존재한다.
상태관리 라이브러리를 사용하면 0.조상, 1.부모 컴포넌트를 거치지 않고 바로 2.자식컴포넌트에서 사용할 수 있다.

react에서 자체 제공하는 Context API와 대표적인 라이브러리 Redux, Mobx, recoil 중 recoil을 알아보자

Recoil의 특성

• 1. Reocil은 배우기 쉽다. API가 단순하고 react-hook과 비슷한 구조를 가지고 있어서 사용하는데 익숙한 느낌이 든다.
• 2. 컴포넌트가 사용하는 데이터 조각만을 사용할 수 있고, 계산된 selector를 선언할 수 있으며, 비동기 데이터 흐름을 위한 내장 솔루션까지 제공한다.

Reocil Atom

atom은 하나의 상태의라고 볼 수 있다. 컴포넌트가 구독할 수 있는 React state라고 생각하면 된다. atom의 값을 변경하면 그것을 구독하고 있는 컴포넌트들이 모두 다시 렌더링된다.

	export const todoListState = atom({
      key: "searchKeyword",
      default: 'reocil이란 뭘까?',
	})

• key: 고유한 키값
• default: 정적인 값

	const [search, setSearch] = useReocilState(todoListState)
    
    console.log(search) -> reocil이란 뭘까?
    setSearch('상태관리 해주는 라이브러리 입니다!')
	console.log(search) -> 상태관리 해주는 라이브러리 입니다!
    

• useRecoilState — atom의 값을 구독하여 업데이트할 수 있는 hook의 useState 와 동일한 방식으로 사용할 수 있다.

• useRecoilValue — setter 함수 없이 atom의 값을 반환만 한다.

• useSetRecoilState — setter 함수만 반환한다.

Reocil selector

import { atom, selector } from "recoil";

export const todoListState = atom({
    key: "todoListState",
    default: [{
    	title: "아침밥먹기",
      	id: 1,
        isCompleted: false
    	},
        {
    	title: "점심밥먹기",
      	id: 2,
        isCompleted: false
    	},{
    	title: "저녁밥먹기",
      	id: 3,
        isCompleted: false
    	}     
    ]
})

// 할일 필터링 목록
export const todoListFilterState = atom({
    key: "todoListFilterState",
    default: 'Show All',
})
//  파생된 할일 필터링 목록
export const filteredTodoListState = selector({
    key: "filteredTodoListState",
    get: ({get}) =>{
        const filter = get(todoListFilterState);
        const list = get(todoListState);

        switch (filter){
            case 'Show Completed':
                return list.filter((item) => item.isComplete);
            case 'Show unCompleted':
                return list.filter((item) => !item.isComplete);
            default:
                return list;
        }
    }
})

• selector — seletor는 상태에서 파생된 데이터로, 다른 atom에 의존하는 동적인 데이터를 만들 수 있게 해준다

다음은 selecter를 활용한 비동기 데이터 통신에 대하여 알아 보겠다.