Enjoy Programming

dispatch와 getState를 할 수 있으니 이제 subscribe를 해줘야하는 건가? 구독해서 렌더링 해줘야 한다. 컴포넌트 하나를 더 만들어보자. 그냥 렌더링 될 todo list 컴포넌트이다. 이 컴포넌트가 받아야할 prop은 이미 text인것을 알기에 text를 넣어주고 랜더링 해준다. 이제 홈컴포넌트에서 각 text를 넣어주면 된다. spread를 사용해 보내줬다. 위 코드는 익숙한 방식으로 풀어보면 요렇게 되겠다. 이렇게 todo가 넘어가고 destructure로 {text}만 받는 구조. 자 그럼 생각해보자 home 컴포넌트는 이미 connect를 연결해서 state와 dispatch를 해줬다. home은 state도 필요했고 dispatch도 필요했으니 mapState와 mapDisp..

어제 포스팅에 이어 react-redux를 더 해본다. 어제 포스팅에서는 connect()를 사용해 컴포넌트에 getState()하는 방법을 알아봤다. mapStateToProps.. 어쩌구 다시 읽어보자. 이번에는 중요한 dispatch하는 방법을 알아보자. 공식 문서를 읽어보자. 일반적으로 mapDispatchToProps라고 부른다고 한다. connect()의 두번째 파라미터로 이 파라미터는 객체나 함수이거나 또는 제공되지 않을 수 도 있다고 한다. 그리고 위처럼 connect(mapState, mapDispatch) 의 형태로 써주면되는데 만약 mapState를 안할거라면 null로 바꿔주면 된다. 그리고 만약 mapDispatch를 함수로 정의 했다면 최대 두개의 파라미터를 부를 수 있다고 한다..

자 바닐라 redux를 사용해 봤으니 react에서 redux를 사용해본다. 초기 설정은 거의 동일하다. redux는 깔려있으니 필요한 react-redux를 설치해주자. 그리고 Store.js를 만들어서 동일하게 todo를 관리할 store를 만들어주고 store를 export시켜준다. 어딘가에서 써야하니까. 이제 react-redux를 사용할 차례이다. 이전 포스팅에서 subscribe를 썻었다. store의 변화를 감지해야하니까. 변화가 있으면 app을 다시 rendering해야하는데 react에서는 rendering이 전체로 일어나는게 아니고 변화가 있는 부분만 rerendering된다. 무슨차이지?... 변화만 있는 부분만 재랜더링 해도 되지않나? 생각이 들지만 진행해보자. 자 이제 store를..