Redux : Flux 패턴의 상태관리 라이브러리
3가지 규칙
- 하나의 어플리케이션 안에는 하나의 Store만 사용한다.
- 상태는 읽기 전용이다.
- 변화를 일으키는 함수, Reducer는 순수한 함수여야 한다.
설치
npm install redux react-redux
설정
: Provider
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
- index.js 에서 Provider 컴포넌트로 App 컴포넌트를 감싼다.
- store.js 파일을 임포트하여 Provider의 props로 전달
- 결과적으로 최상위에 store가 연결되므로 각각의 컴포넌트에 store를 import하는 번거로움이 줄어든다.
개념
1) action
: 어떤 동작에 대해 선언되어진 객체
- 하나의 객체로 나타낸다.
- type 프로퍼티 필수
2) action creator
: Action 을 생성해 실제로 객체로 만들어주는 함수
3) reducer
: state 에 변화를 일으키는 함수
4) store
: state 를 수시로 확인해 View 한테 변경된 사항을 알려줌
'Development > React.js' 카테고리의 다른 글
Next.js - pages와 layout (0) | 2022.03.28 |
---|---|
Next.js란? (0) | 2022.03.28 |
상태관리 라이브러리 (0) | 2022.03.24 |
Styled Components (0) | 2022.03.24 |
CSS in JS (0) | 2022.03.24 |