
### React를 사용하면서 서버와 연결 전, Post Man을 통해 임시로 서버를 연결해 React와 소통하는 데이터와 view가 어떻게 처리되는지 확인하고 싶을때 사용해볼 수 있다.

postman 링크 : https://www.postman.com/

## json-server 설치

```bash
yarn add json-server
```

위 명령어 입력 시 db.json 파일이 자동으로 생성된다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fle0HO%2FbtrMjcfRkOG%2FPMsBpdgzHf6545oXRlN8BK%2Fimg.png)

설치가 완료된 후 아래의 명령어를 입력하면 json server가 실행된다.

## json-server 실행

```bash
yarn json-server --watch db.json --port 3001
```

> json-server를 설치해줄때 생성된 db.json 파일을 실행하는데, 3001번 포트를 사용한다는 의미이다. 포트를 설정해주지 않으면 기본값은 3000이다.

> 보통 React를 로컬로 실행시킬때의 포트도 3000이기 때문에 3001번으로 열어줬다. 포트번호는 3001이든 4000이든 5000이든 사용하고 있는 포트번호만 아니면 된다.

## postman 사용

이제 임시 DB를 사용하고 있기 때문에 Post Man을 설치하거나, 웹에 로그인을 한 후, json-server가 실행된 상태로 post man에 적용하고자 하는 url을 입력해주면 GET, POST, PUT, DELETE 등 다양한 요청을 처리할 수 있게 된다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl4yDj%2FbtrMkdzirLp%2FweLBKktEnHFX5QcT4NHTK1%2Fimg.png)

사용되는 url은 db.json에 있는 목록명을 기준으로 적용된다.

```javascript

// ex

{
  "comments": [
    {
      "id": 1,
      "profile_url": "https://picsum.photos/id/1/50/50",
      "author": "abc_1",
      "content": "UI 테스트는 어떻게 진행하나요",
      "createdAt": "2022-03-01"
    },
    {
      "id": 2,
      "profile_url": "https://picsum.photos/id/2/50/50",
      "author": "abc_2",
      "content": "막히면 대답은 빨리 해주나요",
      "createdAt": "2022-03-02"
    },
  ],
  "post": [
    {
      "id": 1,
      "author": "abc_1",
      "content": "UI 테스트는 어떻게 진행하나요",
      "createdAt": "2022-03-01"
    }
    {
      "id": 2,
      "author": "abc_2",
      "content": "막히면 대답은 빨리 해주나요",
      "createdAt": "2022-03-01"
    }
  ]
}

```

예를 들어 db.json이 위와 같이 돼있는 상태라면

### http://localhost:3001/post - post 데이터

1. GET : http://localhost:3001/post - 전체 post 목록 불러오기
2. GET : http://localhost:3001/post/1 - id가 1인 post 불러오기
3. POST : http://localhost:3001/post - 새 post 생성(저장)
4. PUT : http://localhost:3001/post/1 - id가 1인 post 수정하기
5. DELETE : http://localhost:3001/post/1 - id가 1인 post 삭제하기

### http://localhost:3001/comments - comments 데이터

1. GET : http://localhost:3001/comments - 전체 comments 목록 불러오기
2. GET : http://localhost:3001/comments/1 - id가 1인 comments 불러오기
3. POST : http://localhost:3001/comments - 새 comments 생성(저장)
4. PUT : http://localhost:3001/comments/1 - id가 1인 comments 수정하기
5. DELETE : http://localhost:3001/comments/1 - id가 1인 comments 삭제하기

위와 같은 방식으로 기본적인 동작을 사용해볼 수 있고, header 값이나 body 값 설정 등 다양한 작업을 진행해볼 수 있다.

Redux를 사용할때, 해당 데이터들을 추출하여 전역 상태로 관리해보는 등의 작업을 실행할 수 있다.


postman을 이용해 redux Mock server(json-server) 사용해보기

redux mock server


