![]()
- 리덕스 미들웨어 : 애션을 디스패치했을 때 리듀서에서 이를 처리하기 전에 사전에 지정된 작업들을 실행한다. 액션과 리듀서 사이의 중간자라고 봐도된다. - 미들웨어는 특히 네트워크 요청과 같은 비동기 작업을 할 때 매우 유용 git clone https://github.com/vlpt-playground/redux-starter-kit.git cd redux-starter-kit yarn redux-logger 라이브러리 사용 yarn add redux-logger src/stoer.js import { createStore, applyMiddleware } from 'redux'; import modules from './modules'; // 미들웨어가 여러 개일 떄는 파라미터로 전달하면 된다. /..
![]()
Immutable : https://immutable-js.github.io/immutable-js/ Immutable.js Immutable collections for JavaScript Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data immutable-js.github.io - 자바 스크립트에서 불변성 데이터를 다룰 수 있도록 도와주는 라이브러리 Ducks : ..
![]()
1. 생성 create-react-app redux-counter // redux-counter 디렉리토 이동후 아래 명령실행 yarn add redux react-redux 2. 불필요한 파일 제거 - App.css - App.js - App.test.js - logo.svg 3. 디렉토리 생성 - src 아래 actions, components, containers, reducers, lib 폴더 생성 A. 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트 설명 - 리덕스를 사용하는 프로젝트에서 자주 사용하는 구조 1) 프리젠테이셔널 컴포넌트 - 오직 뷰만 담당 - 옵션 : DOM 엘리먼트와 스타일, 프리젠테이셔널 컴포넌트나 컨테이너 컴포넌트가 있을수 있음 - 리덕스 스토어에 직접 접근할 권한 X - 오직 ..
![]()
- App에서 모든 상태의 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App 컴포넌트가 리렌더링되고, 리액트 특성상 하위 컴포넌트도 모두 리렌더링됩니다. - 프로젝트가 복잡해질수록 상태 관리 로직이 너무 많아지고 컴포넌트의 코드 길이가 너무 길어지는 현상이 일어나므로 이것을 해결하고자 리덕스라는 상태 관리 도구를 사용하면 해결됩니다. - 리덕스 : 상태관리의 로직을 컴포넌트 밖에서 처리하는것을 뜻합니다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있다. 액션 : 상태 변화를 일으킬 때 참조하는 객체 디스패치 : 액션을 스토어에 전달하는 것을 의미 리듀서 : 상태를 변화시키는 로직이 있는 함수 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 구독 - 규칙 1) 스토어는 단 ..
![]()
환경버전 node : 12.4.0 yarn : 1.16.0 Visual Studio Code : 1.35.1 브라우저 : 크롬 / 버전 75.0.3770.100(공식 빌드) (64비트) 초기생성 PS C:\Users\kcom\Documents\TEST1> npx create-react-app daily warning ..\..\..\package.json: No license field [1/4] Resolving packages... warning react-scripts > fsevents@2.0.6: Please update: there are crash fixes [2/4] Fetching packages... info fsevents@1.2.9: The platform "win32" is inc..
