React.js Global State Management(전역 상태관리) 1.

React.js를 사용하면서, 

State와 Props를 사용하고, 컴포넌트를 넘나들며

각각의 함수나 값들을 전달하는 과정에서,

구조가 복잡해질수록 전달 구조가 복잡해진다.

 

(이미지가 너무 큰것 같다..........하지만 폭을 알아서 맞춰줄것이니....)

그림에서 표현하고 싶었던 것은,

한 컴포넌트에 속한 여러 하위 컴포넌트 가운데 한 컴포넌트에서

콜라가격을 가지고 쏼라쏼라 하는 내용이 있다고 가정하자.

그런데 분기된 줄기가 다른 어떤 컴포넌트에서 그 콜라가격을 통해

무언가를 하고 싶어졌다.

 

물론 콜라가격을 해당 컴포넌트에서 잡아주면 상관 없겠지만,

각각의 컴포넌트가 각각 state를 설정해서 변화를 적용해야한다면

굳이 react를 사용할 필요가 있을까?

그래서 값을 전달하고 전달받아 사용하기 위해 기본적으로

props를 이용한다.

 

위 그림의 빨간 화살표는 오늘의 주제인 

'글로벌 상태관리'를 하지 않고 기본적인 방법으로 값을 전달하는 경우의

루트를 표시한 것이다.

 

자식 컴포넌트는 부모컴포넌트에게 자신의 props 를 통해서,

어떠한 state 값을 전달 할 수 있다. 

이를 통해 위로 쭉쭉 올려주고, 

역시나 받고자 하는 컴포넌트에서도 props 를 통해

전달받을 수 있다.

 

하지만, 5단계에 걸쳐서 전달해야하는 만큼,

구조가 복잡한 어플리케이션이라면 더더욱

이 과정은 번거롭고 복잡하고 어딘가에서 수정이 이루어지면

영향을 받기 쉬우며, 오류가 발생할 확률도 높다.

 

react에서는, 

대표적으로 Redux, Mobx라는 상태관리 라이브러리를 사용한다.

그리고 react에서 기본적으로 제공하는 Context API 까지,

크게 세가지 정도의 상태관리 방법이 있다.

 

직접 테스트코딩으로 사용해본 결과,

Mobx는 정말 빠르고 쉬운 느낌이었고,

Redux는 설정이 좀 복잡하고 번거로웠다.

의외로 Context API가 간단하고 깔끔한 느낌이었다.

 

다만 Mobx는 기본적으로 컴포넌트 자체의 state를 사용하지 않는,

'@observable' 어노테이션을 설정한 값에 대한 모니터링을 통해

상태관리를 해서 컴포넌트 작성 시에 제약점이 있었다.

 

Redux는 기본적으로 굉장히 복잡하다.

reducer, dispatch, store 등등 설정할 것도 많고,

뭔가 잡다구니하게 많다.

하지만 막상 한번 잡아놓은 설정에 충실하게,

원활히 잘 돌아가는 모습에 흡족스러웠다.

 

Context API는 그냥 심플하고 깔끔했다.

군더더기 없고, 심플해서, 

Redux나 Mobx가 해주는 다양한 롤도 없다.

직접 다 설정해줘야한다.

복잡하고 방대한 어플리케이션에서 주력으로 사용하기에는 

약간 부하가 걸리지 않을까 싶은 느낌.

 

하지만, 셋 다 설정 방식이나 중요포인트가 다를 뿐,

궁극적으로 상태관리를 통해, 어플리케이션 내에서

state나 function을 폭넓게 사용할 수 있도록 도와주는 것에는

다를 바가 없다.

 

다음 상태관리 포스팅에서는

구체적으로 mobx, redux, context api 에 대해

비교하는 내용을 이어가보고자 한다.