Todo list예제를 통한 redux학습하기(2)

redux를 이용한 Todo list를 구현해보기에 앞서 간단하게 vanilla JS를 이용한 counter를 만들어 보았다. 다음은 이 코드를 react를 이용하는 방식으로 변경해보려고 한다.

vanillaJS를 통해 구현한 counter는 이전 게시물에 작성되어있다.

Github Source Code

index.html

먼저 index.html에는 React앱이 렌더링 될 root div를 만들었다.

index.js

index.js에서는 Counter 컴포넌트를 root div에 렌더링해준다. store.subscribe() function은 state change listener를 추가해주는 function으로서, action이 dispathch되면 실행된다.

Counter component에 전달해 줄 onIncrement와 onDecrement props는 store에 actions를 dispatch해주는 function들이다.

components/Counter.js

vanillaJS에서 index.html에 작성되었던 button들은 Counter component에서 렌더링 하도록한다. 각 버튼에는 click event listener를 통해 onIncrement나 onDecrement function을 실행한다.

Github Source Code

REF

reduxjs/redux