미들웨어1. thunk 목차 미들웨어 추가 미들웨어 작동방식 기본 예제코드 응용 예제코드 1. 미들웨어 추가 Redux 툴킷 'configureStore' 사용 : API는 저장소 생성동안 자동으로 thunk 미들웨어를 추가함(옵션 설정 필요 없음) applyMiddleware() 메서드 사용: 저장소에 thunk 미들웨어를 수동으로 추가하는 방법(메서드의 인자값으로 미들웨어 전달) 2. 미들웨어의 작동 방식 가장 바깥쪽에 있는 함수는 저장소의 dispatch와 getState를 포함하는 store API 객체를 전달받는다. 가운데 함수는 체인의 내부에 있는 next 미들웨어 또는 실제 store.dispatch() 메서드를 전달받는다. 가장 안쪽에 있는 함수는 각각의 action들과 함께 호출될 것이다. 3. 기본 예제 코드.. 2022. 5. 4. redux이론5. 미들웨어 목차 미들웨어란? 미들웨어 사용 이유? 미들웨어 종류 applyMiddleware() 메서드 1. 미들웨어란? 디스패치 함수를 결합해서 새로운 dispatch 함수를 반환하는 고차함수 종종 비동기 action을 일반 action으로 전환함 함수 결합을 통해 결합 가능(action logging, routing, 비동기 API 호출 등의 일련의 동기 action으로 전환 용이) 2. 미들웨어 사용 이유? 미들웨어는 리덕스와 관련된 로직을 UI layer와 분리시켜 작성 가능케 한다. 이러한 리덕스 관련 로직들은 side effects를 가질 수 있는데, reducers(리듀싱 함수)들은 side effect를 가져서는 안된다. 하지만 실제 앱은 이펙트를 가지는 로직이 필요할 수도 있으며, 몇몇 이펙트들은 .. 2022. 5. 4. redux이론1. 기본 목차 Redux란? Redux 사용의 장점 Redux의 3가지 기본 원칙 Redux의 두가지 유형 리덕스의 사용법은 context API와 비슷하다. 근데 왜 리덕스를 많이쓸까? 바로 비동기처리 때문이다. 리덕스에는 미들웨어 존재하며, 리듀서가 state 반환 전 미들웨어에 먼저 들어가며 state를 바꿀 수 있는 내용을 미들웨어에서 결정한다. 그렇다면, 이번 게시글에서는 Redux 기본 개념에 대해서 알아보자 1. Redux란? JS 앱을 위한 예측 가능한 state 컨테이너 객체 const redux = require('redux') console.log(redux) // { // __DO_NOT_USE__ActionTypes: { // INIT: '@@redux/INITz.m.5.d.a.h.r', .. 2022. 5. 3. redux이론3. combineReducers(reducers) 목차 combineReducers란? 작성예시 state의 key 제어 방법 combineReducers()의 인자값 리듀싱 함수들에 대한 규칙 앱이 점점 복잡해지면 코드가 길어지고, 길고 복잡한 코드는 가독성을 떨어트린다. 또한 모든 업데이트 로직을 하나의 reducer에 작성하는 경우 유지보수가 용이하지 않다. 그래서 이번 게시글에서는 reducer를 한번 분리해보자! 1. combineReducer란? 각기 다른 reducer를 값으로 가진 객체를 받아서 createStore의 매개변수로 전달할 하나의 reducer로 변환해줌 생성된 reducer는 내부의 모든 reducer를 호출하고 결과를 모아서 하나의 state 객체로 변환해줌 state 객체의 형태는 reducers로 전달된 키들을 따름 2.. 2022. 5. 3. redux이론2. store 목차 store란? store 메서드(getState(), dispatch(), subscribe()) action 객체란? 1. store란? 1-1. 설명 앱의 전체 state 트리를 가지고 있는 저장소 저장소 안의 state를 바꾸는 유일한 방법은 action을 전달하는 것 저장소를 생성하기 위해서는 root reducing 함수를 createStore()메서드에 전달해야 함 객체 const store = createStore(reducer) //const [state,dispatch] = useReducer(reducer, initialState) // 두 코드는 비슷한 코드, store는 state와 dispatch라고 보면 됨 console.log(store) // store는 객체이다. //.. 2022. 5. 3. redux실습2. reducer 기본 1. 환경 셋팅 1-1. 설치 $ npm install redux react-redux 1-2. 불러오기 const redux = require('redux') 3. 실습 3-1. 레벨1 (1) 코드 const redux = require('redux') const {createStore} = redux const reducer = (state, action) => { if (action.type === `O'brien`) { return { name: 'conan' } } else if (action.type === 'cases_up'){ return{ ...state, cases: state.cases +1 } } else { return { name: 'Edogawa', cases: 0 } } } .. 2022. 5. 3. hook이론3. useContext() 목차 useContext() 메서드란? 문법 특징 이전 게시글에서 전역 데이터를 공유하기 위한 contextAPI에 대해 배운 적있다. https://yellow-w.tistory.com/254?category=1037018 오늘은 전역 데이터를 공유하기 위한 hook 메서드 인 useContext()에 대해서 알아보자. 1. useContext() 메서드란? 전역 데이터 공유를 위한 hook 메서드 context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환 context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 의 value prop에 의해 결정 2. 문법 2-1. 매개변수 context 객체 그 자체여야 함 .. 2022. 5. 2. React 환경셋팅 4. Redux 1. 설치 커맨드 $ npm install redux react-redux 2. dev툴로 확인하기 위한 커맨드 $ npm install redux-devtools-extension 2022. 5. 2. React 환경셋팅 2. React_router_DOM 목차 React_router_DOM이란? 라이브러리의 적용 범위 현재 기준 최신버전 설치 커맨드 불러오기 1. React_router_DOM이란? 웹 어플리케이션에서 클라이언트와 서버측 라우팅하는 리액트 라이브러리 UI를 구축하는 JS 라이브러리 2. 라이브러리 적용 범위 Routes 설정 LInk를 통한 경로 이동 레이아웃을 위한 라우터 분할 서버 렌더링 등.. 3. 최신 버전 설치(v6 -2021-12-17) $ npm install react-router-dom 4. 불러오기 BrowserRouter: 최상위 컴포넌트 link: a 태그 대신 써야하는 컴포넌트 Routes: 컴포넌트를 보여주게 함 Route: URI에 맞는 컴포넌트를 찾아주는 컴포넌트 import { BrowserRouter as .. 2022. 5. 2. 이전 1 2 3 4 5 다음
