> Redux
- 상태 관리 코드를 분리할 수 있음
- 미들웨어를 활용한 다양한 기능 추가(ex.redux-saga)
- SSR시 데이터 전달이 간편(SSR:server-side-Randering)
- 리액트 콘텍스트보다 효율적인 렌더링 가능
-
리덕스 사용 방법
상단에 import { createStore } from 'redux'; / import { Provider, useSelector, useDispatch } from 'react-redux'; 삽입 -
리덕스 구조
: 리듀서의 반환값은 새로운 상태값
: 간단하고 직관적인 구조 -
액션
: 액션크리에이터를 만들어서 사용
store.dispatch();
-
미들웨어
: 마지막 미들웨어에서 리듀서를 호출 -
리듀서
-
스토어
=> useSelector()
=> useDispatch() - 거의 변하지는 않음
=> reselect()
> MobX
- 객체지향 느낌
- 데코레이터(자바 어노테이션과 유사)제공하기 때문에 깔끔한 코드 생성
- 캡슐화: state를 메소드 통해서만 변경할 수 있도록 private하게 관리할 수 있음
1. State: 어플리케이션의 데이터 상태
2. Derivations: 어플리케이션으로부터 자동으로 계산되는 모든 값.(파생 값)
3. Reaction: 값을 생성하지 않는 함수. I/O와 연관된 작업들. 적당할 때에 자동으로 DOM을 업데이트하게 해주고 네트워크 요청을 하도록 해줌
4. Action: action은 state를 변경하는 모든 것
-
사용법
: mobx, mobx-react 라이브러리 설치
커멘드에 npm i mobx mobx-react 입력 -
MobX기본 사용함수
import React, {Component} from 'react';
import {decorate, observable, action, computed} from 'mobx';
import {observer} from 'mobx-react';- Store구축
: obervable
object로 만들어주는 것 = state model을 만든 것