# ReduxToolkit

리덕스 툴킷은 일반적인 리덕스보다 store 설정을 용이하게 해주고, 추가적인 패키지 설치가 필요하지 않게 설계되었으며, 보일러플레이트(여러 군데에서 반복되는 코드)를 최소화하기 위해 만들어졌다.

더 사용하기 쉽다는 의미이다. 이번 글에서는 미들웨어인 AsyncThunk와 함께 사용하는 방법을 확인할 수 있다.

## 1. 설치

```bash
yarn add @reduxjs/toolkit react-redux
```

## 2. store 생성

```javascript
// src/redux/store.js

import { configureStore } from "@reduxjs/toolkit";
import posts from "./modules/postSlice"; // 만들어줄 Slice

const store = configureStore({
  reducer: {
    posts,
  },
});
export default store;
```

## 3. 최상위 파일(index.js, App.js 등)에 Provider import해오기

```javascript
// import -- 기존 코드들 --
import { Provider } from "react-redux";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);
```

## 4. 슬라이스 생성

2번의 store에 import 해줄 파일이다.

```javascript
// postSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const BASE_URL = "http://localhost:3001";

const initialState = {
  // data, isLoading, error로 상태관리
  posts: [],
  isLoading: false,
  error: null,
};

export const getPosts = createAsyncThunk(
  "GET_ALL_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.get(`${BASE_URL}/posts`);
      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const addPosts = createAsyncThunk(
  "POST_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.post(`${BASE_URL}/posts`, payload);
      console.log("data", data);
      return thunkAPI.fulfillWithValue(data);
    } catch (errer) {
      return thunkAPI.rejectWithValue(errer);
    }
  },
);

export const updatePosts = createAsyncThunk(
  "UPDATAE_Posts",
  async (payload, thunkAPI) => {
    try {
      console.log(payload);
      const { data } = await axios.put(
        `${BASE_URL}/posts/${payload.id}`,
        payload,
      );
      console.log("data", DataTransfer);
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const deletePosts = createAsyncThunk(
  "DELETE_posts",
  async (payload, thunkAPI) => {
    try {
      await axios.delete(`${BASE_URL}/posts/${payload}`);
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    /* Pending */
    [getPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [addPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [deletePosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    /* Fulfilled */
    [getPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      state.posts = [...action.payload];
    },
    [addPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload);
    },
    [updatePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      const newState = state.posts.map(item =>
        action.meta.arg.id === item.id
          ? { ...item, content: action.meta.arg.content }
          : item,
      );
      state.posts = newState;
      return state;
    },
    [deletePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      const newState = state.posts.filter(item => item.id !== action.meta.arg);
      state.posts = newState;
      return state;
    },
    /* Rejected */
    [getPosts.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
  },
});

export default postsSlice.reducer;
```

이 상태에서 Postman을 통해 json 서버를 이용하기 때문에 BASE_URL은 로컬 경로로 설정해줬다.

extraReducers 의 pending, fulfilled, rejected는 각각 대기중/성공/실패 정도로 생각하면 된다.

아래와 같이 PostMan을 통해 db.json에 데이터가 정상적으로 확인되면

포스트맨 사용법 : https://lee-yo-han.github.io/redux/redux와-mock-server-사용하기

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fri6Yi%2FbtrMjiBl1Va%2FlCNsQyz5vPTIhIfBFfpC41%2Fimg.png)

아래와 같이 Redux hook을 통해 데이터를 자유롭게 사용할 수 있다.

