jpg의 끄적끄적

1. store 생성 우리가 redux를 사용하기 위해서 제일 첫 번째를 store를 만들어야 하는 동시에 reducer를 생성해야 했다. 그리고 결과화면 HTML을 클릭했을 때와 CSS를 클릭했을 때 본문의 내용이 잘 바뀌는 것을 볼 수 있다. 그렇다면 배웠던 것을 복습삼아 왜 바뀌는지 생각해보자. 우리는 action을 통해 dispatch에 값을 전달하고 reducer가 state값을 갱신해 dispatch가 subscribe하고 있는 함수들을 호출해주기 때문에 그에 따라 render가 동작해 새로운 state값을 참조하여 UI를 새로 그리기 때문이다. 강의영상 - https://youtu.be/zMTqWoe25aU

이번에는 state의 값을 변경하는 방법에 대해 알아보자. state를 변경하기 위해서는 action이라는 것을 만들고 dispatch에게 제출하면 dispatch가 reducer라는 것을 호출한다. 그때 이전의 state 값과 action의 값을 동시에 준다. 그러면 우리가 짤 reducer 함수가 그것을 분석해 state의 최종적인 값을 return 해준다. with-redux.html 위에서 작성한 코드를 통해 처음에 설명한 dispatch가 reducer 함수를 호출하고, 이전의 state값과 action 값을 동시에 주는 것을 확인해보자. 홈페이지에서 개발자도구 - console로 가서 fire 버튼을 클릭하면 이전의 state 값인 yellow와 action 값인 type값이 나타나는 것을 확..

검색엔진에 redux cdn을 검색하여 홈페이지에 들어가면 redux를 서버에 설치하지 않고, 그냥 복사하여 사용할 수 있는 페이지가 나온다. 여기서 맨 아래 주소를 카피한다. 그리고 public 폴더에 with-redux.html 파일을 만들고 다음과 같이 주소를 넣어준다. 그리고 without-redux.html에서 작성한 부분을 복붙해주고 red만 남기고 지워준다. 이제 red부분을 redux에 의해 동작하도록 변경할 것이다. redux를 이용한다는 것은 store를 만들어 state의 상태를 바꾸는 것이 redux의 핵심이다. 따라서 첫 번째로 해야할 것은 store를 만들어 state가 생성하고, reducer라는 함수를 만들어 store에 주입하는 것이 첫 번째로 할 일이다. state는 st..

redux 지도를 보며 redux에 대해 알아보자. store / state redux의 핵심은 store이다. store에는 정보가 저장된다. store 안에는 실제 정보가 저장되어 있는 state가 있다. 이때 중요한 것은 우리는 state에 직접 접속하는 것이 불가능하다. var store = Redux.createStore(reducer); redux에 createStore하게 되면 store가 생성된다. reducer store를 만들 때 가장 먼저 해야 할 것은 reducer라는 함수를 만들어 공급해야 한다. function reducer(oldState, action){ ... } var store = Redux.createStore(reducer); ㅁstore를 생성할 때 꼭 줘야하는 인..