공부하는 비오

redux에서 action을 기록하기 위해서는 middle ware를 사용해야한다. (미들웨어를 만들어 로그로 기록할 수도 있다. 이건 redux-thunk에서...) history가 쌓이면 메모리도 잡아먹고, 중앙 데이터가 어떻게 변하는지 다 보여 보안에도 취약하기 때문에, 개발자용에서만 devtool에 연결해야한다. 이를 위해 개발용 미들웨어와 배포용 미들웨어를 다르게 설정한다. 개발용으로 미들웨어를 따로 사용하기 위해서는, redux-devtools-extions을 다운받아 브라우즈의 익스텐션과 연동시켜줘야 한다. 배포용은 compose, 개발용은 composeWithDevTools를 사용한다. applyMiddleware 메서드를 사용. middlewars자리에는 직접 배열이 들어가면 안되므로, ..

Redux 2020. 12. 13. 20:57

store에서 관리해야할 state가 여러개일 경우, 리듀서 파일을 분리하여 만들 수 있다. 여러개의 리듀서로 분리한 후 하나의 리듀서로 합쳐주기 위해 사용하는 것이 combineReducer. combineReducers({리듀서1, 리듀서2, ... }) createStore은 다 합쳐진 이 리듀서를 사용하면 된다. 이건 Redux toolkit을 사용했을때의 모습. 아예 다른 코드이긴 하지만 그걸 감안하고 봐도 확실히 toolkit을 사용한 것이 코드량이 확 줄었다. 차이점은 Slice로 만들었기 때문에 actions와 reducer로 따로 분리해서 export해야한다는 것. getState를 할때에도 state로 가져오는 것이 아니라 분리한 이름으로 가져와야 한다. ex) state.cart

Redux 2020. 12. 11. 21:09

제로초 노드버드 강의 정리 노트 redux를 사용하여 store로 state를 만들어보자! 기본설정하기(reducer, action 설정) store는 이전 글(next-react-wrapper관련 글)에서 설정완료 /reducer/index.js state 초기값 설정 및 action creator 설정 reducer 설정 Reducer에서 return 값은 history 관리를 위해 불변성(immulity)을 유지하는 것이 중요하다. 객체는 동일한 내용으로 새로운 객체를 만들더라도 같은 객체로 취급하지 않기 때문에, 새로운 객체를 만들어 항상 다른 객체를 리턴해주어야 한다. reducer에서 spread 문법을 사용하는 이유는 직접 할당할 때 보다 메모리 낭비를 막을 수 있기 때문이다. Object ..

Redux 2020. 12. 11. 12:32

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. *** configureStore({reducer})은 createStore(reducer) 대신 사용. 이걸 사용하면 웹에서 Redux DevTools로 redux상태를 다 확인할 수있다. createSlice createAction과 createReducer을 함께 합친 것. createSlice({ name: 'slice 이름(string)', initialState: state 초기값(any), reducers: { reducer이름: (state, action) => { ...state 변경... } }

Redux 2020. 11. 19. 18:17

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. createRecucer createReducer( sate 초기값, { [action 함수이름] : (state, action) => state 변화 값. } 반복적으로 switch case를 사용하지 않아도 된다. :) 그리고 툴킷을 사용할 경우, state값을 새롭게 반환하거나, 아니면 state를 mutate해서 바꿔줄 수 있다. (반환할경우 mutate할 수 없음)

Redux 2020. 11. 19. 16:53

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. 툴킷은 redux의 많은 보일러 플레이트(boilerplate, 반복적으로 사용되는 비슷한 코드들)를 제거해주고 짧은 길이의 코드 작성이 가능하도록 도와준다. 툴킷을 사용하기위해 설치. createAction tool kit을 사용하면 action을 훨씬 더 간단하게 선언 할 수 있다. 콘솔에 add함수와 delete함수를 찍어봤다. 이를 통해, createAction( type ); 이라는 것을 알 수 있다. 또한 action을 실행했을 때 { payload : 반환 값 } 인 것도 알 수 있다. 그 전에는 payload대신 직접 반환 값의 key를 적어주었다면, 툴킷을 사용할 때는 payload를 key로 사용해야한다.

Redux 2020. 11. 19. 16:25

react_router-dom? 브라우저에서 사용되는 리액트 라우터. 라우팅이란? SPA로 어플리케이션을 만들었을 때, 다른 주소에 따라 화면도 다르게 만들어 주는 것. routes라는 폴더를 만들어주고, 화면이 달라질 때 표시할 컴포넌트별로 나눠줌. APP 메인화면 : 연결화면 : **exact 는 정확하게 '/'만 있는 주소를 가진 화면으로만 이동. exact를 사용하지 않을 경우, /:id도 /가 포함되어있기 때문에, 두 화면이 동시에 출력된다. toDo마다 고유의 id가 있기 때문에 Link를 사용시 Detail로 이동. 링크 클릭 시 주소에 id값이 추가된 것을 볼 수 있다.

Redux 2020. 11. 19. 14:53

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. connect( mapStateToProps, mapDispatchToProps ) (현재component); connet는 두가지 인자를 가진다. mapStateToProps와 mapDispatchToProps. mapStateToProps는 store에서 state를 가져오는 함수. 이 함수가 반환하는 값은 Component의 props로 사용된다. mapDispatchToProps는 store에서 dispatch를 사용하도록 가져오는 함수. 이 함수가 반환하는 값도 props로 사용된다. store Home dispatch를 props로 가져왔으므로, dispatch(addTodo((text))와 같이 사용하면, store에서 dispatc..

Redux 2020. 11. 19. 14:29