React Redux 간단 카운터 예제 생성 및 종속성 제거

TOC

1. Redux를 통해 state값을 관리하는 카운터

2. Redux에 의존하는 component에서 Redux분리하기

1. Redux를 통해 state값을 관리하는 카운터

위의 codesandbox 예제가 바로 state값이 store에 의해 관리되고 있는 카운터이다.

Redux를 가장 간단하게 사용하고 익히려면 다른 군더더기 없이 이런 간단한 예제가 좋을 것 같다.

2. Redux에 의존하는 component에서 Redux분리하기

의존성 분리하기는 생각보다 간단하다

개념은 이러하다.

Redux에 의해 값이 변경되는 component가 있다고 가정하자

이 component가 Redux와 붙어있다면 이 Redux를 따로 떼어내주는 것이다.

즉 위의 카운터를 예로 들면

• 숫자를 표시하는 Display Component를 만들고,
• plus, minus 버튼을 만드는 Component를 만든다.

Display Component는 store와 관계를 완전히 끊어놓고 Display Component 상위의 Component에서 store값을 구독하고 props로써 Display Component에 값을 내려준다.

이러면 Redux와 아무 관계가 없는 순수 Display Component가 된 것이므로 재사용성이 높아졌다 할 수 있다.