[TIL #32] Redux Toolkit 사용하기, HTTP 프로토콜

Bora.K | 권보라·2023년 11월 28일

React TIL redux

TIL

목록 보기

32/51

오늘 한 일

[React 심화] 강의 듣기

학습 내용

Redux Toolkit

1. Redux Toolkit이란?

기존의 리덕스를 더 편하게 사용하기 위해 코드의 양을 줄일 수 있는 새로운 API가 추가되었고, 이것을 리덕스 툴킷이라고 한다. 컴포넌트에서 useSelector를 통해 사용하는 것은 동일하고, 리듀서를 생성하는 부분과 Action Creator, Action Values를 만드는 부분을 createSlice() API 하나로 해결할 수 있다.

2. Redux Toolkit 사용하기

(1) Toolkit 설치

yarn add @reduxjs/toolkit

(2) configStore
모듈이 여러 개인 경우, 예를 들어 counter와 todos 모듈이 있다면 두 모듈을 import 해오고, 두 개의 모듈을 스토어에 연결해 준다.

import { configureStore } from "@reduxjs/toolkit";
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

const store = configureStore({
  reducer: { counter: counter, todos: todos },
});

export default store;

(3) createSlice()
리듀서 안에서 만든 함수 자체가 리듀서의 로직이자 Action Creator가 된다.
필수로 name, initialState, reducers를 작성해 주어야 한다.

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",   // 모듈의 이름
  initialState,   // 모듈의 초기값
  reducers: {   // 모듈의 Reducer 로직
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

//컴포넌트에서 사용하기 위해 export
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

todosSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  todos: [],
};

const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {},
});

export const {} = todosSlice.actions;
export default todosSlice.reducer;

export와 export default
모듈은 크게 두 종류로 나뉜다.
1. 복수의 함수가 선언되어 있는 라이브러리 형태의 모듈
2. 개체 하나만 선언되어 있는 모듈 (하나만 내보내기 함)

보통 한 파일에는 named export나 default export 둘 중 하나만 사용하며, 하나의 모듈에는 하나의 export default가 존재한다. 즉, export default를 사용하면 해당 모듈엔 개체가 하나만 있다는 사실을 명시할 수 있다.

export default의 특징

export한 이름과 상관없이 원하는 이름으로 import가 가능하다.
(원하는 이름으로 import가 가능하나, 보통 헷갈리지 않기 위해 동일하게 사용한다.)

import할 때 중괄호 없이 가져온다.

3. Redux Devtools 사용

(1) Redux Devtools란?
리덕스를 사용하면 state의 다양한 변화가 발생하는데, 이 툴을 이용하여 현재 프로젝트의 state 상태와 액션, 이 액션으로 발생하는 state의 변화를 확인할 수 있다. 기본적으로 툴킷에 Devtools가 내장되어 있고, 구글 플러그인을 설치하여 사용할 수 있다.

(2) Redux Devtools 설치하기
Redux DevTools

(3) Redux Devtools 사용하기
구글 플러그인 설치하면 개발자도구 탭에 Redux라는 메뉴가 활성화 된다. 어떠한 액션이 일어나면 dispatch되고 state가 변하는 과정을 확인할 수 있다.

HTTP

1. 웹 통신 프로토콜

서버(웹 서버)와 클라이언트(웹 브라우저)가 데이터를 주고 받기 위해 HTTP 프로토콜을 사용한다.

웹통신 : 서버와 클라이언트 간의 대화
프로토콜 : 서버와 클라이언트 간의 약속

(1) 요청과 응답
클라이언트는 서버에 요청(request)하고, 서버는 이에 응답(response)한다.

(2) URL
http://www.hostinger.com/tutorials/what-is-a-domain-name

http:// protocol
www. sub domain, domain name
hosting.com domain name
/tutorials/what-is-a-domain-name resource path(path/page) → query variable, path variable

(3) 메서드

GET - 조회
POST - 생성
PUT, PATCH - 수정(변경)
DELETE - 삭제

(4) 상태코드
요청에 대한 각 응답은 상태코드를 갖는다.

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

오늘의 회고

오늘 드디어 React 심화 과정을 시작했다. 내일 바로 개인과제 발제가 있어서 오늘 최대한 많은 강의를 들어야 했다. 강의를 들어오면서 들었던 내용들도 있어서 낯설지 않게 느껴지는 부분도 있었지만, 새로운 개념들도 있어서 또 새로운 느낌이다...
오늘 새로운 팀을 배정받았다. 이제까지 만났던 팀원들보다는 차분한 느낌이다. 아직 첫 날이라 낯설어서 그런거겠지... 또 어떤 것을 만들고 배워갈지 기대된다.