리덕스(redux)의 개념을 알아봅시다.

리액트의 데이터 흐름은 어떻게 진행되나요?

리액트는 부모에서 자식으로 데이터가 흘러갑니다.

리액트의 데이터의 흐름

그래서 주황색(부모)에서 주황색(자식) 까지 데이터가 전달되려면 그 사이의 많은 컴포넌트들을 거쳐가게 됩니다. 이런 거쳐가는 과정이 많아질수록 코드가 늘어나고 복잡해집니다. 리액트 카테고리에서 이전에 다뤘던 콘텍스트가 중간을 거치지 않고 자식 컴포넌트에 바로 전달했듯이 리덕스도 똑같다고 생각하시면 됩니다.

왜 리덕스를 알아야 할까요?

리덕스를 다룰 수 있게 되면 어려운 프로그램을 쉽게 만들 수 있습니다. 여러 과정을 거치지 않고, 사용할 컴포넌트에 연결해서 사용하면 되기 때문입니다. 이처럼 좀 더 프로그램을 쉽게 작성하기 위한 것이 첫번째 이유고, 두번째 이유는 리덕스라는 것이 이제는 보편적인 개념이 되었기 때문입니다. 좀 더 풀어서 말해볼까요? 리덕스는 상태(state)를 컴포넌트 밖에 두고 필요한 컴포넌트들이 그 상태(state)를 받아볼 수 있게 만들어주는 것입니다. 

리덕스의 도식화

위의 그림처럼 부모에게서 받아오는 것이 아니라 리덕스를 통해서 바로 상태를 받기 때문에 코드를 작성하는게 엄청 편해졌습니다. 그래서 이렇게 상태를 바깥에 두는 것이 하나의 개념화가 되서 다른 여러곳에서 사용하고 있습니다. 분명 리액트도 배우시고, 리덕스도 배우시다보면 또 그렇게 새로 생긴 것들까지 배우시게 될테니 미리 리덕스의 개념을 익혀두시는 것이 좋습니다. 그리고 리덕스는 자료도 아주 많기 때문에 좀 더 편하게 배울 수 있습니다.

예제 준비하기

다음 포스팅에서 본격적으로 리덕스를 다루고, 이번 포스팅에서 우리가 같이 만들 것이 어떻게 생겼고, 어떤 모습으로 변할 것인 지를 설명드리도록 하겠습니다.

값이 나오는 버튼 예제

숫자는 0에서 시작하고 버튼을 누르면 숫자가 계속 커집니다. 위에는 버튼의 숫자값이 0일땐 Zero라고 표시되고, 짝수 일때는 even, 홀수 일때는 odd라고 표시 됩니다.

코드를 살펴보겠습니다. App 콤포넌트는 간단합니다. Nav 컴포넌트(Zero, odd, even을 표시)와 Button 컴포넌트(버튼을 누를때 마다 숫자가 올라감)을 렌더링하는 부모 컴포넌트 역할을 합니다. 그리고 숫자를 state 안에 넣어고 handleClick이라는 메소드를 만들어서 전달합니다.

Nav 컴포넌트와 Button 컴포넌트도 예제답게 간단하게 만들었습니다. 이렇게 일반적인 형태의 리액트 컴포넌트들에 리덕스를 합치면 어떻게 될까요? 똑같은 기능을 할 수 있지만 부모에서 데이터를 전달할 필요없이 리덕스의 리듀서(상태를 변화시킬 수 있는 유일한 함수)를 통해서 값을 변경하고 그 변경된 값을 받습니다.

다음 포스팅에서는 해당 코드에 리덕스를 적용시켜보도록 하겠습니다.