✅Redux 사용 1번째 이유
컴포넌트 안에 컴포넌트 안에 컴포넌트.. 에서 최상위의 state를 쓸꺼면 props.props...계속 props. 이렇게 무한 props 체인을 쓰고 싶지 않고 state를 가져다 쓰기 위해.
✅Redux 사용 2번째 이유
- state 데이터 관리가 용이하다(state 변경)
redux를 쓸 때 state 데이터를 수정하려면?
- state 데이터의 수정방법을 index.js에다가 미리 정의해야함. (일명 reducer)
- index.js에게 수정 하라고 요청
장바구니 품목에 +/- 버튼 만들기
데이터 수정하는 법 -> reducer로 만든다.
reducer는 그냥 function 으로 시작하는 함수로 만들면 됨.
근데 reducer는 function안에
1. state 초기값과
2. state 데이터 수정방법이 잔득 들어있는 함수입니다.
이제 장바구니 데이터를 조작할 수 있는 reducer를 한번 만들어봅시다.
(index.js)
let 초기값 = [{ id : 0, name : '멋진신발', quan : 2 }];//따로 state변수 만듬
function reducer(state = 초기값, 액션){ // 따로 만든 state변수를 reducer에 default 파라미터 문법으로 삽입
return state // state를 퉤 뱉어주는 함수일뿐
}
let store = createStore(reducer);
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App/>
</Provider>
</BrowserRouter>
</React.StrictMode>
);위와같은 작성만으론 state기본값만 뱉어내는 reducer일뿐이다.
default 파라미터 문법(es6 새롭게 도입)
function test(a = 10, b = 20){ console.log(a + b) } test(1); // 211번째 인자로 1이 들어갔지만 2번째 인자로는 들어온 인자가 없어서 default값 20이 적용되어 1+20 = 21이다.
reducer에 데이터 수정방법을 정의해놓자
reducer는 데이터 수정방법을 정의해놓는 곳!
(index.js)
let 기본state = [{id : 0, name : '멋진신발', quan : 2}];
// reducer안에 수정방법을 미리 정의해놓은것이 redux를 사용하는 2번째 이유.
// 1번째 이유 : props 사용 안하고 싶어서.
function reducer(state = 기본state, 액션){ //액션: 액션을 취해준다해서ㅇㅇ
if (액션.type === '수량증가') { // 수량증가라는 요청이 들어오면
return 수량증가된새로운state // 변경된 state 뱉음
} else {
return state
}
}
let store = createStore(reducer);데이터 수정방법을 정의했으면 HTML에서 버튼을 눌렀을때
'수량증가'라고 작명해놓은 데이터 수정방법을 실행해달라 라고 명령을 할 수 있다.
이 때 dispatch() 함수를 사용하면 HTML안에서 reducer함수를 동작시킬 수 있다.
dispatch 뜻 : 전송하라
(Cart.js에 있던 버튼)
{
props.state.map((a, i) => {
return (
<tr key={i}>
<td>{ i+1 }</td>
<td>{ a.name }</td> {/* td : table data 세로선 생성*/}
<td>{ a.quan }</td>
<td>{ a.change }</td>
<td>
<button onClick={() => { props.dispatch({ type : '수량증가', idx : i })}}>+</button> {/* 콜백안쪽 외워라. 데이터 수정요청하는 방법 */}
<button onClick={() => { props.dispatch({ type : '수량감소', idx : i })}}>-</button>
</td>
</tr>
)
})
}
<button onClick={()=>{ props.dispatch({type: '수량증가',idx : i}) }}> + </button>수량 증가 요청이 들어오면 state데이터의 첫째 아이템 quan항목을 1증가시켜보겠음.
// 각 배열의 요소 순서에 맞는 버튼을 눌렀을때 동작하게끔 idx 이용
(index.js)
let 기본state = [{id : 0, name : '멋진신발', quan : 2}];
function reducer(state = 기본state, 액션){
if (액션.type === '수량증가') {
let copy = [...state];
//array, object로 구성된 state 데이터를 수정하려면 깊은복사 후 진행.
copy[액션.idx].quan++;
return copy
} else if (액션.type === "수량감소") {
let copy = [...state];
if (copy[액션.idx].quan > 0) {
copy[액션.idx].quan--;
return copy;
} else {
return state
}
}else {
return state;
}
let store = createStore(reducer);이제 redux 데이터들은 위의 스텝에 따라 수정.
1. reducer에 수정방법을 미리 정의하고
2. props.dispatch()로 수정방법을 실행해주면 됨.
정리
사실 소규모 사이트에선 전혀 필요 없다. 오히려 셋팅해주고 하는것이 더욱 복잡해짐
props 안쓰려다가 더 다른 복잡한 것들을 설치해야한다.
대규모 사이트에선 빛을 발한다.
대규모 사이트엔 component가 100개가 있고 그각각의 곳들에서 장바구니 state를 수정하는 코드를 짜게 될것이다. 만약 state 하나에 이상한 값이 들어가서 버그가 생기면 버그 찾아다녀야 한다. 100개를 싹 다.
위와 같은 절망적인 상황을 해결해주는 redux
redux안의 reducer 또는 dispatch()함수만 잘들여다보면 state가 어떻게 바뀌는지 바로 확인 가능하다!
#리덕스를 쓰는 이유 : 대규모 사이트에서 상태관리가 용이해서이다.
