일반적인 Redux : yarn add react-redux redux
Redux ToolKit : yarn add react-redux @reduxjs/toolkit
1) 일반적인 Redux
// counter.js
// Action Value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";
// Action Creator
export const addNumber = (payload) => ({
type: ADD_NUMBER,
payload,
});
export const minusNumber = (payload) => ({
type: MINUS_NUMBER,
payload,
});
// Initial State
const initialState = {
number: 0,
};
// Reducer
const counter = (state = initialState, action) => {
switch (action.type) {
case ADD_NUMBER:
return {
number: state.number + action.payload,
};
case MINUS_NUMBER:
return {
number: state.number - action.payload,
};
default:
return state;
}
};
export default counter;
☞ 별도의 Action Value, Action Creator, Reducer를 작성해야 했음.
2) Redux ToolKit
// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
number: 0,
};
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});
export const { addNumber, minusNumber } = counterSlice.actions;
export default counterSlice.reducer;
☞ createSlice를 사용하여 한 번에 Action Value, Action Creator, Reducer를 생성하는 간결한 코드.
1) 일반적인 Redux
// configStore.js
import { createStore, combineReducers } from "redux";
import counter from "../modules/counter";
const rootReducer = combineReducers({
counter,
});
const store = createStore(rootReducer);
export default store;
☞ createStore와 combineReducers를 사용하여 별도의 설정이 필요
2) Redux ToolKit
// configStore.js
import { configureStore } from "@reduxjs/toolkit";
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";
const store = configureStore({
reducer: { counter, todos },
});
export default store;
☞ configureStore로 내장된 devtools를 사용하며 간단한 설정으로 여러 모듈을 등록할 수 있음.
1) devtools 설치:
크롬 웹 스토어에서 Redux Devtools를 설치.
2) 사용방법
개발자 도구 탭에서 Redux 메뉴를 통해 상태 및 액션을 확인하여 디버깅 가능.
간단한 DB와 API 서버를 생성해주는 패키지로, Frontend(FE) 개발에 임시적인 mock data를 생성하여 BE 작업을 기다리지 않고 효율적으로 협업할 수 있도록 도와줌
yarn add json-server
yarn json-server --watch db.json --port 4000
☞ 서버확인은 브라우저에서 http://localhost:4000/todos로 확인 가능함
웹 프로그래밍에서 통신은 서버(웹 서버)와 클라이언트(웹 브라우저) 간의 대화를 의미함
데이터를 주고 받음으로 이루어지며, 영어로는 'communication'이라고 함
1) 프로토콜
웹에서는 서버와 클라이언트 간의 대화를 위해 약속된 방식이 필요하며, 이를 프로토콜이라고 함
웹에서 주로 사용되는 프로토콜은 HTTP
2) 요청과 응답:
통신은 항상 클라이언트가 '요청'하고, 서버가 그에 따른 '응답'을 주는 방식으로 이루어짐
대화에서의 클라이언트는 정보를 요청하고, 서버는 요청에 대한 응답을 제공함
3) URL
protocol, domain, resource path, query variable, path variable 등으로 구성됨.
프로토콜은 주로 HTTP를 사용하며, URL을 통해 클라이언트는 서버에 요청을 보냄
4) HTTP 메서드
5) 상태코드
6) 주요 상태코드
yarn add axios
axios.get(url[, config]) // GET
(3) GET 요청 코드 예시
Axios를 사용하여 json-server의 todos 데이터를 가져와 useState를 통해 관리하는 코드를 작성함
Axios POST
Axios의 post 메서드는 서버에 데이터를 추가할 때 사용됨
사용 방법
axios.post(url[, data[, config]]) // POST
axios.delete(url[, config]) // DELETE
const onClickDeleteButtonHandler = (todoId) => {
axios.delete(`http://localhost:3001/todos/${todoId}`);
};
☞ GET, POST와 함께 작성된 코드에 onClickDeleteButtonHandler 함수를 추가하여 삭제 버튼을 눌렀을 때 해당 todo를 삭제하는 기능이 구현됨
axios.patch(url[, data[, config]]) // PATCH
const onClickEditButtonHandler = (todoId, edit) => {
axios.patch(`http://localhost:3001/todos/${todoId}`, edit);
};
☞ 수정하기 버튼과 해당 todo의 id 및 수정할 값을 입력받아 PATCH 요청을 보내는 기능이 구현됨
REACT_APP_API_URL=http://example.com/api
REACT_APP_API_KEY=abcdefg123456
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;
1) Fetch
```jsx
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())
.then(console.log);
```
2) axios
```jsx
const url = "https://jsonplaceholder.typicode.com/todos";
axios.get(url).then((response) => console.log(response.data));
```
1) Fetch
```jsx
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then(console.log)
.catch((err) => {
console.log(err.message);
});
```
2) axios
```jsx
const url = "https://jsonplaceholder.typicode.com/todos";
axios
.get(url)
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});
```
Thunk 함수 생성
'''jsx
export const __addNumber = createAsyncThunk(
"ADD_NUMBER_WAIT",
(arg, thunkAPI) => {},
);
'''
☞ 'createAsyncThunk' API 사용.
Thunk 함수 내부 구현
'''jsx
export const __addNumber = createAsyncThunk(
"addNumber",
(payload, thunkAPI) => {
setTimeout(() => {
thunkAPI.dispatch(addNumber(payload));
}, 3000);
}
);
'''