React #11 cors 에러, Redux 들여다보기
이전에 cors정책에 위배된다는 에러가 발생했었는데, 그땐 cors()패키지를 사용해서 해결되었었다.
마찬가지로 router에 cors()를 추가했는데 왜인지 되지않았다.
cors('접속을 시도한 URL')으로 경로를 추가해주니 정상적으로 요청헤더, 응답헤더가 출력되었다.
리덕스 사용전 다시 한번 개념을 정리해보자.
데이터를 전달하고 상태가 변화할 때 하위에서 상위로, 상위에서 하위로 전달하는 과정은 단순하지만, 컴포넌트가 많아지고 관계가 복잡해진다면 관리가 매우 어렵다.
따라서 중앙에서 이런 상태들을 관리해주는 것이 필요하다.
이를 가능하게 해주는 것이 바로 리덕스이다.
리덕스란
리덕스는 상태관리 라이브러리이다.
컴포넌트들을 거치지 않고 상태값을 전달 할 수 있다.
필요성은 파악했다.
그럼 개념을 훑어보자.
개념 훑기
리덕스에서 사용하는 개념은 다음과 같다.
- 액션
- 액션 생성함수
- 리듀서
- 스토어
- 디스패치
- 구독
하나식 뜯어보자
액션
상태에 변화가 필요할 때 발생시키는 것.
액션은 하나의 객체로 표현된다.
type필드를 필수로 가지며 type의 값에 따라 상태변화를 달리해준다.
액션 생성함수
액션을 만드는 함수.
단순하게 파라미터를 받아와서 액션 객체 형태로 만들어준다.
리듀서
변화를 일으키는 함수. - switch가 들어있음.
두가지 파라미터를 받아온다.(state, action)
현재의 상태 + 전달 받은 액션을 참고해 새로운 상태를 만들어 반환
스토어
한 애플리케이션당 하나의 스토어를 만든다.
스토어에는 앱 상태 + 리듀서 + 몇가지 내장함수가 포함된다.
디스패치
스토어의 내장 함수중 하나.
액션을 발생 시키는 것.
dispatch함수에 action을 파라미터로 전달함.
구독
스토어의 내장 함수중 하나.
subscribe함수는 함수 형태값을 파라미터로 받음.
해당 함수에 특정 함수를 전달하면, 액션이 실행되었을 때 마다 전달한 함수가 호출됨.
데이터를 변화시키기 위해 변화하는 데이터와 이에 대한 이름인 액션을 지정해줌.
이 액션을 수행하는 것이 디스패치임.
리듀서는 액션의 태그에 따라 수행되는 내용을 구체적으로 작성해줌
이 dispatch할 때 반환되는 값이 {}로 감싸여진 새로운 객체인데 {...state}로 참조를 진행한다. 이 부분은 따로 다루는 것이 좋을 것 같다. Keyword: 깊은 복사, 얕은 복사, 참조
리덕스 관련 middle ware
리덕스를 사용할 때 도움이 되는 라이브러리들이 있다.
redux-thunk
비동기작업을 처리할 때 사용되는 미들웨어
npm i --save redux-thunk
import ReduxThunk from redux-thunk`
리액트 APP - - Store
미들웨어는 app, store의 사이에 존재한다.
유저가 원할 때 store로 action을 비동기적으로 보낼 수 있게 해준다.
redux-logger
log for redux
npm i --save redux-logger
import logger from 'redux-logger'
console창을 통해 props, action, state를 볼 수 있다.
개발모드일 때만 사용하므로, --dev명령어를 붙여 사용한다.
리듀서는 하나로?
리듀서를 여러개를 쪼개야 관리가 쉬울 것 같다.
그런데 index.js에서만 코드가 적용이 되어서 검색한 결과
루트 리듀서: 실제로 createStore의 첫 번째 인자로 전달되는 함수. 유일하게 (state, action) -> newState 형태의 로직을 가져야 합니다.유일하게..?
음, 리듀서를 쪼개고 combine하는데 아마도 제일 처음으로 수행되는 리듀서를 의미하는 것 같다.
=>
Todo
configureStore.js를 만들고 스토어를 생성한다.
Provider로 감쌀 필요없이, wrapper로 _app.js를 export default에서 감싸주면 스토어등록이 완료된다.
각 컴포넌트마다 리덕스폴더에 actions, reducers 폴더를 생성하고 컴포넌트명.js`를 생성해 리듀스, 초기 State, 액션들을 정의한다.
컴포넌트들은 호출되는 시점에서 action함수를 호출하고, action에서는 비동기 처리후, type으로 해당하는 dispatch를 요청해 리듀서를 바꾸고 해당되는 리듀서가 state를 반환한다.
우리는 현재 상태값변화가 아닌, get으로 데이터를 불러오면 되므로 비동기인 axios라이브러리를 통한 통신을 통해서 JSON데이터를 state에 저장하고 return하면 될 것 같다.
