[Redux] redux(리덕스) 사용하기
redux(리덕스) : Javascript앱을 위한 예측 가능한 상태 컨테이너
useState (): 간단한 상태의 업데이트
useReducer() : 여러 개의 상태를 dispatch를 통해 업데이트
이때 redux는 리액트의 useReducer()를 잘 이해하고 있으면 좋다 !
redux의 3가지 규칙
- 하나의 애플리케이션 안에는 하나의 스토어가 있다.
- 상태는 읽기전용이다.
- reducer는 순수한 함수여야 한다.
▶ Javascript에서 redux 사용하기
1) 아래의 URL주소로 들어간다.
https://cdnjs.com/libraries/redux
2) 페이지에 보이는 주소 두 개 중 아무 주소를 복사한 후, HTML <head>태그 안에
<script src='복사한 주소를 붙여넣기'></script>
▶ React에서 redux 사용하기
1) 터미널 열어 패키지 설치하기 !
☞ npm install redux , npm install react-redux (두 개 다 설치!)
2) package.json 파일에 들어가 잘 설치되었는지 확인한다.
▶ redux의 장점
- 상태를 예측 가능하게 만든다.
- 유지 / 보수에 용이하다.
- 디버깅에 유리하다. (redux dev tools : 크롬 확장 프로그램)
기본 Redux의 상태 관리하기
1. Store(스토어) 생성하기 : store에는 현재 상태(state), reducer함수, 내장함수들이 있다.
↓ store의 내장함수들 ↓
dispatch(), subscribe(), getState() 가 있다.
기본 구문 >
const store = Redux.createStore(reducer함수);
2. 상태 값 반환하기 : redux에서 state는 그냥 불러올 수 없고, store의 내장함수인 getState()를 호출 시 상태 값을 불러올 수 있다.
기본 구문 >
store.getState();
3. 상태 값 변경하기 : dispatch()호출 시 reducer()함수가 호출됨
기본 구문 >
store.dispatch({
type: 'hahaha'
});
4. 구독하기 : store의 내장함수인 subscribe(함수명)로 상태가 업데이트 될 때마다 전달해준 특정 함수가 호출하게 만든다.
기본 구문 >
store.subscribe(함수명);
javascript에서 redux 사용하기 실습 >
1) redux 사용 X
2) redux 사용 O
React에서 Redux Module 생성 & 상태 관리하기
리액트에서 리덕스를 사용할 때 순서 : 리덕스 모듈 생성 → 루트 리듀서 생성 → 스토어 생성 & 스토어 전역에 사용 → Hook함수 작성
1. redux module(리덕스 모듈) : action타입, action 생성 함수, reducer 함수가 모두 포함되어 있는 js파일
1) action 타입 : action객체의 type 값을 변수에 담아서 그 변수를 reducer함수의 action객체의 type 값에다 지정(오타 줄이기)
2) action 생성 함수 : action객체를 함수에 담아서 사용하기 위함 (필수 작성은 아님 !)
3) reducer 함수 : 상태를 업데이트 해주는 함수, 두 개의 파라미터를 받아옴 ☞ state(상태), action객체
2. rootReducer(루트 리듀서) : 한 프로젝트에 여러 개의 reducer가 있을 경우, 한 reducer로 합쳐서 사용하는데,
그 합쳐진 reducer를 rootReducer라 함.
rootReducer 사용 방법 >
// 무조건 자동완성 !!!!!
import { combineReducers } from "redux";
import 모듈1 from "./module1";
import 모듈2 from "./module2";
// combineReducers({모듈이름: 모듈이름}) :
const rootReducer = combineReducers({
모듈1: 모듈1,
모듈2: 모듈2
// key와 value의 이름이 같으므로
// 모듈1,
// 모듈2
// 이렇게 적어도 된다 !
});
// 내보내기 해야 어디든지 사용 가능한 모듈이 된다!
export default rootReducer;
3. store(스토어) 생성하기 & store(스토어) 전역에 사용하기
1) src폴더에 있는 index.js파일에 들어간다.
2) legacy_createStore 자동완성 입력 후 import된 구문에 as createStore 적기
3) legacy_createStore를 지우고 그 자리에 스토어를 생성한 후 rootReducer함수를 호출한다.
4) root.render() 함수에 App 컴포넌트를 Provider로 감싸준다. (자동완성 해서 import 꼭 하자)
4. 컴포넌트 생성하기 & Hook함수 사용하기
1) 컴포넌트 생성하기
- 프레젠테이셔널 컴포넌트 : 리덕스 스토어에 직접 접근하지 않고 필요한 값을 컨테이너 컴포넌트에서 props로 받아와 화면에 보여주는 컴포넌트
- 컨테이너 컴포넌트 : 리덕스 스토어에 직접 접근해 상태를 조회, action을 dispatch할 수 있는 기능을 담은 컴포넌트 (다른 프레젠테이셔널 컴포넌트를 불러와 사용한다.) = useSelector와 useDispatch를 실행
2) Hook함수 사용하기
- useSelector(콜백함수) : 리덕스 스토어의 state를 조회하는 함수
// 1. 기본 모든 상태 조회하기
const number = useSelector(state => state);
// 2. 상태의 특정 값 조회하고 싶을 때
const number = useSelector(state => state.number);
// action객체의 특정 key값으로 접근해 상태를 조회한다 !- useDispatch() : 상태 업데이트를 요청할 dispatch함수를 반환
→ dispatch 호출 → action이 발생 → reducer함수가 호출 → 상태 업데이트
const dispatch = useDispatch();
// 리덕스 모듈파일에 있는 각각의 action들을 dispatch해주는 함수 생성
const onAdd = () => dispatch({액션 객체}); // 1번
const onAdd = () => dispatch(액션 생성 함수명()); // 2번
Redux DevTools : 애플리케이션 상태가 언제, 어디서, 어떻게 변경되었는지 쉽게 추적 할 수 있다.
1. 크롬 확장 프로그램 설치
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
Redux DevTools
Redux DevTools for debugging application's state changes.
chrome.google.com
2. 사용하기
1) 생성한 스토어에 아래처럼 복사해서 붙여넣기 ☞ 자바스크립트에서 리덕스 사용할 때
→ Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
2) 터미널에 패키지 설치하기 ☞ 리액트에서 리덕스 사용할 때
→ npm install --save @redux-devtools/extension
→ index.js파일의 스토어 생성에 아래처럼 적기
// 얘도 자동완성 !!!!!
const store = createStore(rootReducer, devToolsEnhancer());