[KDT]FCFE - 9주1일 Redux 파보기 ( ReactContext가 있는데 Redux가 필요한 이유부터)
Redux
React Context 가 있는데 Redex가 필요한 이유
- 우선 둘 중 하나를 선택하는 것이 아닌 둘 다 함께 사용할 수 있다.
React Context만 사용했을 때의 잠재적 단점
- Complex Setup / Management
: 큰 프로젝트를 하는 경우 너무 많은 Context Provider를 갖게 된다.( 복잡도 상승 )
return (
<AuthContextProvider>
<ThemeContextProvider>
<UIInteractionContextProvider>
<MultiStepFromContextProvider>
<UserRegistration />
</MultiStepFromContextProvider>
</UIInteractionContextProvider>
</ThemeContextProvider>
</AuthContextProvider>
)
- Perfomance
: state 변동횟수가 많은 경우 사용하기 어렵다.
Redux 의 구조
-
프로젝트 하나에 프로젝트 전체를 위한 하나의 store(중앙 데이터 저장소) 만 존재한다.
-
중앙 저장소는 특정 컴포넌트( 설정 되어있는 )를 Subscription 하고 중앙 데이터 저장소의 state가 변경되는 subscription 있는 component에 알린다.
-
store에 데이터를 직접 조작하지 않는다.
-
component는 reducer 에 action을 전달한다. reducer는 전달 받은 action을 확인하여 해당하는 action으로 중앙 저장소의 데이터를 변경한다.
Reducer Function
- 순수 함수 여야 한다. 같은 밸류가 들어가면 같은값을 리턴하는 함수
const redux = require('redux');
// state에 초기값 설정
const couterReducer = (state = {counter:0}, action)=>{
return {
counter: state.counter +1
};
};
const store = redux.createStore(counterReducer);
const couterSubscriber =() =>{
// 스토에 안에 최신 업데이트된 data를 가져올수 있는 함수
const latestState = store.getState();
console.log(latestState);
}
// data를 가져간 함수를 구독하여 data가 최신화 되면 업데이트 해줌.
store.subscribe(counterSubscriber);
Author And Source
이 문제에 관하여([KDT]FCFE - 9주1일 Redux 파보기 ( ReactContext가 있는데 Redux가 필요한 이유부터)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leedocs/KDTFCFE-9주1일-Redux-파보기-ReactContext가-있는데-Redux가-필요한-이유부터저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)