Published 2022. 6. 28. 16:38

상태관리 라이브러리

개요

리액트에선 상태(state)를 관리한다고 하는데, 이 상태라는 것은 변수라고 하기도 하고 데이터라고 하기도 하는 것으로 이 상태를 컴포넌트 구조(일종의 규격 , 박스)를 만들어 이것을 웹 페이지에 보여주는 것이 리액트의 개발방식입니다.

이렇게 컴포넌트구조를 만들어 개발하게 된다면 상위 컴포넌트에서 쓰던 상태, 변수, 데이터라는 것을 하위 컴포넌트에 넘겨주는 일이 매우 빈번하게 발생합니다

위 이미지에서 예시로 들면 메뉴 컴포넌트에서 현재 메뉴가 열려있는지 닫혀있는지에 관한 변수(state → 메뉴오픈 true / false)가 있다고 할 때, 이 변수에 따라 글자 컴포넌트의 text 색깔이 검정색에서 하얀색으로 바뀌어야 한다고 한다면 개발자는 메뉴 컴포넌트에 메뉴오픈 값을 글자 컴포넌트에게 넘겨주고 이 값을 통해 글자 색을 변경시킬 것입니다.

이러한 것을 상위 컴포넌트에서 하위컴포넌트로 props를 넘겨준다 혹은 전달해준다고 말할 수 있습니다.

다시 돌아와서 위 예시처럼 props를 전달하는 것이 한 단계만 거치면 크게 문제가 없어보이지만 아래 이미지처럼 규모가 커지면서 여러 단계를 거치게 되면 props를 계속 아래로 전달해줘야 하는 번거로움(props drilling)과 하위 컴포넌트에서 선언된 것들이 위에서도 사용되어야할 경우(흔한 경우는 아님) , state 변경이 오류없이 관리되어야 할 경우에 이러한 상태 관리 라이브러리들을 사용한다면 쉽게 해결할 수 있게 됩니다.

자주 사용되는 라이브러리들

어떤 라이브러리가 좋을까

처음 자료를 조사하면서 가장 먼저 생각난 곳

스타트업들의 기술 스택과 기술 블로그를 한눈에 살펴보세요 | 코드너리

네이버, 카카오, 토스, 당근마켓과 같이 요즘 핫한 스타트업은 어떤 기술 스택을 사용하고 있을까요? 코드너리에서 국내 100개가 넘는 스타트업의 기술 정보를 확인하세요.

www.codenary.co.kr

GraphQL( GraphQL은 API를 더욱 빠르고 유연하며 개발자 친화적으로 만들기 위해 설계되었습니다 → 서버의 상태를 관리하는 Apollo = 밑에서 후술 )
Vuex(Vue.js에서 사용됨)

Redux

https://redux-toolkit.js.org/

Redux Toolkit | Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development

redux-toolkit.js.org

기본적으로 Javascript application들의 state(상태)를 관리하는 라이브러리

특징적으로는 React( 단방향 바인드 = 부모→자식 )와 많이 사용하면서 유명해졌으나, React에서만 사용되는, 현재 리액트에 의존하는 라이브러리는 아닙니다. 따라서 Angular, Vue.js, Vanilla JS 등 JS 언어내의 여러곳에서 사용가능합니다.

Redux를 알아보기 위해

최근 Redux의 평가

훅 기반의 API 지원이 가속화되고 React Query, SWR 등 강력한 데이터 패칭과 캐싱 라이브러리를 사용하면서 리덕스 사용이 줄어드는 방향으로 프론트엔드 기술 트렌드가 변화하고 있다고 생각합니다. → 서버에서 데이터를 Fetch해서 오고 이러한 데이터를 React Query, SWR에서 따로 저장해두면서 기존 Redux에 역할이 축소되었습니다.

( 참고 : React-Query , SWR 등은 서버의 상태를 다룸 (그 중에서도 REST API 방식의 데이터). Redux , MobX, Recoil 등은 클라이언트의 상태를 다루는 차이가 있다 )

⇒ 서버로 부터 받은 데이터들을 (서버의 상태를) 다루기도 하고 클라이언트 상태에서 props로 하위 컴포넌트에게 전달하는 번거로운 부분들을 많이 없애준다 → 이러한 것들을 Redux도 확장기능을 통해 제공해왔다.

서버의 상태를 다룬다는 것은 이러하다.

https://velog.io/@syoung125/React-React-Query-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC

[React] React-Query 라이브러리 살펴보기

Fetch, cache and update data in your React and React Native applications all without touching any "global state".React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속

velog.io

그래도 Redux를 사용하는 이유

Redux는 Redux Tool Kit → RTK가 있는데

기존 Redux에 단점을 없애고 다양한 기능들을 제공하면서 사용하는데 있어 훨씬 쉽게 사용할 수 있게 해줍니다. Redux팀에서도 Redux의 어려움을 알고 Redux Toolkit을 사용해줄 것을 권장하고 있다고 현재 Redux에서 관리중인 데이터들을 웹에서 확인하는 다양한 기능들과 추가적인 라이브러리를 제공해줍니다

ex) redux-saga , redux-thunk 등등등

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

Redux DevTools

Redux DevTools for debugging application's state changes.

chrome.google.com

장점 : 우선 사용되는 곳이 많아 자료가 엄청 많고 이에 따라 개발자 친화적인 다양한 기능들까지 발전했습니다.

단점 : 많이 어렵습니다. 러닝커브가 높다. 쉽게 말해 배우는게 어렵지만 현재 쓸 수만 있다면 잘 써먹을 수 있다고 이해했습니다. 하지만 이러한 단점 뿐만 아니라 액션 타입, 액션 생성함수, 리듀서, 스토어 등등 만들어야하는 파일들과 이러한 것들을 정리할 폴더구조가 규모가 커질 때 상당히 복잡해질 수 있고 매번 파일을 만들때 마다 신경써야하는 부분이 많다는 단점이 있습니다.

Recoil

Redux와 마찬가지로 클라이언트 상태 관리 라이브러리로써 현재로는 Mobx보다도 조금 적게 사용되고 있습니다. 그럼에도 Recoil을 가져온 이유는 Recoil이 Redux와 대비되어 장점과 단점이 명확하기 때문입니다.

const [text, setText] = useRecoilState(textState); // Recoil
...
const [text, setText] = useState(""); // UseState

장점 : 이것저것 만들고 관리해야하는 Redux보다는 store역할을 간결하게 작성해놓은 Atom과 useState와 유사한 Hook 실제로 사용하는데 있어 유사성을 가지고 있기 때문에 친숙함이 있다. 이러한 특징들 때문에 러닝커브가 낮고 적응이 매우 쉽습니다.

단점 : 하지만 아직 버전이 낮기 때문에 안정성의 측면에서는 좋지 못할 수도 있습니다. 또한 위에서 봤던 Redux DevTool 혹은 Redux-saga 등 기능이 많지 않고 Redux와 비교했을 때 자료가 상대적으로 적기 때문에 큰 규모의 프로젝트에서는 적합하지 않다고 생각합니다

하지만 최근 상당히 많이 사용되고 있고 Redux의 추가적인 기능으로 개발되었던 redux-saga 같이 여러 부분들에서 현재는 React-Query나 SWR 등 대안이 많이 나왔기 때문에 클라이언트 상태를 관리하기 위해 Recoil을 사용할만한 가치는 상당히 높다고 생각됩니다.