리액트 심화 - Redux ToolKit, Redux Devtools, Json-server, 통신, Axios, GET, POST, env, Interceptor, Thunk

새벽로즈·2023년 11월 28일
TIL리액트웹개발프론트엔드
1

TIL

목록 보기
52/72
post-thumbnail

Redux ToolKit

  • 리덕스를 개량한 것
  • 코드 양을 줄이고 더 효율적으로 리덕스를 사용할 수 있도록 하는 도구
  • 일반적인 Redux와 구조와 패러다임은 동일함
  • 간편한 코드작성을 위해 새로운 Api를 추가함

React Toolkit 설치

일반적인 Redux : yarn add react-redux redux

Redux ToolKit : yarn add react-redux @reduxjs/toolkit

count 예시

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를 생성하는 간결한 코드.

configStore 비교

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를 사용하며 간단한 설정으로 여러 모듈을 등록할 수 있음.

Redux Devtools 사용하기

1) devtools 설치:
크롬 웹 스토어에서 Redux Devtools를 설치.

2) 사용방법
개발자 도구 탭에서 Redux 메뉴를 통해 상태 및 액션을 확인하여 디버깅 가능.

Json-server

간단한 DB와 API 서버를 생성해주는 패키지로, Frontend(FE) 개발에 임시적인 mock data를 생성하여 BE 작업을 기다리지 않고 효율적으로 협업할 수 있도록 도와줌

Json-server 설치

yarn add json-server

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 메서드

  • GET(조회)
  • POST(생성)
  • PUT/PATCH(수정)
  • DELETE(삭제)
    ☞ 클라이언트가 서버에게 원하는 동작을 알리는데 사용된다.

5) 상태코드

  • 서버의 응답은 상태코드를 포함하고 클라이언트에게 요청의 성공, 실패 등을 알려줌

6) 주요 상태코드

  • 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
  • 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
  • 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
  • **4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
  • 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.

Axios

  • Axios는 Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트로
  • 서버와 통신하기 위한 패키지

Axios 설치하기

yarn add axios

GET

  1. Axios get
  • Axios의 get 메서드는 서버의 데이터를 조회할 때 사용됨
  1. 사용방법
axios.get(url[, config]) // GET
  1. json-server API 명세서 확인
  • Axios를 사용하기 전에 json-server의 API 명세서를 확인하여 어떻게 요청해야 하는지 확인함

(3) GET 요청 코드 예시
Axios를 사용하여 json-server의 todos 데이터를 가져와 useState를 통해 관리하는 코드를 작성함

POST

  1. Axios POST
    Axios의 post 메서드는 서버에 데이터를 추가할 때 사용됨

  2. 사용 방법

axios.post(url[, data[, config]])   // POST
  1. POST 요청 코드 예시
  • Axios를 통해 새로운 todo를 서버에 추가하고, 화면을 업데이트하는 코드를 작성함
  1. 네트워크 탭 확인
  • 브라우저의 네트워크 탭을 통해 POST 요청에 대한 정보 및 서버 응답값을 확인함

Delete

  • 서버에 저장된 데이터를 삭제하는 데 사용됨
axios.delete(url[, config])  // DELETE
  1. 코드 사용 예시
const onClickDeleteButtonHandler = (todoId) => {
  axios.delete(`http://localhost:3001/todos/${todoId}`);
};

☞ GET, POST와 함께 작성된 코드에 onClickDeleteButtonHandler 함수를 추가하여 삭제 버튼을 눌렀을 때 해당 todo를 삭제하는 기능이 구현됨

Patch

  • 서버에 저장된 데이터를 수정할 때 사용됨
axios.patch(url[, data[, config]])  // PATCH
  1. 코드 사용 예시
const onClickEditButtonHandler = (todoId, edit) => {
  axios.patch(`http://localhost:3001/todos/${todoId}`, edit);
};

☞ 수정하기 버튼과 해당 todo의 id 및 수정할 값을 입력받아 PATCH 요청을 보내는 기능이 구현됨

