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를..

전 포스팅에 이어 오늘은 redux를 이용해 todo리스트를 만들어보자. 그에 앞서 redux의 중요한 세가지 룰을 알아보자 먼저 Single Source of Truth Redux는 앱의 state를 위해 단 하나의 store를 이용한다. 모든 state가 한곳에 있기 때문에 이렇게 부른다. store의 데이터 구조는 nested된 구조로 이루어져 있다. 자바스크립트 객체로써 {{{{},{},{}},{}}} 이렇게 정리되어 있다. 두번째로 state는 read-only이다. 절대로 직접 mutate하면 안된다. state를 변경하기 위해서는 action을 통해 dispatch되어야 한다. 이말인 즉슨 예를 들어 state가 배열이라면 새로운 값이 들어올때 기존 배열을 push같은 메서드를 이용해 변경해..

https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org react를 공부하며 redux redux 하길래 뭔가 싶었는데 이제 시작했다. redux는 뭘까? redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 상태 state를 담은 뭔가라는 소린가? 일단 상태를 관리하는 라이브러리라고 한다. 컴포넌트들의 상태 관련 로직을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 그리고 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 자 한가지 생각해보자. 리액트에서 상위 ..