📖 오늘 학습 뽀인트!

1. React
   1-1 Redux
   1-2 Axios

1. React

1-1 Redux

지난 포스팅의 연장인 Redux이다. 다만, 지난 포스팅에서는 Vanilla JS에서의 Redux 사용이고, 이번 포스팅의 주제는 React에서의 Redux사용이다.

---

✍ React에서 Redux 사용

export const addNumber = () => {         // 1
    return { type: "ADD" }
};
export const substractNumber = () => {
    return { type: "SUBSTRACT" }
};
const initialState = {                  // 2
    stock: 100,
    goods: 1
};
const goodsReducer = (state = initialState, action) => { // 3
    switch (action.type) {            // 4
        case "ADD":
            return {
                ...state,
                stock : state.stock - 1,
                goods : state.goods + 1,
            }
        case "SUBSTRACT":
            return {
                ...state,
                stock : state.stock + 1,
                goods : state.goods - 1,
            }
        default:
            return state
    }
};
export default goodsReducer

1. Type을 생성하는 함수

2. 초기값 설정.

3. Reducer 함수 설정 및 초기화, JS에서 사용한 것과 같이 조건문으로도 초기화할 수 있다.

4. Switch-Case 문으로 각 action에 맞는 값을 반환.

function reactTest(){
	const {stock, goods} = useSelector(state=>({        //5
        stock: state.goodsReducer.stock,
        goods: state.goodsReducer.goods,
    }))
    const dispatch = useDispatch()                     //6
    const handleAdd = () => dispatch(addNumber())
    const handleSub = () => dispatch(substractNumber())
    return(
    <>
    	<p>{stock}</p>
        <p>{goods}</p>
        <button onClick={handleAdd}>+</button>
        <button onClick={handleSub}>-</button>
    </>
    )
}

5. useSelector Hook을 사용하여 Store State 값 조회. 상태 값 변경 시 상태값을 다시 가져와 컴포넌트를 렌더링. JS에서 subscribe 역할을 한다고 생각된다.
6. useDispatch 를 사용하여 dispatch를 사용. JS에서는 store.dispatch({type:'CHANGE_TEXT', text:value});"처럼 dispatch 함수에 action을 객체로 직접 전달했다. React에서는 reducer 컴포넌트 내부에 action을 생성하는 함수가 정의되어 있어(1번 프로세스) 해당 함수인 addNumber, substractNumber을 반환 받아 action을 전달한다.

1-2 Axios

🕵️‍♀️Axios란?
자바스크립트의 fetch 처럼 Promise를 활용하는 HTTP 비동기 통신 라이브러리이다.

//axios
axios.get("그냥 아무 URL")
 .then(res=> console.log(res.data))
//fetch
fetch("아무 URL")
 .then(res => res.json())
 .then(data=> console.log(data))

URL에 있는 data를 받아올 때 axios는 data에 값들이 저장되어 있어 바로 접근이 가능하다. 반면, fetch의 경우 json으로 변환해야 값들을 확인할 수 있다.

---

✍ fetch VS Axios
1. fetch와 Axios의 가장 큰 차이로는 위 코드처럼 Axios는 응답을 JSON 형태로 자동 변경해준다.
2. fetch는 추가 모듈 설치가 필요 없다. Axios는 설치 필요.
3. Axios는 요청을 취소할 수 있다.