2020. 7. 1. 12:21ㆍ웹/React
Redux 정의
-
상태 관리 라이브러리(중앙 집중적 데이터 저장 방식)
-
컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더운 효율적으로 관리
-
컴포넌트 서로 간의 상태를 공유할 때, 손쉽게 상태 값을 전달
-
미들웨어라는 기능을 통해 비동기 작업, 로깅등의 확장 작업들을 쉽게 할 수 있도록 도와줌
예제) 복잡한 컴포넌트 구조
-
E 컴포넌트의 doSomething 이라는 함수에 의해 something 이라는 상태를 E -> B -> Root 전달, Root 에서는 A -> C -> F 로 전달
-
props 가 필요한 곳으로 전달되게 하기 위하여, 실제로는 props 가 사용되지 않지만 전달을 위해 거쳐가야 하는 것은 리렌더링 할 때 비효율적
예제) 리덕스를 사용
-
상태와 변화 로직이 저장되어 있는 스토어를 통해, 컴포넌트에서 원하는 상태값과 함수를 주입
Redux 개념
store
-
정보가 저장되는 장소
-
한 애플리케이션 당 하나의 스토어
state
-
정보
-
직접 접근하는 것은 불가능
reducer
-
state 를 입력값으로 받고 action을 참조해서 새로운 객체를 return
-
return 을 해주는 객체는 새로운 state의 값 => render 호출(subscribe)
function reducer(state, action) {
switch(action.type) {
case 'CREATE'
return ...
case 'UPDATE'
return ...
default
reutrn ...
}
}
render
-
화면에 보여주는 역할
-
state 값을 참조하여 UI 구성
function redner(){
const state = store.getState();
...
document.querySelector('root').innerHTML = `<h1>Hello World!</h1>`;
}
dispatch
-
reducer를 호출하여 state 값을 바꿈
-
현재의 state, action 데이터 전달
-
subscribe를 이용하여 화면 갱신
store.dispatch({type: 'CREATE', payload: {name: 'TEST', age: '23'}});
subscribe
-
store의 state의 값이 바뀔때 마다 render 함수 호출하도록 하는 함수
store.subscribe(render);
getState
-
정보를 가져오는 함수
참조
'웹 > React' 카테고리의 다른 글
Redux를 사용하는 이유 (0) | 2020.07.02 |
---|---|
SPA(Single Page Application) (0) | 2020.06.30 |
React 개념과 특징 (0) | 2020.06.26 |