TIL | React (thunk, custom hooks ...), 랜덤 id, confirm ...

23.07.06

1. thunk 🔆

thunk : redux 환경에서 비동기 통신을 위해 빼놓을 수 없는 미들웨어, redux 미들웨어는 보통 서버와의 통신을 위해서 사용 (그 중에서 thunk와 saga를 주로 사용함)

만약 미들웨어가 없는 리덕스라면 dispatch가 되자마자 action이 리듀서로 달려가서 새로운 state를 반환해버리는데, 미들웨어가 있다면 이 중간 과정에서 우리가 하고 싶은 작업들을 넣을 수 있음 !

리덕스 툴킷에서 thunk 함수(ex. createAsyncThunk())를 기본적으로 내장하고 있기 때문에 따로 라이브러리 설치가 필요없음 !

+) reducer 안에서는 promise 객체(= 비동기 코드)를 사용하면 안됨. 그러나, thunk를 사용하면 이 안에서 async - await 사용 가능함

1-1. createAsyncThunk(action value, 함수) 🔆

2개의 INPUT : (1) 이름 : 의미는 크게 없음 (2) 함수가 들어감

export const __addNumber = createAsyncThunk(
  "ADD_NUMBER_WAIT",
  (payload, thunkAPI) => {
    // 수행하고싶은 동작 : 3초를 기다리게 할 예정
    setTimeout(() => {
      // action creator 호출
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

정리

1. 리덕스 미들웨어를 사용하면 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 더 할 수 있음
2. Thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해줌 ! 🔆
3. 리덕스 툴킷에서 Thunk 함수를 생성할 때는 npm or yarn add가 아닌 내장되어있는 createAsyncThunk() 함수를 이용
4. createAsyncThunk()의 첫번째 자리에는 action value, 두번째에는 함수가 들어감
5. 두번째로 들어간 함수에서 2개의 인자를 꺼내서 사용할 수 있는데, 첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능임 ! 🔆

1-2. thunk에서 Promise 다루기 🔆

1. thunk 함수를 구현
   (1) 서버에서 데이터 가져오기

2. 리듀서 로직 구현 : reducers -> extraReducers

   • 서버 통신 : 100% 성공(x)
   • 지금까지 redux state(todos, counter)
   • 앞으로의 state(isLoading, isError, data)

   (2) 이제 이 데이터를 애플리케이션 내부의 리덕스 스토어로 가져오기 (이제 그러면 toolkit에서 제공하는 API인 fulfillWithValue(), rejectWithValue() 이 2개의 메서드 필요)

3. 기능 확인(network)

4. Store의 값을 조회 + 화면에 렌더링

코드

// (1) 서버에서 데이터 가져오기
export const __getTodos = createAsyncThunk(
  "getTodos",
  // thunk 함수는 서버랑 통신하는 부분이기 때문에 async - await을 적어줘야 함
  async (payload, thunkAPI) => {
    try {
      // 시도하는 부분
      const response = await axios.get("http://localhost:4000/todos");
      console.log("response", response);
    } catch (error) {
      // 에러를 잡는 부분
      console.log("error", error);
    }
  }
);

// (2) 데이터를 애플리케이션 내부의 리덕스 스토어로 가져오기
// toolkit에서 제공하는 API
// Promise -> resolve(= 네트워크 요청이 '성공'한 경우) -> dispatch 해주는 기능을 가진 API
return thunkAPI.fulfillWithValue(response.data);

// toolkit에서 제공하는 API
// Promise -> resolve(= 네트워크 요청이 '실패'한 경우) -> dispatch 해주는 기능을 가진 API
return thunkAPI.rejectWithValue(error);

여기서 return을 꼭 써줘야지만 아래 extraReducers로 넘어감

extraReducers: {
    [__getTodos.pending]: (state, action) => {
      // 통신이 아직 진행중일 때
      state.isLoading = true;
      state.isError = false;
    },
    [__getTodos.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.isError = false;
      state.todos = action.payload;
    },
    [__getTodos.rejected]: (state, action) => {
      state.isLoading = false;
      state.isError = true;
      // state의 error 객체에 action.payload로 받아온 error 객체를 넣어줌
      state.error = action.payload;
    },
  },

정리

• thunkAPI.fulfillWithValue(response.data); 는 [__getTodos.fulfilled] 라는 곳을 찾아감
• thunkAPI.rejectWithValue(error); 는 [__getTodos.rejected] 라는 곳을 찾아감
• 그리고 이제 이렇게 데이터를 넣어준 다음에 (4) Store의 값을 조회하고 화면에 렌더링 시키면 됨 !

---

2. custom hooks

custom hooks : react의 hook을 custom해서 사용하는 방법

중복되는 로직을 custom hooks을 사용해서 최대한 어떻게 빼낼 수 있을지 생각해봐야 함 => 유지보수 관점에서 중복되는 것을 줄이는게 효율적이고 효과적이니 !

• 새로 만든 useInput 이라는 훅

import { useState } from "react";

const useInput = () => {
  // state
  const [value, setValue] = useState("");

  // handler
  const handler = (e) => {
    setValue(e.target.value);
  };

  return [value, handler];
};

export default useInput;

• useInput을 import해와서 적용해보기

import useInput from "./hooks/useInput";

const [name, onChangeNameHandler] = useInput();
const [password, onChangePasswordHandler] = useInput();

---

3. 후발대 수업

3-1. 범용 고유 식별 랜덤 아이디

1. uuid() : Universally Unique Identifier

yarn add uuid

import { v4 as uuidv4 } from 'uuid';

id : uuidv4(); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

2. shortid.generate()

   shortid는 무작위로 생성된 ID를 기반으로하며, 기본적으로 컴퓨터의 현재 시간, 랜덤 요소 및 기타 요소를 사용하여 ID를 생성합니다. 따라서 페이지를 다시 로드하거나 브라우저를 재시작하면 shortid는 새로운 ID를 생성하여 제공합니다. (근데 렌더링될 때는 바뀌지 않음)

yarn add shortid

import shortId from 'shortid';

id: shortId.generate(),

3. crpyto.randomUUID() : 메서드라서 다른 랜덤 id에 비해 따로 패키지 설치가 필요없음

const uuid = crypto.randomUUID();
console.log(uuid); // "36b8f84d-df4e-4d49-b662-bcde71a8764f"

4. nanoid()

yarn add nanoid

const { nanoid } = require('nanoid')
model.id = nanoid() //"V1StGXR8_Z5jdHi6B-myT"

3-2. confirm

confirm( ) : confirm( ) 메서드는 사용자에게 확인/취소 2가지의 버튼으로 사용자의 활동을 확인시켜주는 역할을 하는 팝업 박스

if (confirm("제출하시겠습니까?")) {
  // ok // return true 
  alert("제출되었습니다.")
} else  {
 // cancle // return false 
  alert("제출을 취소합니다.")
}