해당 과제를 진행하기위해 상태관리 라이브러리를 결정해야했고, 상태관리라는 개념 자체도 잘 이해되지않지만, 하나씩 풀어가며 왜 사용해야하고 나는 어떤 스택을 선택했는지에 대해 풀어 보고자한다.
1. 상태관리 라이브러리란 무엇일까?
리엑트에서 사용하는 유동적인 데이터를 담는 변수인 state를 전역적으로 관리하고자 사용하는 툴을 의미한다.
왜 전역적으로 관리해야하나 ?
react에서는 상태관리 라이브러리를 사용하지 않으면 props drilling 을 통해 부모 컴포넌트에서 자식 컴포넌트로 전달해야한다. 이 문제를 해결하기 위해서, 상태관리 라이브러리를 사용해 모든 컴포넌트에서 props drilling 이 아닌 방식으로 state를 사용할수있게 된다.
2. 기술스택 선별
이제 상태관리 라이브러리에 대한 기술스택을 골라보자.
Recoil
Jotai
Zustand
Redux
MobX
Valtio
React-query
SWR
상태관리 라이브러리는 너무나도 많다. 하지만 나는 뉴비이기에 너무 학습곡선이 높다면, 해당부분을 학습하는데에도 버거움을 느낄것이라고 판단하였다, 때문에 몇가지 기준을 두었다.
a. 공식문서가 깔끔하고,예제가 잘되있는것.
b. 라이브러리를 사용할때 사용성이 직관적이고, 가독성이 떨어지지 않을것.
c. 내가 이해가 되는것.
d. 사람들이 주류로 쓰는 기술
Recoil
https://recoiljs.org/
Recoil은 페이스북에서 서포트하는 라이브러리이다
일단 이부분이 매우 유의미하다고 본다. 리엑트 역시 페이스북에서 서포트하는 라이브러리이기에 리엑트에 맞게끔 빠르게 업데이트를 시켜줄거라는 것, 대기업이라는 것, 공식문서가 깔끔하고 가독성이 좋고, 내가 이해하기에도 벅차진 않았다.
recoil의 장단점
Recoil을 사용하면서 마주치는 문제: 예측하기 어려운 전역상태 변경
Recoil의 장점은 손쉬운 전역상태 관리이다
어느 컴포넌트라도 전역상태에 직접 접근하여 상태를 업데이트할 수 있다
이 기능은 장점이면서 또 단점이기도 하다. 왜냐하면, 어느 컴포넌트가 언제 전역 상태를 변경하는지 알 수 없기 때문이다.
Jotai
https://github.com/pmndrs/jotai
Zutand 만든 팀이 만듦.
공식문서가 잘되있음
예제가 엄청 쉽다고 느껴짐.
zustand 만큼이나 친철하게 설명되어있고, 사용하는 방법도 간단해보인다.
Jotai 장단점
최소한의 API
TypeScript 기본 내장
작은 번들 크기
많은 추가 유틸리티 및 공식 통합
리액트에서만 사용 가능
Next.js 및 React Native 지원
atomic한 상태 관리 방식으로 구성
Zustand
https://github.com/pmndrs/zustand
엄청 심플하게 사용할 수 있음.
store을 컴포넌트와 분리하여 state, get, set 등의 액션까지 한번에 관리가 가능함.
프로젝트 규모가 커질수록 관리가 용이.
내장 메서드를 이용하여 스토리지 사용 가능.
state에 대한 액션에 대해 네이밍 가능등 여러가지가 있었지만, 비교적 레퍼런스도 많고 내가 이해하기에도 쉽다고 느껴진다.
Zustand장단점
typescript로 작성
리덕스를 축소화시킨 느낌으로 리덕스와 유사함
스토어 형태
provider 필요없음 -> 앱을 래핑하지 않아도 되기 때문에 불필요한 리렌더링 최소화
Redux
https://github.com/reduxjs/react-redux
리덕스는 현재 조금 지난기술이라고 강사님이 말씀도 해주셨고, 기술적인 난이도도 높아 패스하기로 했다.
관련글을 보니 현재 리덕스를 쓰는 강점도 없어졌고 다른 상태관리 툴 들이 나오면서 점점 사용하지 않는 추세인듯하다.
Redux장단점
장점.
1) 단방향 모델링(한가지 방향으로만 바뀐다)임. action을 dispatch 할때마다 기록(history)이 남아 에러를 찾기 쉽다. 타임머신 기능을 사용할 수 있음
2) 상태의 중앙화 : 스토어(Store)라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리하는데, 이를 중앙화라 함. 전역 상태를 관리할때 굉장히 효과적
3) Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 됨. 이런 식으로 실행 취소 기능을 구현.
단점.
1) 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션등을 미리 만들어놔야함)들을 필수로 만들어야하여 코드량이 늘어난다.
2) 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 함
3) Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않습니다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 합니다. 이를 예방하기 위해 Immutable.js같은 라이브러리도 존재합니다.
4) 다른 것 다 필요 없고 상태 관리를 중앙화하는 것만 있어도 된다면 Context API 를 사용
MobX
https://mobx.js.org/
Redux와 또 다른 상태 관리 라이브러리이다. 기본적으로 객체지향 느낌이 강하며 (Redux와 달리) Component와 State를 연결하는 번잡한 보일러플레이트 코드들을 데코레이터 제공으로 깔끔하게 해결한다.
데코레이터에 대한 이해 + observable이라는 부분에 대한 개념이 익숙치않아서 일단은 다른 좋은 상태관리 툴이 있는데, MobX 를 꼭 사용해야한다는 이점을 느끼지 못했다.
MobX장단점.
-
객체지향적
mobx는 객체지향적으로 class를 사용할 것을 권장한다. -
데코레이터
데코레이터를 제공하기 때문에 좀더 깔끔하게 구성이 가능하다. -
캡슐화
state의 변경을 오직 메서드를 통해서만 변경할 수 있게 설정이 가능하다. (privite)
단점
1. 디버깅이 불편하다Permalink
리덕스와 같은 툴이 마땅히 없기에 디버깅을 위해서 console.log를 이용해야 한다.
-
데코레이터
Class 형으로 컴포넌트를 구성했다면 데코레이터는 장점이 될 수 있지만 함수형으로 구성했다면 단점이라 생각한다. 함수형에서 데코레이터를 사용하기 위해서는 useContext hook을 이용해야하며 컴포넌트에 연결하기 위해 hoc로 랩핑해야 한다. -
레퍼런스
레퍼런스 코드가 부족하다. 특히 함수형의 경우 정말 찾아보기 힘들다
Valtio
https://github.com/pmndrs/valtio
공식문서를 봤는데 proxy와 useSnapshot이라는 개념이 크게 와닿지 않고 다른상태관리 툴에 비해 약간 마이너한 느낌이 들어 사용하고 싶지 않다.
React-query
https://github.com/TanStack/query#readme
리엑트 쿼리가 대세가 되가고 있단 소식은 간간히 , 커뮤니티 및 유튜브로 접해서 알고있었다.
너무 좋은건 알지만, 내가 다른 스택과 병행해서 학습하기에는 어렵다고 느껴, 해당 프로젝트에서는 사용하지 않는것으로 결정했다.
React-query 장단점
캐싱
get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get하는 api를 자동으로 실행 )
데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries)
동일 데이터 여러번 요청하면 한번만 요청한다. (옵션에 따라 중복 호출 허용 시간 조절 가능)
무한 스크롤 (Infinite Queries (opens new window))
비동기 과정을 선언적으로 관리할 수 있다.
react hook과 사용하는 구조가 비슷하다.
공식문서가 너무 깔끔하고 어떤기능을 제공하는지도 상단에 표현되어있어, 한글번역도 잘되어있어 공식문서페이지중 제일 마음에 들었다.
SWR 장단점
-
Cache
Stale-While-Revalidate 의 줄임말로 백그라운드에서 캐시를 revalidate(재검증) 하는 동안에 기존의 캐시 데이터를 화면에 보여준다.
그래서, 도중에 api가 에러를 반환하더라도 캐시된 데이터를 활용할 수 있다.
즉, 좋지않은 데이터로 인해 일어나는 불필요한 렌더링을 막아준다. -
중복제거
불필요한 api 호출을 막음
SWR은 전역캐시를 이용해 모든 컴포넌트 사이에 데이터를 저장하고 공유한다. 그러므로, 불필요한 네트워크 요청을 생략한다. -
깊은 비교
SWR은 데이터 변경에 대해 깊이 비교합니다. swr이 주는 data값이 변경되지 않았다면 리렌더링을 야기하지 않습니다. -
자동갱신
원하는 시점에 맞추어 새로운 데이터를 갱신할 수 있다.
나열하고 보니 모두 좋아보인다. (..큰일이다)
최근 트렌드를 좀 확인해보자
react-redux 가 압도적으로 1위고 zustand와 react-query 가 각각 2위와 3위를 하고있다
stars수는 react-query가 zustand보다 높은 상황 이다.
3. 결론
내가 비교적 이해하기 쉬우며 대세인, zustand가 내 포트폴리오를 원활히 끝마치는데 편할거 같다라는 결론을 내렸다.
