Redux3 [220503] redux ) handleActions, createStore handleActions reducer를 좀 더 간단하게 만들 수 있음 import { handleActions } from 'redux-actions'; const CHANGE_USER = 'user/CHANGE_USER'; /* const reducer = (state = initState, action) => { switch (action.type) { case CHANGE_USER: return { ...state, user: action.user } } } 위 과정을 이렇게 줄여줌 */ const reducer = handleActions({ [CHANGE_USER]: (state, action) => ({ ...state, user: action.user }) }); createStore로 r.. 2022. 5. 9. [220502] redux로 전역상태 관리하는 기초세팅 state 관리를 위한 redux 액션이란 이벤트를 통해 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리인 redux. 예측 가능한 방식으로만 업데이트 될 수 있도록 하는 규칙과 함께 전체에서 사용해야 하는 상태에 대한 중앙저장소 역할을 함. Context API와 비슷한데 왜 Redux를 더 많이 사용할까? 1. 전체적으로 사용하는 state가 언제 어디서 어떻게 업데이트 되는지 자세하게 추적이 가능하다. 2. Context API와 다르게 redux는 미들웨어가 있어서 비동기처리가 가능하다. redux의 reducer가 state를 바로 반환하지 못하고, 미들웨어를 거쳐야 반환이 가능하다 예) 로그인 시도 -> 미들웨어 (성공액션, 실패액션, 에러액션) -> 결과에 따른 state 반환 Redu.. 2022. 5. 9. [220426] 회원가입창 만들기 / useState useState (state,function)이 실행되는 구조 첫째 인자값은 state를 초기화하는 값 state를 배열로 만들며 state[0]에 'aa'값이 들어가있다. const state = React.useState('aa') //['aa', ()=>]와 같다 console.log(state[0]) //aa 두번째 인자값은 state를 변화할때 실행할 함수 console.log(state[1])를 해보면 function 형태가 나오는 것을 볼 수 있다. 따라서 두번째 인자값엔 함수형이 들어간다고 볼 수 있다. const Form = () => { const state = React.useState('aa') console.log(state[0]) const handleSubmit = (e) =>.. 2022. 5. 3. 이전 1 다음
