탕스로그

Recoil 과 Redux 중 뭘 쓰면 좋을까? 본문

Front-end

Recoil 과 Redux 중 뭘 쓰면 좋을까?

taaang 2023. 5. 2. 10:14

이제까지 내가 한 프로젝트는 전역상태관리를 모두 다르게 진행했다. 간단하게 말해보자면,

 

1. 토이프로젝트 / Redux

사용이유 )

그 당시 팀 내 프론트엔드 리드님이 Redux만 써보셨는데, 다른 팀원들이 다 프론트엔드 입문자여서 리드님을 따라감..

별 이유는 없지만 그 당시에선 이게 최선이었던 것 같다. 상태관리보다 일단 페이지 완성이 최우선이었던 작고 소중한 첫 프로젝트..

 

2. 동아리 웹페이지 / 전역상태관리 안함

유저가 로그인하는 곳이 딱히 없었고 전역관리를 해야할 정보가 딱히 없었다.

그때그때 서버에 요청해서 필요한 리소스를 받아오고 그걸 바로 사용했다. 

불필요하게 전역상태관리를 할 필요가 없다고 생각되어 안했는데, 잘 한 선택인 것 같다.

 

3. CEOS 16기 스터디 과제들 / Recoil 

사용 이유 )

Redux를 쓴지는 오래고.. 써봤다고 다시 써보기도 싫고 뭔가 새로운 도전이 필요했다.

그 와중에 이전 기수에서 Recoil을 사용해서 과제를 한 것을 발견했고 Redux보다 훨씬 간단하다 싶어 바로 도전했다.

대표적으로 3주차 미션 : react-messanger 에 적용했고 이를 여기에 정리하기도 했다.

 

4. CEOS 프로젝트 Finble / Redux + Redux Toolkit

사용 이유 )

Redux Toolkit은 Redux 개발팀이 Redux를 좀 더 편리하게 사용할 수 있도록 개발한 도구이다. 자기들도 보일러 플레이트 코드가 엄청나다는 걸 인지했나보다. 아무튼 Redux를 편하게 쓸 수 있다니 바로 써봤던 것 같다. 결과는 대성공!! 예전에 Redux만 사용하던 것보다는 확실히 편하다고 느껴졌다.

 

📌 그래서, 뭘 쓰면 좋을까?

1. 작성해야하는 코드의 양

의 측면에서 살펴보면, Recoil이 압승한다.

 

Redux Toolkit이 아무리 Redux의 사용을 편하게 해주었다고 하더라도 configureStore을 통한 스토어를 설정해주어야 하고 slice를 작성해서 스토어에 넣어주어야 한다. 이 때 slice도 파일 단위로 작성해서 스토어에 넣어주어야 한다. 그리고 slice 내에는 초기값과 그 초기값을 바꿀 수 있는 reducer들도 따로 적어주어야한다.

 

그에 비해 Recoil은 코드를 작성하는데 있어 자유도가 높다. store에서 atom을 이용해 상태를 정의하고 다른 파일들에서 useRecoilValue, useRecoilState 으로 atom 값을 가져오고 업데이트할 수 있다. Redux에서 일일히 Reducer를 작성해주어야 했던 것과 비하면 상당히 편하다고 느껴진다. 

 

2. 비동기 처리

Recoil은 Selector을 이용해서 비동기처리를 할 수 있다. 자체적으로 비동기처리를 할 수 있다는 얘기다. 그러나, Redux는 redux-thunk, redux-saga, redux-toolki과 같은 라이브러리들을 추가로 설치해야한다. 

 

3. 디버깅 툴

이 부분은 아직 내가 체감을 하지 못한 부분이긴하다. 그러나 새롭게 알게 된 사실이 있어 정리해보려고 한다. Redux는 Redux Devtools라는 툴을 제공한다고 한다. 그러나 Recoil은 딱히 개발툴이 없다. 이 공식문서를 보면 뭔가가 개발되고 있는 것 같기는 한데 음.. 구글링을 통해 본 여러 글에서도 이 공식문서와 같이 Snapshot을 언급하고 있긴한데 현업 개발자들은 'Snapshot을 쓰느니 차라리 콘솔로그를 쓴다' 는 내용들을 보니 어지간히 별론가보다. 이건 이번에 새로 시작하는 프로젝트에서 차차 실험해보고 따로 글을 파보는걸로!!

 

정리하면서 너무 Recoil을 편애했나 싶긴 한데, Redux가 개발도구가 잘 되어있다는 걸 빼면 Redux의 매력을 잘 모르겠어서 어쩔 수 없다. Recoil의 매력은 정말 간소하다는 것...? atom, selector 개념을 기반으로 모든 기능을 다 이해할 수 있어서 매력적이라고 느껴졌다. 그에 비해 Redux는 액션, 리듀서, 디스패치... 여기서 이만 줄이겠다.

 

아무튼, 당분간은 더 매력적인 기술 스택을 발견할 때까지 Recoil을 애용할 것 같다 ㅎㅎ

'Front-end' 카테고리의 다른 글

[오류해결] Next.js에서 반응형 웹 만들기  (1) 2023.06.21
모노레포(Monorepo) 구축기  (0) 2023.02.16
Comments