공부기록/[강의노트] Udemy React 완벽가이드 201~300 (11) 썸네일형 리스트형 # 257 [udemy React 완벽 가이드 노트] store 코드 분할해보기 store폴더 안에 코드를 아래와 같이 두 파일로 분할한 뒤 각각 index.js 파일에서 import하고 합쳐줄 수도 있다. auth.js 파일 import { createSlice } from "@reduxjs/toolkit"; const initialAuthState = { isAuthenticated: false, }; const authSlice = createSlice({ name: "authentication", initialState: initialAuthState, reducers: { login(state) { state.isAuthenticated = true; }, logout(state) { state.isAuthenticated = false; }, }, }); export co.. # 255 [udemy React 완벽 가이드 노트] Redux toolkit에서 여러개의 reducer 사용해보기 로그인 버튼을 누르면 사용자 인증 상태에 있게 하고 로그아웃 버튼을 누르면 사용자 미인증 상태가 되게 해보자 이것은 Header 컴포넌트와 Auth 컴포넌트, UserProfile 컴포넌트와 관련이 있다. 기존의 index.js 파일에 initialState에 isAuthenticated 속성과 createSlice부분의 reducers에 메서드를 추가할 수 있을 것이다. 기술적으로는 작동하지만 이건 의미적으로 맞지 않다. counter과 login은 관련이 없기 때문이다. 새로운 Slice를 추가하는 것이 맞을 것이다. 새로운 slice 추가하기 const initialAuthState = { isAuthenticated: false, }; const AuthSlice = createSlice({ na.. # 251 [udemy React 완벽 가이드 노트] Redux toolkit 사용해보기 (리덕스가 관리해야 할 state가 많아질 때 문제점과 개선 방안) 리덕스에서 관리해야 할 state가 많아질 때 생길 수 있는 문제점 1. 액션 타입 액션을 dispatch할 때 type에 오타가 나서는 안된다. 여럿이서 작업하다보면 많은 type 식별자가 생길 수 있는데 그러다 보면 type 식별자가 충돌이 날 수 있다. 해결 방안 1. import { createStore } from "redux"; export const INCREMENT = "increment"; const initialState = { counter: 0, showCounter: true }; const counterReducer = (state = initialState, action) => { if (action.type === INCREMENT) { return { counter: sta.. # 249 [udemy React 완벽 가이드 노트] 토글 카운터 버튼 활성화 (중요: 절대 기존의 state를 변형하지 말것 ) toggle counter button을 누르면 counter button이 사라지거나 보이게 한다. 이것은 redux로 관리하는 것보다는 useState로 관리하는 것이 낫다. local state이기 때문이다. 즉, state는 지금 컴포넌트 에서만 사용할 것이다. 그런데 연습을 위해 Counter와 state 모두가 Counter가 보여야 할지말지를 정한다고 가정하자. 즉, global state임을 가정하자. toggle 버튼을 클릭해서 액션을 디스패치 하고 리덕스에서 state를 변경한다. 그건 counter가 보이는 div태그를 보이게 할지 말지 제어한다. 리덕스 스토어에 새 정보를 추가하자. counterReducer로 가서 모든 state 스냅샷을 추가한다. initialState snap.. # 248 [udemy React 완벽 가이드 노트] action에 페이로드(추가속성) 연결하기 지금까지는 간단한 actions만 reducer function에 보냈다. action 객체에는 type만 있었다. 다른 값을 전달해보자. Counter 컴포넌트에서 한번 누를 때마다 5씩 증가하는 버튼을 만들어보자. store 폴더의 index.js 파일 (reducer function 과 createStore가 있는 파일) const counterReducer = (state = { counter: 0 }, action) => { if (action.type === "increment") { return { counter: state.counter + 1 }; } if (action.type === "decrement") { return { counter: state.counter - 1 }; } i.. # 247 [udemy React 완벽 가이드 노트] 클래스 기반 컴포넌트가 있는 리덕스 클래스 기반 컴포넌트를 만들자. 그리고 메서드 incrementHandler와 decrementHandler와 toggleCounterHandler를 추가한다. 어떻게 리덕스에 접근할 수 있는가? class Counter2 extends Component { incrementHandler() { } decrementHandler() { } toggleCounterHandler() { } render() { return ( Redux Counter {counter} Increment Decrement Toggle Counter ); } } 함수 컴포넌트에서는 useDispatch와 useSelector 훅을 사용했었다. 훅은 클래스 컴포넌트에서는 사용할 수 없다. Connect 함수 react-redux는.. # 243 [udemy React 완벽 가이드 노트] 리액트용 리덕스 스토어 만들기 프로젝트 폴더에 npm install npm install redux react-redux 를 차례대로 입력한다. redux는 react와 연동이 잘 안될 수도 있기 때문에 react-redux 서드파티 라이브러리를 같이 install해준다. 앞서 배웠던 reducer 함수와 store를 만든다. import { createStore } from "redux"; const counterReducer = (state = { counter: 0 }, action) => { if (action.type === "increment") { return { counter: state.counter + 1 }; } if (action.type === "decrement") { return { counter: stat.. # 241 [udemy React 완벽 가이드 노트] Redux 기능 const counterReducer = (state = { counter: 0 }, action) => { if (action.type === "increment") { return { counter: state.counter + 1, }; } return state; }; Reducer 함수를 위와 같이 작성한다면 초기 counter 값이 1이 되지 않을 것이다. action.type이 increment일 때만 1을 증가시킬 것이기 때문이다. 초기에는 변경되지 않은 default state를 return 하게 될 것이다. store.dispatch({ type: "increment" }); store.dispatch({ type: "decrement" }); 그리고 action을 이 두가지를 주게 되.. 이전 1 2 다음
