[TIL/React] 2023/03/15

What is Redux?

Redux는 스스로를 다음과 같이 소개한다. 'A ``predictable` `state container`` for JavaScript apps'.

개발을 할 때 '복잡성'이라는 개념은 우리를 위험에 빠뜨릴 수 있다. 애플리케이션을 이전보다 더욱 ``predictable`하게 만들기 위한 `JavaScript 상태 관리 라이브러리``가 바로 Redux인 것이다.

조금 더 간단하게 말하면, Redux를 사용하는 이유에는 크게 두 가지가 있다.

1. props 문법이 귀찮다. 2. 상태 관리가 용이하다.

1. props 문법이 귀찮다.

일반적인 React 스타일의 웹개발은 다음과 같다. 재활용성이 높은 대상을 component로서 구성하고, 여러 component를 레고 블록처럼 조합해서 UI를 형성하는 방식이다. 그런데 이때 state, 즉 변경되는 요소가 포함될 수 있다.

다른 component들은, 특정 component에 포함된 state를 마음대로 가져가서 사용할 수 없다. props의 형태로 상위 폴더에서 하위 폴더로 전송하는 ``Top-Down``방식으로만 state를 차용할 수 있다.

만일 컴포넌트가 100개 또는 1000개 이상 중첩되어 있는 상황이라면, props를 남발하게 될 것이다. 이것이 비효율적이기도 하고 디버깅(debugging)을 지나치게 어렵게 만든다.

Redux를 설치하면 store.js같은 ``state 전용 보관함``을 생성할 수 있다. 모든 component는 더 이상 props를 남발하지 않고, 보관함에서 state data를 가져올 수 있게 된다.

2. 상태 관리가 용이하다.

state를 한 곳에 저장해서 꺼내 쓰는 방식이기에, props를 남발하지 않아도 된다는 것이 1번 part의 핵심 골자였다. 그렇다면 state 관리가 용이하다는 것은 무엇을 의미할까?

component 1,2,3이 있다고 가정하자. 'component 1'에는 몸무게를 1 증가시키는 상태가 입력되어 있다. 'component 2'에는 몸무게를 1 감소시키는 상태가 입력되어 있다. 'component 3'는 몸무게의 단위를 변경시키는 상태가 입력되어 있다. 각기 다른 state를 포함한 component가 1000개라면? 그리고 그 1000개의 component 중 특정 componenet에서 버그가 발생했다면? 일단 나는 도망칠 것이다.

아까 언급한 ``state 전용 보관함``에 몸무게라는 state를 미리 선언해놓고 필요한 '수정 방법'을 제시해 놓으면 어떠한 state가 동작하지 않을 때 보관함에서 해당 state의 오류를 수정해주면 된다.

"상태 관리가 용이하다."는 말은 "디버깅이 쉽다."라는 말과 같은 의미이고, 더 쉽게 "에러의 범인이 누구인지 금방 찾을 수 있다."라는 식으로 풀어볼 수 있겠다.

구체적으로 Redux가 작동하는 방식은 다음에 알아보겠다. 나는 오늘 ``Redux의 개념``에 대해 살펴봤다.

회고

기술의 발전은 우리가 감히 예측할 수 없다. 그렇다면 그냥 좋아하는 것을 하면 된다. 매우 무책임한 말일 수 있지만 나의 생각은 조금 다르다.