상세 컨텐츠

본문 제목

Redux 란?

Redux

by 비오스터딩 2020. 11. 16. 11:25

본문

리덕스는 어플리케이션을 예측가능하도록 만들어준다.

예측가능하기 때문에, 어플리케이션의 복잡성이 낮아지고,

그로 인해 똑같은 어플리케이션을 만들어도 리덕스를 사용하면 훨씬 피로도가 낮다.

또한 더 복잡한 어플리케이션을 보다쉽게 만들 수 있다.

 

** 주로 react와 함께 사용하지만 react 한정 라이브러리는 아니다. 즉 vanilla Javasript와도 사용가능하다.

 

 

리덕스의 특징.

1. 모든 어플리케이션이 하나의 상태(store)를 가짐.

즉 하나의 객체(store) 안에 어플리 케이션에 필요한 정보(state)가 있다.

 

2. state는 외부로부터 철저하게 차단되어 관리된다.

마음대로 store에 접근해서 state를 바꿀 수 없다.

오직 담당자(reducer)를 통해서만 데이터를 수정하고 가져가는 것이 가능하다.

 

3. 시간여행을 할 수 있음.

 

 

## Redux 작동 원리

생활코딩 Redux, https://opentutorials.org/module/4078/24935

- store : state가 저장되는 곳. 

const store = Redux.createStore(reducer);

 

- getState : state 값을 가져옴.

state.getStore();

 

- subscribe : state의 값이 바뀔 때마다 render 호출.

store.subScribe(render);

 

- dispacth : reducer를 호출하여 state의 값을 바꾸고, subscribe를 호출하여 render함수를 바꿈.

store.dispatch({type:'action 타입', payload:{ state });

 

- reducer : 현재 state값을 받고 action을 참조하여, state의 새로운 값을 리턴.

function reducer(state, action) {
	if(action.type === 'action 타입') {
    		...실행할 코드...
        return Object.assign({}, state, {
        	새로운 state 값
        }
    }
}
반응형

'Redux' 카테고리의 다른 글

Redux:: To Do List 만들기  (0) 2020.11.18
Redux :: 숫자 더하기, 빼기 버튼 만들기.  (0) 2020.11.18
Redux :: subscribe 사용하기  (0) 2020.11.18
Redux :: action, dispatch 사용하기  (0) 2020.11.18
Redux :: store, reducer 만들기  (0) 2020.11.18

관련글 더보기

댓글 영역