Recoil

아마 마지막이 될 SR을 하고 있었다.

 

저녁에 어떻게할꺼냐는 질문이 나왔다. 팀장님은 리덕스공부를 해야한다면서 리덕스 thunk이야기를 했다.

나는 지난 프로젝트때 리덕스 thunk없이 비동기를 처리했기때문에 (완벽하진 않았겠지만) thunk공부할 시간에 어서 진행하자고 했다.

팀장님은 고민하다가 혹시 recoil 아냐고 나한테 물어봤다.

나는 모른다고 대답하며 검색을 해보았다.

그리고 프론트3명사이에서 '오 이거 좋은데요??' 라는 말을 시작으로 오늘 저녁은 recoil 뭔지 알아보기로 하고 헤어졌다.

 

recoil은 redux처럼 state를 전역에서 관리할 수 있게 해주는 라이브러리이다.

 

산책을하고 8시에 돌아와 recoil을 알아보았다.

 

그리고 정말 이건 대단했다.

 

리덕스의 모든 귀찮은 과정을 빼면서도, state는 전역에서 관리할 수 있게 해준다.

 

1. redux보다 엄청나게 간편한 사용법

state하나 만들기위해 dispatch, useSelector, reducer,action 등을 작성해야하는 redux와 달리, recoil은 atom만 만들어 놓으면 useState와 같은 방식으로 관리할 수 있다.

 

2.  비동기처리를 위한 추가학습이 적다.

redux는 비동기처리를 위해 미들웨어를 기반으로한 thunk,saga등을 학습해야 하지만, recoil은 내장된 기능들을 불러오기만 하면 나머지는 내부에서 자동으로 처리한다!

 

예를들자면

import { useRecoilValueLoadable } from 'recoil';


function RecoilStarCount() {
	//recoil을 몰라도 걍 무시하자. 중요한건 3번줄이 아니다.
	const recoilStarCount = useRecoilValueLoadable(recoilStarCountState)
    
    //Loadable의 state에는 3가지 값이 있다.
    //hasValue(값 존재하는상태),loading,hasError(에러발생) 3가지 상태가 있다.
    if(recoilStarCount.state === 'loading'){
    //그냥 이렇게 적으면 로딩중일때, <Loading />렌더링하라는 뜻이다.
        return <Loading />
    }
    
    return (
        <div>
            <p>recoil github star 개수</p>
            //contents는 비동기통신의 결과값
            <p>{recoilStarCount.contents}개</p>
        </div>
    )
}

 

3. 캐싱지원으로 퍼포먼스 향상

 

 

 

일단 불러온값은 다시 비동기로 불러오지 않고, 저장하여 렌더링한다

 

따로 사용자가 저장할필요 없이 알아서 해주는 것이다

 

 

 

---

리코일 교과서

https://blog.woolta.com/categories/1/posts/209

react의 새로운 상태관리 라이브러리 recoil 에 대해 알아보기 - atom, selector