전체적으로 state가 일괄적으로 사용될 수 있도록 하기위해
부트캠프에서 recoil을 배웠다.
그런데 이력서를 쓰려고 보니 recoil 보다 redux나 mobx가 많이 조건에 있었고
원티드 프론트엔드 챌린지에서 다른 참여자의 코드 리뷰를 할때 redux-saga를 사용하는 것을 많이 볼수 있었다.
그러다보니 내가 배운 recoil과 redux,mobx의 차이가 뭐지? 뭐가 더 좋은거지? 하던 나의 궁금증을 위한 정리...
Redux
로고 개이뿌덩...
https://www.freecodecamp.org/news/what-is-redux-store-actions-reducers-explained/
View-> Action -> Dispatcher -> Reducer-> Store =>View
의 단방향 구조
리액트를 위한 라이브러리가 아니라 js를 위한 라이브러리이며
리액트에서 쓰기위해서는 react-redux를 사용해야한다.
리덕스를 사용하기 위해선 별도의 개념들에 대한 이해가 필요하다.
view
사용자가 행동을 하는 곳, 조회를 할 수 있는 곳
dispatch
action을 발생시키는 것으로 action을 파라미터로 받아온다.
action
문자열을 가진 자바스크립트 객체.
액션 객체를 가지고 있고 반드시 type필드가 필요하다
사이드 이펙트(매개변수가 아닌 다른값으로 인해 반환값이 바뀌는 것)가 일어나지 않도록 순수함수로 코딩하여야한다.
action만 가지고도 상태가 어떻게 변할지 예상이 가능하다
reducers
action의 결과를 받아와서 state를 변경시킬 코드를 정의시키는 부분
Reducer가 현재 상태와 전달받은 액션을 이용하여 새로운 상태로 반환한다.
리듀서는 순수함수로 파라미터외의 값을 의존하지않고 이전 상태를 변경하지 않으며 새오누 상태 객체를 반환해야한다.
store
프로젝트당 단 한개의 store만 존재하는 유일한 저장소
store를 통하여 상태의 중앙화를 하여 한곳에서만 관리를 한다.
redux 특징
- 상태를 읽기 전용으로 취급한다. (읽기 전용이기에 이전상태로 돌아가기 위해서는 현재 상태에 덮어쓰기만하면 된다)
- flux 아키텍처를 따르기에 단방향 데이터 흐름이다
- flux 아키텍처: Facebook에서 개발한 단방향 데이터 흐름을 가지는 아키텍쳐. 새로운 데이터를 넣으면 처음부터 다시 시작된다 - Rudex Undo 라이브러리를 통해 실행 취소도 가능함
- dispatch관리를 위해 redux-thunk와 redux-saga와 같은 미들웨어가 필요
- 사용하기 위한 러닝커브가 높다.
- action을 위한 코드량이 많음
- redux만의 특징을 강요하기에 오히려 코드가 복잡하거나 어려워질수 있다.
Mobx
Redux에 비해 간결하고 깔끔한 구조를 가진 상태관리 라이브러리
상태변화가 일어나는 부분을 자동으로 추적해준다.
Derivations(Computed values)
기존의 상태에서 변화에 따라 파생된 값
Action
상태를 변경시키는 action
action으로 발생하는 변화들이 Derivations와 Reactions로 처리된다
State(Observable State)
State 변화가 일어나면 Reactions과 Derivations가 발생된다
Reactions
State의 변화로 인한 변화를 의미. 값이 바뀜에 따라 해야할 active이다.
Derivation처럼 값을 생성하지는 않고, 보통 I/O(컴퓨터와 데이터를 주고받는 연산이나, 프로그램 또는 장치)와 관련된 일을 함
Mobx 특징
- 객체 지향적이다
- store의 제한이 없다
- Observable를 디폴트로 사용하고 필요한경우에만 state를 변경
- 추가적으로 설치해야하는 라이브러리가 없다
recoil
내 지붕이 된 나의 구원자
Recoil은 react를 만든 페이스북에서 만든 상태관리 라이브러리
같은 곳에서 나왔으니 좀더 react에 잘맞는..? 그런 느낌적인 느낌느낌
context API 기반으로 구현된 함수형에서만 사용이 가능하며
context-api의 단점인 업데이트가 되지않은 state의 리렌더 현상을 보완할수 있음
atom
- recoil의 상태 단위. 하나의 컴포넌트에 하나의 atom을 참조함
- atom 이 변경되면 컴포넌트가 변경되어 전체가 리렌더되어 변경된다.
- ReacoilState를 이용하여 조회와 변경을 한다
- 따로 atom 파일을 빼지 않고 사용할수도 있음
selector
- atom으로 입력받는 순수 함수
- atom 과 동일한 인터페이스로 대체하는 것이 가능하다
- Recoilvalue를 통해 조회가 가능하다
recoil 특징
장점
- 비동기 처리를 기반으로 Redux와 달리 다른 미들웨어 불필요
- Redux 보다 짧은 코드
- 하나의 데이터 플로우로 간단한 구조를 가지고 있다.
- 러닝커브가 앞의 두개의 라이브러리보다 비교적 낮음
단점
- 상태를 부모 요소까지 끌고와서 공유하는 것이기에 전체 리렌더가 될수도 있다
- context는 단일값만 저장 가능하고 여러 값을 담는 것은 불가능하다.
Redux Mobx 그리고 Recoil127
기존 redux의 불편함을 개선한 Mobx 그리고 그 두개의 문제를 개선하기 위한 recoil...
Recoil이 상대적으로 러닝커브가 낮고 react를 React답게 사용할수 있기에
아마 부트캠프에서 우리에게 가르쳐준게 아닐까? 라고 생각이 든다.
아직 많이 사용하지 않아서 참고 할 레퍼런스 코드가 매우 적고,구인 공고글에서 확인하긴 어려운 라이브러리이지만 너무나 사용하기 쉽고 페이스북에서 만들어진 라이브러리인만큼 차후 활용이 많이 될 것이라 믿는다...!!
그래도 Redux도...추가적으로 공부해야겠지..