env

  • '.env' 파일은 환경 변수를 설정하는 파일
  • 보안과 설정의 용이성을 높이기 위해 사용됨
  • 주로 API 키, 비밀번호, 주소 등을 관리함
  • '.env' 파일은 '.gitignore'에 등록하여 코드 버전 관리 시 노출되지 않도록 주의

env 사용법

  • '.env' 파일에는 'KEY=VALUE' 형식으로 환경 변수를 저장한다.
    REACT_APP_API_URL=http://example.com/api
REACT_APP_API_KEY=abcdefg123456

React에서의 env 사용

  • '.env' 파일에 정의한 변수는 'process.env' 객체를 통해 React 앱 전체에서 사용할 수 있음
    const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

Fetch

  • ES6부터 도입된 내장 라이브러리
  • Promise 기반의 비동기 통신을 제공
  • axios와 달리 별도의 설치 없이 사용 가능
  • 브라우저 호환성과 다소 불친절한 응답 처리 등의 단점이 있음

axios vs. Fetch

  1. axios
  • axios는 데이터를 JSON 형식으로 기본 제공
  • 응답 처리가 간편
  1. Fetch
  • Fetch는 응답을 두 번 받아야 함
  • 브라우저 호환성이 제한적임

데이터 읽어오기

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);
   });
 ```

Interceptor

  • HTTP 통신의 중간에 개발자가 원하는 코드를 실행할 수 있도록 하는 기능
  • 요청(request)이 처리되기 전과 응답(response)의 성공 또는 실패가 처리되기 전에 개입 가능함

Interceptor 주요 활용 예시

  • 요청 헤더 추가
  • 인증 관리
  • 로깅 및 에러 핸들링
  • 서버 주소 변경에 대한 일괄 처리 등

Redux 미들웨어

  • 리덕스에서 'dispatch'를 하면 'action'이 리듀서로 전달되고, 리듀서는 새로운 'state'를 반환
  • 미들웨어를 사용하면 이 과정 사이에 추가 작업 가능

Redux 미들웨어 활용 예시:

  • 서버와의 통신을 위해 가장 많이 사용.
  • Redux Toolkit에서 자주 사용되는 미들웨어는 Redux-thunk.

Thunk

  • 리덕스에서 많이 사용되는 미들웨어 중 하나. - 'dispatch' 시 함수를 사용하여 객체가 아닌 함수를 dispatch할 수 있게 함.

Thunk 활용

  • 서버 통신과 같이 비동기 작업을 처리할 때 사용.

Thunk 사용방법

  1. Thunk 함수 생성
    '''jsx
    export const __addNumber = createAsyncThunk(
    "ADD_NUMBER_WAIT",
    (arg, thunkAPI) => {},
    );
    '''
    ☞ 'createAsyncThunk' API 사용.

  2. Thunk 함수 내부 구현

'''jsx
export const __addNumber = createAsyncThunk(
"addNumber",
(payload, thunkAPI) => {
setTimeout(() => {
thunkAPI.dispatch(addNumber(payload));
}, 3000);
}
);
'''

  • Thunk 함수 내부에서 비동기 작업 구현 가능.
  • 위 예시는 3초를 기다린 후 'addNumber' 액션을 dispatch함

Thunk 정리

  • 리덕스 미들웨어를 사용하면 'dispatch' 이전에 중간에 추가 작업 가능.
  • Thunk를 사용하면 객체 대신 함수를 'dispatch'할 수 있음.
  • Redux Toolkit에서 Thunk 함수 생성 시 'createAsyncThunk' 사용.
  • Thunk 함수 내부에서 비동기 작업 및 'dispatch' 가능
  • Thunk 함수의 첫 번째 인자는 action value, 두 번째 인자는 함수로 구성됨
  • Thunk 함수 내부에서 'dispatch'와 'getState' 사용 가능
profile
새벽로즈
귀여운 걸 좋아하고 흥미가 있으면 불타오릅니다💙 최근엔 코딩이 흥미가 많아요🥰
이전 포스트

[프로젝트3] 뉴스피드 프로젝트 - KPT 회고

다음 포스트

[리액트 심화] -팬레터 컬렉션 업그레이드

0개의 댓글