한지 - 한조각 쓸모있는 지식 레터

React 개발을 하다보면

state, props로는 depth가 너무 깊어지는

props drilling문제가 발생하는 시점이 온다.

또한,

단계별 진행이나 페이지 변경 후에도 상태를 유지해야 하는 List뷰 등에서

어려움을 겪게된다.

이러한 문제들을 해결해주는 것이

global state관리를 도와주는 라이브러리들이다.

그 중에서 local global state라고 부르도록 하겠다.

주요 상태관리 라이브러리

1. Context API

2. Recoil

3. MobX

4. Redux

위 4가지 정도가 있는데,

1에서 4로 갈수록 러닝커브가 높다고 생각하는 바이다.

그럼에도 각 장,단점이 있으니 알아보도록 하자.

1. Context API

ContextAPI는 4가지 중에 유일하게
React 내장 상태관리 기능이다.

즉, 별도의 라이브러리 설치 없이 사용 가능하다는 말이다.

Docs를 보고 처음 사용 하는 사람도
쉽게 적용할 수 있는 수준이니

러닝커브 또한 낮다고 할 수 있다.

ContextAPI가 처음 나왔을때는

언어설정이나 색상테마 등

잘 변경되지 않는 상태를 관리할때 쓰였다.

그러나 지금은

전역상태 관리로 사용하던

지역상태 관리로 사용하던

개발자의 자유일뿐

상태 관리 기능으로써 충분한 지원을 하고있다.

참고

그럼에도 다른 라이브러리들을

추가 설치해 사용하는 이유가 있다.

2. MobX

언급할 내용은 MobX뿐 아니라

Redux, Recoil등 다른 라이브러리들을

사람들이 사용하는 이유이다.

4가지 모두 상태관리라는 컨셉을 가지고 있지만 그 안에서 나뉘는 개별 특징들이 있다.

그중에 내게 맞는 특징을 갖는 라이브러리를 택하면 되는것이다.

MobX는 전역상태관리 기능을 제공한다.

뿐만 아니라 상태 업데이트 로직을 View Component 밖에서(코드 분리) 할 수 있도록 도와준다.

Redux에 비해 적은 보일러 플레이트 코드, 직관적인 코드를 갖는다는 특징도 있다.

다만, MobX에서는 여러개의 Store를 둘 수 있는데

그로인해 예상치 못한 업데이트 등이 발생할 수 있다는 단점아닌 단점이 있다.

3. Redux

Redux도 MobX와 마찬가지로

전역상태관리 + 상태 업데이트 로직 분리를 돕는다.

하나의 Store를 갖는 특징으로

상태가 업데이트 될때 정확하게(직관적으로)

해당하는 상태를 갖는 컴포넌트들만 업데이트 된다는 장점이 있다. (유지보수의 편안함)

다만, Redux는 비동기 처리를 위해

thunk, saga 등 추가적으로 라이브러리들이 붙게되고

보일러플레이트 코드가 너무 많아진다는 단점을 가지고 있다.

4. Recoil

최근 각광받고 있는 Recoil은

react를 개발/운영하고 있는 Facebook(Meta)에서 개발한 만큼

가장 react 친화적이라는 장점을 가지고있다.

뿐만 아니라 매우 사용 방법이 매우 간단하고 직관적이다.

ContextAPI가 상태를 일일이 만들어야 하는 과정을 가진데 반해

Atom을 통해 매우 간결하게 상태관리를 할 수 있다.

캐싱을 통한 최적화 기능은 보너스이다.

최근,

이직 준비를 하며 많은 기업들에서 Recoil을 도입하고 있는것을 보게되었다.
사이드 프로젝트에 적용해 공부중인데 매우 합리적인 선택지라는 생각이 든다.

현직 개발자들은 대부분 현명하고, 최선의 선택을 하기위해 노력하는 만큼

Recoil이 사랑받는데는 분명히 이유가 있다.

(수정할 사항이 있다면 자유롭게 알려주세요. 저에게 큰 도움이 됩니다.)

[redux]

최신 웹 기술들을 접하는걸 즐기는 사람이라면 누구나 한번쯤은 들어봤을 법한 라이브러리다.

도대체 redux란 무엇일까? 사람들이 왜 redux에 열광하는 것일까?

난 react가 정말 완벽하다고 생각하고 사용하고 있었으며, redux는 불필요한 것으로 치부하고 배우지 않고있었다.

사실은 도망친 것일수도 있다.

왜 이렇게 배울게많은거야? 또 새로운 거야? 하고말이다.

(이미 나온지 한참됐지만)

그치만 최근 개발하여 론칭한 대규모의 앱인  '공무원 시험일정, 공시생 SNS: 공투공' 을 만들며 그 필요성을 절실히 느끼고 익히게 되었다.

아니, 익히고 있는 중이다.

경험을 바탕으로 말하자면, 정말 작은 프로젝트에서까지 redux를 적용할 필요는 없을것 같다

(경우에 따라서는 필요할수도)

하지만, 규모가 커질것으로 예상되거나 큰 규모의 프로젝트를 계획하고있다면 redux는 확실히 도입해볼법한 라이브러리다.

그렇다면 도대체 redux란 무엇인가?

간단히 검색해보면 알수있듯 상태 관리 라이브러리다.

상태 관리란 무슨 의미일까?

프로젝트 내에는 다양한 오브젝트들이 있는데 그 안의 변수, 메서드 등의 현재값을 상태라고 본다.

그렇다면 상태를 관리한다는 것은 무슨 의미일까?

프로그램 내에는 다양한 범위(전역, 지역, 지역의 지역...)의 변수, 메스드 등이 존재한다.

이런 상황에서 특정영역A의 변수값a, 특정영역B의 변수값 b가 있을 때, b의 변화에따라 a의 값을 바꿀수 있겠는가?

생각해 본적 있는가? 있을것이다. 물론 없을수도 있다. 지금 생각해보면 된다.

잠시만 생각해보면 전역으로 모든 값을 관리하면 가능하다는 결론을 도출할 수 있다.

이런 생각에 기반해서 등장한 것이 상태관리 라이브러리다.

유용하고 유명한 상태관리 라이브러리로는 redux, mobx등이 있다.

이 중에서 redux를 알아볼 것이다. 얕지만 누구나 이해할 수 있는 수준에서.

redux를 사용함에 있어 알아둬야할 사항을 먼저 얘기하고 시작한다.

1. redux는 라이브리리이다. 따라서, react와 함께는 물론 어느 환경에서도 유연하게 적용할 수 있다.

2. redux의 등장배경을 떠올려보면 당연한 이야기이지만, 프로젝트 내에는 단 하나의 'store'만이 존재한다.

3. '상태'는 immutable하다. 겁먹을 필요없다. 그저 '읽기전용' 이라고 생각하면 된다. 상태에 대하여 직접 입력, 수정 등을 행하지 않는다.

4. 앞으로 알게될 'reducer'는 '이전의 상태'는 건드리지 않고 '다음의 상태'값만을 생성해서 반환한다.(순수한 함수)

이제, 다음 글에서 본격적으로 redux를 어떻게, 어떤 구조를 이루어 써야하는지 알아본다.