```javascript
import { getPosts } from "../redux/modules/postSlice";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux"; // Redux hooks

export default function Home() {
  const data = useSelector(state => state.posts.posts); // postSlice에 있는 전역 State 가져오기
  const dispatch = useDispatch(); //dispatch 사용 준비

  useEffect(() => {
    dispatch(getPosts()); // dispatch 사용 dispatch(액션함수())
  }, []);

  console.log(data);

  return (
    <div>
      <p>redux랑 포스팅CRUD</p>
      <p>데이터를 주세욥</p>
      <ul>
        {data.map(item => (
          <li>
            <span>{item.id}</span>
            <span>{item.nickname}</span>
            <span>{item.content}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

위의 코드에서는 액션 함수의 인자(괄호())가 비어있지만, Slice에 원하는 액션 함수들을 작성한 후 dispatch를 해줄때 데이터가 필요한 경우는 아래의 순서로 데이터가 처리된다고 생각하면 좋다.

### 데이터 처리 순서

```javascript

// jsx component
dispath(액션함수(id등의 데이터))

// => postSlice 파일 내의 액션 함수
export const addPosts = createAsyncThunk(
    "POST_Posts",
    async (payload, thunkAPI) => { // payload를 통해 데이터를 받고 아래 코드에서 처리할 수 있도록 함
      try {
        const { data } = await axios.post(`${BASE_URL}/posts`, payload);
        console.log("data", data);
        return thunkAPI.fulfillWithValue(data); // 요청 성공 부분
      } catch (errer) {
        return thunkAPI.rejectWithValue(errer);
      }
    }
  );

// => extraReducers
export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    // ---- 생략 ----
    /* Fulfilled */
    [addPosts.fulfilled]: (state, action) => { // 요청 성공 시, action 인자를 통해 state(전역 상태)를 관리해줄 수 있음 (ex action.payload .---)
      state.isLoading = false;
      state.posts.push(action.payload);
    },
    // ---- 생략 ----
```

데이터가 정상적으로 화면으로 출력되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKVbGZ%2FbtrMljZJHmV%2F3XHhLVMqFgXEAjz2HqKky0%2Fimg.png)

단, useSelector를 사용할 때, (state)=>state... 부분은 데이터에 따라 값의 구조가 다를 수 있기 때문에, console.log()를 통해 데이터를 어떻게 받아오는지 확인하며 코드를 작성해주자.

## 간단한 CRUD 적용 예시

![image](https://blog.kakaocdn.net/dn/bDrG2e/btrMjWLhmxB/gsemxzlV7oyCzREe8oHOM1/img.gif)

## AsyncThunk를 사용한다는 것은

공식문서 : https://redux-toolkit.js.org/api/createAsyncThunk

공식 문서에 반환된 Promise를 기반으로 LifeCycle 작업을 전달하는 Thunk 작업 생성자를 반환해 비동기 요청 LifeCycle을 처리하기 위한 표준 권장 접근 방식을 추상화한다는 내용이 있다

이것은 위의 데이터 처리 순서로 설명한 것과 유사하다.

```javascript

export const addPosts = createAsyncThunk(
    "POST_Posts",
    async (payload, thunkAPI) => {
      try {
        const { data } = await axios.post(`${BASE_URL}/posts`, payload);
        console.log("data", data);
        return thunkAPI.fulfillWithValue(data);
      } catch (errer) {
        return thunkAPI.rejectWithValue(errer);
      }
    }
  );

  ↑↑↑ 이 부분에서 Promise를 반환해주고




 ↓↓↓↓ 이 부분에서 대기/성공/실패 로 구분해 데이터를 처리해준다

 //Panding
 //Fulfilled
 ...

 [addPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload); // 게시글을 추가했을때 처리해주는 방식
    },

 ...
 //Rejected

```

# 전체 예제코드

```javascript
// Home.jsx

import {
  deletePosts,
  getPosts,
  updatePosts,
  addPosts,
} from "../redux/modules/postSlice";

import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

