"state 를 상태라고 하는건 좀.."
Redux
Redux 는 state 관리를 위한 자바스크립트 라이브러리입니다. Dan Abramov 와 Andrew Clark 가 개발해 2015년 6월 2일 출시했고, 공식 홈페이지의 첫 화면은 "A Predictable State Container for JS Apps" 라는 말로 리덕스를 소개하고 있습니다.
저는 state 하면 사실 React 가 먼저 떠오르는데요. 실제로 리덕스는 리액트 사용자를 위한 별도의 웹을 제공할 정도로 리액트와 함께 사용되는 경우가 많다고 합니다만, 리덕스가 리액트와만 사용할 수 있는 것은 아닙니다. jQuery 나 Angular 와도 사용할 수 있다고 하네요. 기본적으로 스스로를 JS Apps 로 규정하는 데서도 알 수 있겠죠.
본격적인 공부에 앞서
리액트를 공부하다 보면 이 state 라는 개념이 참 난감한 경우가 있습니다. 여러 컴포넌트에서 하나의 state 를 사용하기 위해서는 모든 컴포넌트의 조상이 되는 컴포넌트에 state 를 배치해야 하고, 이를 아래로 내려줘야 한다는 개념 때문인데요. 조상 컴포넌트의 하위 레벨이 얕으면, 다시 말해서 자식이나 손자 정도까지라면 크게 문제될 것이 없지만 증손자, 고손자, 아니 그보다 더 내려가야 하는 경우에는 매번 컴포넌트로 사용하지도 않는 관련 props 를 전달해주는 것이 복잡하기만 합니다. state 를 찾는 것도 꽤나 번거로운 일이구요.
그나마도 리액트는 계층구조를 따라 아래로 내려가는 단방향의 데이터 흐름 (React is all about one-way data flow down the component hierarchy) 을 가지고 있기 때문에 상황이 나았다고 합니다. 쌍방향의 데이터흐름을 허용하는 라이브러리/프레임워크에서는 모든 게 꼬이는 심각한 상황들도 있었다고 하더라구요. 정확히 어떤 어려움이었는지 제가 알 수는 없지만, 아마도 자바스크립트에서 let 으로 선언한 전역변수를 마음대로 고치면 생겨날 수 있는 문제와 비슷하지 않을까 추측해볼 뿐입니다.
아무튼 SPA 의 등장과 함께 나타난 이 state 라고 하는 문제를 해결하기 위해서 redux 가 등장하게 되었습니다. state 를 아래로 내려주기 위해 여러 컴포넌트를 거치며 매번 props 를 생성하고 전달하는 번거로운 과정을 "props drilling" 이라고도 부르는데요. 이렇게 하는 대신, 어디에서나 접근 가능한 "store" 라는 공간을 만들어 여기에 접근하고 여기에서 state 를 넘겨받는 것으로 문제를 해결하는 방식이라고 할 수 있습니다.
간략한 용어 설명
리덕스에서 사용하는 용어들이 있습니다. 본격적인 공부는 주말의 나에게 미뤄두고 오늘은 용어를 간략하게 설명하는 것으로 글을 마쳐보려 합니다.
Store: Store 는 쉽게 말해 state 를 저장하는 곳입니다. 기존에는 조상 컴포넌트에 state 가 위치했다면 이제 Store 에 state를 보관하는 것이죠. 컴포넌트 외부에 있기 때문에 계층 구조에서 벗어나 독립적으로 존재하고, 컴포넌트 어디에서나 접근이 가능하다고 합니다.
Action: Action 은 파라미터를 입력 받아 객체 형태로 전달합니다. 객체 안에 필수로 type 라는 키와 값이 지정되어야 하고, 그 외에도 전달하고자 하는 것들을 선택적으로 사용할 수 있다고 합니다.
Dispatch: Dispatch 는 Action 을 전달하는 메소드 입니다. dispatch 의 매개변수 자리에 dispatch(action) 의 형태처럼 전달인자로 action 객체가 전달되는 형태입니다.
Reducer: Reducer 는 현재의 state 에 전달 받은 action 을 이용해서 새로운 state 를 만들어냅니다. 이 때 reducer 는 순수 함수 (pure function) 이고, state 의 업데이트는 immutable 한 방식으로 이루어져야 합니다.
참고할 만한 자료들
https://velog.io/@youthfulhps/What-is-Redux-and-why-use-it
개인적으로 리덕스를 이해하는 데 많은 도움을 받은 블로그 글입니다.
https://ko.reactjs.org/docs/thinking-in-react.html
react 공식 문서 중에서 리액트의 흐름을 다루는 부분입니다.
https://www.robinwieruch.de/react-redux-tutorial#what-is-redux
영어로 된 자료에 강하다면 읽어보시면 좋을 것 같아요. 물론 저는 아직 다 읽지 못했습니다.
https://www.youtube.com/watch?v=xsSnOQynTHs
Dan Abramov 의 React-Europe 2015 발언 영상입니다.
https://www.youtube.com/watch?v=uvAXVMwHJXU
Dan Abramov 의 React-Europe 2016 발언 영상입니다. 저는 주말에 시간을 내어 보려고 합니다. 둘 다 대략 30분 남짓한 영상입니다.
