차근차근

0. 정적인 웹페이지 만들기 Redux를 도입하기전 간단한 웹페이지를 만든다. 1. 부품화 각각의 기능에 대해 모듈화를 시킨다. 2. store 생성과 state 사용하기 store를 생성하고 state를 사용한 코드이다. 결과는 처음과 같지만 reducer내부에 있는 contents의 내용을 바꾸면 그에 해당하는 코드들이 전부 바뀐다는 점이 다르다. 3. action을 dispatch를 통해서 전달하기 store의 state값을 변경하기 위해서 action을 발생시키고 action이 dispatch를 통해서 reducer를 실행시키면 state의 새로운 값을 return 한다. state값이 바뀌면 subscribe하고 있는 함수들을 호출해줌을 통해서 ui가 업데이트된다. event.preventDef..

0. 시간여행과 로깅 먼저 아래 깃헙에 들어간 후 Chrome용 Redux 개발자 툴을 설치하였다. https://github.com/zalmoxisus/redux-devtools-extension zalmoxisus/redux-devtools-extension Redux DevTools extension. Contribute to zalmoxisus/redux-devtools-extension development by creating an account on GitHub. github.com 아래 빨간 테두리 내에 있는 것을 복사해서 코드에 붙여 넣는다. 위와 같이 코드를 작성 후 실행시키면 Redux 개발자 도구를 볼 수 있다. 주의할 점이 file://~~ 이런식으로 브라우저에서 열면 Redux개..

0. reducer와 action을 이용해서 새로운 state 값 만들기 state를 바꾸기 위해선 action을 만들어야하고 그것을 dispatch에 제출하면 dispatch가 reducer를 호출하는데 그때의 이전의 state값과 action값을 동시에 준다. 그러면 reducer함수가 그것을 분석해서 state의 최종적인 값을 return해준다. store.dispatch({type: '~~~'}) ---> dispatch를 사용할 때 type은 반드시 있어야 한다. dispatch는 store를 생성할때 제공한 reducer라는 함수를 호출하도록 약속되어있다. 위와 같이 코드를 작성한 후 state와 action값을 알아보기 위해 console.log(state, action) 을 실행해보았다. ..

0. With Redux 다음은 하나의 버튼을 누르면 그에 상응하는 색으로 전부가 바뀌도록 해주는 코드이다. 색상이 하나 늘어날때마다 추가해야하는 코드의 양이 많아진다. 코드는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 .container{ border: 5px solid black; padding: 10px; } function red(){ document.querySelector('#red').innerHTML = ` red `; } re..

0. Redux 생활코딩 Redux 수업을 듣고 정리한 내용들이다. A predictable state container for JavaScript apps 리덕스는 애플리케이션의 복잡성을 획기적으로 낮춰서 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어주는 도구이다. 상태는 그냥 객체이다. 그래서 하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 넣는다. 한 곳에 데이터를 중앙 집중적으로 관리하면 여러 곳에 흩어져있는 것보다 관리하기 쉽다. 데이터를 외부에서 직접 제어하지 못하게 하여 의도치 않게 state값이 바뀌지 못하도록 한다. state값이 바뀔때마다 state의 데이터를 사용하는 애플리케이션의 컴포넌트들에게 알려서 적용시킨다. 1. state와 render의 관계 redux의 핵..