export default function Home() {
  const [inputValue, setInputValue] = useState();

  const data = useSelector(state => state.posts.posts);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPosts());
  }, []);
  console.log(data);

  const addButton = () => {
    let addData = {
      nickname: "한삐",
      content: inputValue,
    };
    dispatch(addPosts(addData));
  };

  const deletButton = props => {
    dispatch(deletePosts(props));
  };

  const editButton = props => {
    let updateData = {
      id: props,
      nickname: "한삐",
      content: "냠냠1231241214",
    };
    dispatch(updatePosts(updateData));
  };

  return (
    <div>
      <p>redux랑 포스팅CRUD</p>
      <p>데이터를 주세욥</p>
      <input onChange={e => setInputValue(e.target.value)} type="text" />
      <button onClick={addButton}>글쓰기</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>
            <div>
              <span>{item.id}</span>
              <br />
              <span>{item.nickname}</span>
              <br />
              <span>{item.content}</span>
              <br />
            </div>
            <div>
              <button onClick={() => editButton(item.id)}>수정</button>
              <button onClick={() => deletButton(item.id)}>삭제</button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

```javascript
// store.js
import { configureStore } from "@reduxjs/toolkit";
import posts from "./modules/postSlice";

const store = configureStore({
  reducer: {
    posts,
  },
});

export default store;
```

```javascript
// postSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { current } from "@reduxjs/toolkit";
import axios from "axios";

const BASE_URL = "http://localhost:3001";

const initialState = {
  // data, isLoading, error로 상태관리
  posts: [],
  isLoading: false,
  error: null,
};

export const getPosts = createAsyncThunk(
  "GET_ALL_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.get(`${BASE_URL}/posts`);
      return thunkAPI.fulfillWithValue(data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const addPosts = createAsyncThunk(
  "POST_Posts",
  async (payload, thunkAPI) => {
    try {
      const { data } = await axios.post(`${BASE_URL}/posts`, payload);
      console.log("data", data);
      return thunkAPI.fulfillWithValue(data);
    } catch (errer) {
      return thunkAPI.rejectWithValue(errer);
    }
  },
);

export const updatePosts = createAsyncThunk(
  "UPDATAE_Posts",
  async (payload, thunkAPI) => {
    try {
      console.log(payload);
      const { data } = await axios.put(
        `${BASE_URL}/posts/${payload.id}`,
        payload,
      );
      console.log("data", DataTransfer);
      return thunkAPI.fulfillWithValue(data.data);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const deletePosts = createAsyncThunk(
  "DELETE_posts",
  async (payload, thunkAPI) => {
    try {
      await axios.delete(`${BASE_URL}/posts/${payload}`);
      return thunkAPI.fulfillWithValue(payload);
    } catch (error) {
      return thunkAPI.rejectWithValue(error);
    }
  },
);

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    /* Pending */
    [getPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [addPosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    [deletePosts.pending]: (state, action) => {
      state.isLoading = true;
    },
    /* Fulfilled */
    [getPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      state.posts = [...action.payload];
    },
    [addPosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload);
    },
    [updatePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      console.log(action);
      const newState = state.posts.map(item =>
        action.meta.arg.id === item.id
          ? { ...item, content: action.meta.arg.content }
          : item,
      );
      state.posts = newState;
      return state;
    },
    [deletePosts.fulfilled]: (state, action) => {
      state.isLoading = false;
      const newState = state.posts.filter(item => item.id !== action.meta.arg);
      state.posts = newState;
      return state;
    },
    /* Rejected */
    [getPosts.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },
  },
});

export default postsSlice.reducer;
```


React reduxToolkit과 미들웨어 AsyncThunk 사용해보기

redux toolkit async thunk


javascript에서의 ReduxToolkit 사용 예제 : https://lee-yo-han.github.io/redux/redux-toolkit-사용해보기

## 1. 설치

```bash
yarn add @reduxjs/toolkit react-redux
```

## 2. store 설정

state와 dispatch type 생성

```typescript
// store.ts
import { configureStore } from "@reduxjs/toolkit";
import commentSlice from "./commentSlice";

const store = configureStore({
  reducer: {
    commentSlice,
  },
});
export default store;

export type RootState = ReturnType<typeof store.getState>; // 1. state type 가져오기
export type AppDispatch = typeof store.dispatch; // 2. dispatch type 가져오기
```

## 3. Redux hook 설정

dispatch 함수와 useSelector 실행을 위해, Redux hook을 따로 설정해준다.

```typescript
// useRedux.ts

import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "../redux/store"; // store에서 미리 설정해준 state와 dispatch type

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

위의 설정을 마치면 javascript에서 dispatch를 사용하는 것과 같이 사용할 수 있다.

```typescript

// Form.tsx
import { useAppDispatch, useAppSelector } from "../hook/useRedux";
import { FormEvent } from "../type"; // 별도로 지정한 eventType
import { addComments } from "../redux/commentSlice"; // Slice의 action함수

export const Form = () => {
	const dispatch = useAppDispatch();

    const formData = {...}

    const onSubmitHandler = async (e: FormEvent, dispatch: any) => {
        e.preventDefault();
        dispatch(addComments(formData)); // 정상작동
    };

    return ( ...
}

```

참고 : https://redux-toolkit.js.org/usage/usage-with-typescript


Typescript react에서 ReduxToolkit 사용해보기

redux typescript react reduxtoolkit


# React에서 Redux 사용해보기

리덕스 툴킷 x

## Redux 설치

```bash
yarn add redux react-redux
```

1. src 디렉토리 안에 redux 폴더 생성
2. redux 폴더 안에 config, modules 폴더 생성 (생성할 state들의 그룹)
3. modules 폴더 안 store.js 생성
   > 폴더/파일 명은 목적이나 폴더 구조에 맞춰 자유롭게 생성해줘도 괜찮다.

## 스토어 생성

```javascript
// src/configStore.js

import { createStore, combineReducers } from "redux";
import todo from "./modules/todo"; // 모듈에 있는 reducer 불러오기

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;
```

## 스토어 연동

```javascript
// 디렉토리 최상단 파일 ex/ index.js or app.js

import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어준다.
  <Provider store={store}>
    <App />
  </Provider>,
);
reportWebVitals();
```

## reducer 편집

```javascript
// 예제
// todo.js - ./modules에 있는 파일

// Actions
const CREATE = "my-app/todo/CREATE";
const REMOVE = "my-app/todo/REMOVE";

// Reducer
//action이 없으면 state는 아래 initialState의 초기값, 있으면 action 값
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case CREATE: {
      const new_todo_list = [...state.todos, action.todo];
      return { todos: new_todo_list };
    }
    case REMOVE: {
      const new_todo_list = action.todo;
      return { todos: new_todo_list };
    }

    // ...etc

    default:
      return state;
  }
}

// Action Creators
export function createTodo(todo) {
  console.log("create 액션 생성");
  return { type: CREATE, todo };
}

const initialState = {
  // createTodo(todo)의 초기값 설정
  todos: [
    {
      id: 1,
      name: "qwert",
    },
    {
      id: 2,
      name: "asdf",
    },
  ],
};

export function removeTodo(todo) {
  console.log("remove 액션 생성");
  return { type: REMOVE, todo };
}
```

## 컴포넌트에서의 사용

reducer를 모두 작성해준 후 컴포넌트에서 사용할 수 있다.

```javascript

// 리덕스 훅
import {useSelector , useDispatch} from "react-redux";


const test = () =>{
	// 해당 상수는 useSelector를 통해 reducer에 있는 state 값을 가져온다.
	const testList = useSelector((state=>state.todo.todos))
    // 액션을 생성하기 위해 준비
    const dispatch = useDispatch()

    const addBtn = () =>{
    	// ---실행하고싶은 코드들---
        // -------------------------
        // dispatch로 액션을 생성했으니, 원하는 처리는 reducer에서 입력하면 된다.
        dispatch(createTodo(reducer에서 처리하고 싶은 값))
    }
    return(
    	<div></div>
    )
}

```

참조 : https://ko.redux.js.org/
