What is Redux?
Redux는 스스로를 다음과 같이 소개한다. 'A predictable state container for JavaScript apps'.
개발을 할 때 '복잡성'이라는 개념은 우리를 위험에 빠뜨릴 수 있다. 애플리케이션을 이전보다 더욱 predictable하게 만들기 위한 JavaScript 상태 관리 라이브러리가 바로 Redux인 것이다.
조금 더 간단하게 말하면, Redux를 사용하는 이유에는 크게 두 가지가 있다.
- props 문법이 귀찮다.
- 상태 관리가 용이하다.
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의 개념에 대해 살펴봤다.
회고
기술의 발전은 우리가 감히 예측할 수 없다. 그렇다면 그냥 좋아하는 것을 하면 된다. 매우 무책임한 말일 수 있지만 나의 생각은 조금 다르다.
대체 불가능한 사람이 되면 된다. 대체 불가능한 사람은 특정 산업군의 흥망성쇠에 흔들리지 않는다. 내가 생각하는 대체 불가능한 사람이란 자신만의 스토리를 갖고 있는 사람이다.
'자신만의 스토리'라는 것이 추상적으로 느껴질 수 있는데, 그냥 매일매일 성실하게 쌓아온 양(量)이 압도적이면 된다. 그런데 이제 약간의 특색을 가미한...
아침에는 학교에서 '도시 행정'을 공부했고, 오후에는 '통계 회귀 분석' 과제를 수행했으며, 지금은 'React 개발'에 허덕이고 있다. 번잡스럽지만 나름대로 재미있는 내 스토리는, '특색'은 확보한 것 같다. 이제 양으로 압도해 보자. 내일도 화이팅!(화이팅 하고 싶은데 할게 미친 듯이 많네 하...ㅋㅋ 그래도 화이팅!!!)
