TIL.231130 React심화

☑️extraReducers

• reducers에서 바로구현되지 않는 기타 Reducer로직을 구현할 때 사용하는 기능

• 보통 thunk 함수를 사용할 때 extraReducers를 사용
  🔥중요🔥 통신 진행중, 실패, 성공에 대한 케이스를 모두 상태로 관리하는 로직을 구현 서버와의 통신은 100% 성공하는 것이 아니다. 서버와 통신을 실패했을때도 서비스가 어떻게 동작할지 구현해야 하며 서버와의 통신은 ‘과정' 이다. 그래서 서버와 통신을 진행하고 있는 ‘진행중' 상태일때 서비스가 어떻게 작동해야할지 구현 해야 한다.

• Thunk 함수 구현 → 서버에서 데이터 가져오기

  • initialState⬇️

isLoading은 서버에서 todos를 가져오는 상태를 나타내는 값. 초기값은 false이고, 서버와 통신이 시작되면 true였다가 통신이 끝나면 (성공 또는 실패) 다시 false로 변경.

error는 만약 서버와의 통신이 실패한 경우 서버에서 어떤 에러 메시지를 보내주는데 그것을 담아놓는 값. 초기에는 에러가 없기때문에 null로 지정한다.

대부분 서버와의 통신을 상태관리 할때는 data, isLoading, error 로 관리한다. axios.get() (함수)은 Promise를 반환하며 반환된 Promise의 fullfilled 또는 rejected된 것을 처리하기위해 async/await 을 추가한다. 그리고 이 요청이 성공하는 경우에 실행되는 부분과 실패했을 때 실행되어야 하는 부분을 나누기 위해 try..catch 구문을 사용

예시⬇️

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const initialState = {
  todos: [],
  isLoading: false,
  error: null,
};

// 완성된 Thunk 함수
export const __getTodos = createAsyncThunk(
  "todos/getTodos",
  async (payload, thunkAPI) => {
    try {
      const data = await axios.get("http://localhost:3001/todos");
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  }
);

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

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

Custom Hooks

input의 개수가 증가하면 useState와 이벤트핸들러도 같이 증가하고 그로 인해 코드의 중복이 생긴다는 반복되는 로직이나 중복되는 코드를 우리만의 훅, 즉 커스텀 훅을 통해서 관리할 수 있다. 리액트에서 제공하는 useState, useEffect와 같은 내장 훅을 사용해서 우리만의 훅을 만드는 것 커스텀 훅을 만들때 이름은 내 마음대로 해도 상관이 없으나 단! 파일의 이름 앞에 use 라는 키워드를 꼭!!!붙여줘야 한다. 커스텀훅이란, 우리가 컴포넌트에서 구현해왔던 useState와 핸들러를 이렇게 뽑아서 따로 빼놓은 것 함수! 기능은 커스텀훅을 만들기전과 동일하게 작동하되, 중복코드가 사라지고 전체적인 코드의 양도 감소한다.

팁👍앞으로 여러가지 기능을 구현하면서 중복되는 로직이 있으면 “이것을 어떻게 훅으로 빼볼 수 있을까” 라고 생각해보는 습관을 가져보자!

예시⬇️ (컴포넌트에서 구현해왔던 useState와 핸들러를 이렇게 뽑아서 따로 빼놓은 것)

// src/hooks/useInput.js

import React, { useState } from "react";

const useInput = () => {
	// 2. value는 useState로 관리 
  const [value, setValue] = useState("");

	// 3. 핸들러 로직 구현
  const handler = (e) => {
    setValue(e.target.value);
  };

	// 1. 이 훅은 [ ] 을 반환하는데, 첫번째는 value, 두번째는 핸들러를 반환
  return [value, handler];
};

export default useInput;

예시⬇️ (useInput.js에서 만든 훅으로 적용 중복코드 사라져서 코드양 감소)

// src/App.jsx

import React from "react";
import useInput from "./hooks/useInput";

const App = () => {
	// useInput.js에서 만든 훅 
  const [title, onChangeTitleHandler] = useInput();
  const [body, onChangeBodyHandler] = useInput();
  
//  사라진 중복코드⬇️  
//  const App = () => {
//	input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
//  const [title, setTitle] = useState("");
//  const onChangeTitleHandler = (e) => {
//    setTitle(e.target.value);
//  };

//	input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
//  const [body, setBody] = useState("");
//  const onChangeBodyHandler = (e) => {
 //   setBody(e.target.value);
//  };
  

  return (
    <div>
      <input
        type="text"
        name="title"
        value={title}
        onChange={onChangeTitleHandler}
      />

      <input
        type="text"
        name="title"
        value={body}
        onChange={onChangeBodyHandler}
      />
    </div>
  );
};

export default App;

정리

• 커스텀훅이란, 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅을 말한다.
• 파일의 이름 앞에 반드시 use 라는 키워드가 들어가야 한다.