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를 생성할 때 꼭 줘야하는 인..

prop을 통해서 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 return 값을 만들면 return 값이 새로운 UI가 된다. state는 prop과 함께 컴퍼넌트 함수를 다시 실행해서 새로운 return 값을 넣어주는 역할을 한다. prop과 state 모두 값이 변경되면 새로운 return 값을 만들어 UI를 바꾼다. 하지만 이 둘의 차이점은 prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다. 이번에는 state를 사용하여 각 목록을 눌렀을 때 해당하는 각 내용이 나오도록 만들어 볼 것이다. 전체 코드 import logo from './logo.svg'; import './App.css'; import {useState} fro..