차근차근

0. Vanilla ToDo 간단한 ToDo에 Redux를 도입하는 과정을 잘 알기위해 먼저 다음과 같이 세팅한다. index.html index.js 위와 같이 코드를 작성한 후 실행시켜보면 항목을 추가할 때마다 ADD_TODO라는 action이 일어남을 콘솔에서 확인할 수 있다. 1. State Mutation Mutation은 변형이라는 뜻을 가지고 있다. Mutation의 예시를 보겠다. 아래코드에서는 friends를 변형한 것이다. 첫번째 friends에는 1명이 있었는데 두번째 friends에는 2명이 있다. 새로운 state를 create하고 그 새로운 state를 return할 것이다. mutation개념을 적용시킨 것은 다음과 같다. 이전 state를 가져온 후 text를 추가하여 ret..

0. Vanilla Counter Redux는 기본적으로 Javascript Application들의 state(상태)를 관리하는 방법이다. React뿐만 아니라 Angular, Vue.js, Vanilla Javascript 등 원하는 곳에 쓸 수 있다. 먼저 project를 시작하기 위해 다음과 같은 명령어를 실행한다. 디렉터리가 만들어지고 해당 디렉터리로 이동한다. redux를 사용하지 않는 버전을 보기 위하여 /src/index.js에서 간단하게 코드를 작성한다. yarn start 명령어를 실행하면 다음과 같은 화면을 볼 수 있다. 1. Store & Reducer redux를 사용하는 버전에 대하여 살펴보겠다. 먼저 redux를 사용하기 위해 yarn add redux(혹은 npm instal..

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의 핵..