Recoil, 서당개도 입학과 동시에 할수있는 상태관리

 

프런트 회사 공고를 보면 (24년기준)

많은 회사들이 리덕스를 아직 사용중이다.

개인적으로.. 너무 싫다. 뭐 하나 만들려고 하면 아주 난리다. 

처음에 코드를 볼때도 무슨 기능인지 

타고타고타고타고~  아...**

벌써 아찔하군

 

요즘  상태를관리하는 여러 방법이 나왔다.

한번씩 다들 써보면서 "나 이거써봄~" 할 수 있는 멋쟁이가 되어보쟈.

그 중에 Recoil에 대해서 살포시 알아보도록 하쟈!

(그리고 이지피지한 사용법 뒤에 가려진 어두운면까지..)

 

 

Recoil에서는 하나의 상태를 [atom]이라고 부른다.

그리고 그 atom을 호출해서

atom의 값을 쓰거나 값을 수정해준다.

사용 방식은 아래와 같다.

 

      <RecoilRoot>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </RecoilRoot>

App.tsx에서 

일단 <App />컴포넌트를 <RecoilRoot>로 감싸준다.

( yarn을 통해서 recoil을 받아주는것 잊지 마시구)

export const totalPrice = atom<number>({ 
  key: 'totalPrice' , 
  default: 14 , 
});

그리고는 따로 파일을 만들어서

사용하고자하는 atom을 만들어준다.

(atom폴더를 따로 관리하는 것도 좋을것 같다 - 사견)

key는 해당 atom을 분간하기 위해서 사용하고,

default에 디폴트 값을 넣어준다.

string, number, array, object 타입이 뭐든 상관없다.

해당 타입은 atom옆에 <>로 넣어주면 된다.

 

const [price, setPrice] = useRecoilState<number>(totalPrice);

 그리고 원하는 페이지에서 useRecoilState관련 선언을 해준다.

 

순간 뭐랑 비슷? 맞다

useState과 상당히 유사하다. 

앞에 price는 상태값

setPrice는 상태 변경함수,

그리고 totalPrice는 atom파일에서 선언한 값을 가지고 오면 된다.

 

useState를 사용해서 상태 값을 관리해줄때는

컴포넌트를 통해서 값과 set함수 둘다 넘겨주는 노고를 했어야했다.

특히나.. 저 멀리 부모 컴포넌트에서 사용하는걸..

여러단계 아래에 있는 자식컴포넌트가 사용한다면?

...수많은 props에 태워줘야한다. (+ set함수 타입 검색까지 ..)

 

반면 Recoil을 사용한다면 사용하는 컴포넌트에서

위 한줄만 딱 선언해주면

언제 어디서든 값에 도달하고 수정할 수 있다! 홀리몰리

 

---

 

 

이제 앞으로 Recoil로만 개발하면 되겠다 ^오^

으림없는 소리!!

이 표보터 보자,

 

 

https://npmtrends.com/jotai-vs-recoil-vs-zustand 해당 페이지에서 얻은 정보다

이 페이지는 패키지들의 다운로드 횟수를 수치화해서 보여준다.

요즘 트랜디(?)한 상태관리 친구들 3개를 비교해보면

이제 고개를 조오~금 들고는 있지만

저 위에 zustand라는 친구가 굳건이마냥
압도적인 다운로드 횟수를 보여준다.

 

물론 많이 사용한다고 좋은 라이브러리라고 확정지을 수는 없지만

업데이트 주기까지 보면..녜에 ^^

 

또한 개인적으로는 SSR이 많이들 주목받고 있는 현 시점에

 Recoil은 클라이언트 사이드에 최적화 되어있기에

엄청나게 많은 사랑을 받지 못하는게 아닌가 싶다.

 

---

 

하지만 개인 프로젝트나 작은 프로젝트에서 사용하기는

간단한 사용법을 필두로 좋은 역할을 할수있지 않을까 하는 생각은 변함없다.