[개발 공부 41일차] Thunk(Redux 미들웨어), Custom Hook

 

< 목차 >

1. [Redux 미들웨어] Thunk

2. Custom Hook (커스텀 훅)

3. 금일 소감

 

 

 

1. [Redux 미들웨어] Thunk

Redux 및 미들웨어 동작 순서

 

 

: Dispatch를 할 때, 객체가 아닌 함수를 Dispatch 할 수 있게 됨
  Dispatch(객체)가 아니라 Dispatch(함수)를 할 수 있게 되는 것!

=> 중간에 하고자 하는 작업을 함수를 통해 넣을 수도 있고 그것이 중간에 실행되는 것
     [중요] '함수'를 Dispatch 할 수 있게 해줌! 액션이 리듀서로 전달되기 전, 중간에 어떤 작업 더 할 수 있음

 

Dispatch 하면 Action이 reducer로 전달되고, reducer는 새로운 state를 반환하는 과정에서 미들웨어를 사용하면, 하고 싶은 작업들을 넣어서 할 수 있음

 

[사용 이유]

: 서버와의 통신을 위해서 사용하는 것이 대부분
** 그중, 많이 사용 중인 리덕스 미들웨어는 'Redux-thunk'


1. thunk 함수 생성: createAsyncThunk
ex. createAsyncThunk('ADD_NUMBER_WAIT', (payload, thunkAPI)

• 첫 번째 자리: action value, 두 번째 자리: 함수
• 첫 번째 인자: 컴포넌트에서 보내준 payload, 두 번째 인자: thunk에서 제공하는 여러 기능
• reduxToolkit 내장 API

2. creatSlice > extraReducer에 thunk 등록
3. Dispatch
4. 테스트

 

 

Thunk 적용 순서

1. thunk 함수 구현
2. 리듀서 로직 구현: reducers → extraReducers

• 서버 통신: 100% 성공 보장돼있지 않음
• 지금까지의 Redux State는 Todos. counter
• 앞으로의 State는 isLoading(현재 통신 중인가 / 대기 중인 걸 사용자가 알 수 있게끔),
• isError(혹시 서버 통신이 오류났는가), data

3. 기능 확인(network) + devTools

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

 

 

 

▼  예문

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

// 보통 thunk는 이름 앞에 언더바 2개를 둠
// 청크 안에 2개의 input 들어감
// (1) 이름: 의미는 크게 없음
// (2) 함수
export const __addNumber = createAsyncThunk('ADD_NUMBER_WAIT', (payload, thunkAPI) => {
    // 수행하고 싶은 동작: 3초를 기다리게 할 예정
    setTimeout(() => {
        thunkAPI.dispatch(addNumber(payload));
    }, 3000);
});

export const __minusNumber = createAsyncThunk('MINUS_NUMBER_WAIT', (payload, thunkAPI) => {
    // 수행하고 싶은 동작: 3초를 기다리게 할 예정
    setTimeout(() => {
        thunkAPI.dispatch(minusNumber(payload));
    }, 3000);
});

 

 

 

2. Custom Hook (커스텀 훅)

https://ko.react.dev/learn/reusing-logic-with-custom-hooks#challenges

 

: 컴포넌트 간 로직을 공유하는 Hook

 

 

[사용 이유]

: React에서 재사용 가능한 로직을 만들기 위함!

커스텀 훅을 통해 컴포넌트 간에 상태 로직을 공유할 수 있게 되어, 코드의 중복을 줄이고, 가독성과 유지보수성을 향상시킬 수 있다.

 

 

커스텀 훅의 이점

• 로직의 재사용: 같은 기능을 하는 코드를 여러 컴포넌트에서 반복해서 작성하는 대신, 커스텀 훅을 통해 해당 로직을 한 곳에 작성하고 여러 컴포넌트에서 재사용할 수 있다. 예를 들어, 입력값 검증, API 호출 및 응답 처리 등의 로직을 커스텀 훅으로 만들어 사용할 수 있다.
• 컴포넌트의 단순화: 비즈니스 로직이나 상태 관리 로직을 커스텀 훅으로 분리함으로써, 컴포넌트 코드를 더 단순하고 집중적으로 만들 수 있다. 이는 컴포넌트의 가독성과 유지보수성을 향상시키는 데 도움된다.
• 코드의 구조화 및 조직화: 커스텀 훅을 사용하면 관련 로직을 기능별로 분리하여 관리할 수 있다. 이는 프로젝트의 코드 구조를 더 명확하게 하고, 개발 팀 내에서 코드의 이해와 협업을 용이하게 한다.
• 테스트의 용이성: 커스텀 훅을 통해 분리된 로직은 독립적으로 테스트하기가 더 쉽다. 컴포넌트에서 분리된 상태로 테스트할 수 있기 때문에, 로직의 정확성을 보다 효율적으로 검증할 수 있다.
• 추상화 수준의 향상: 커스텀 훅을 사용하면 복잡한 로직을 더 높은 추상화 수준에서 다룰 수 있다. 이는 개발자가 세부 구현보다는 더 큰 그림에 집중할 수 있게 하여, 전반적인 개발 프로세스의 효율성을 높일 수 있다.

 

▼  예문

import { useCounter } from './useCounter.js';

export default function Counter() {
    const count = useCounter(1000);
    return <h1>Seconds passed: {count}</h1>;
}

 

import { useState } from 'react';
import { useInterval } from './useInterval';
// 간격을 설정하는 로직을 useInterval라는 이름의 다른 Hook으로 분리
// onTick 콜백과 delay, 두 가지 props가 필요

export function useCounter(delay) {
    const [count, setCount] = useState(0);
    useInterval(() => {
        setCount((c) => c + 1);
    }, delay);
    return count;
}

 

// 간격을 설정하는 로직을 useInterval라는 이름의 다른 Hook으로 분리
// onTick 콜백과 delay, 두 가지 props가 필요
import { useEffect } from 'react';

export function useInterval(onTick, delay) {
    useEffect(() => {
        const id = setInterval((onTick, delay)
        return () => clearInterval(id)
        }, [onTick, delay]);
}

 

 

 

 

3. 금일 소감

휴.. 요즘 코드 작성만 하다 보니 포스팅하려면 좀 더 시간을 내야 하는 것 같다. 그래도 열심히 적어야지. 오늘은 챌린지 반 과제로 Custom Hook 코드 짜보는 과제가 있어서 그거 오전 중에 하고 17시 시험이 있어서 계속 그것 연습했다. Redux Toolkit이 정말 이해가 다 되지 않아서 결국 코드를 외워서 시험을 봐버렸다,,, 그래도 시험을 보긴 봐야 하니까 그렇게 했고, 비록 외우는 거지만 Redux Toolkit의 기본 구조 정도는 손과 눈에 익힐 수 있겠다 싶었다.

 

내 목표는 이번 심화 과정에서 배운 Redux Toolkit을 전부 이해하고 시험 봄으로써 완전히 내 것으로 하는 것이었는데, 강의 다시 듣고, 유튜브 영상 보고 해도 이해가 안 돼서 결국 목표를 좀 낮췄다 ㅋㅋ큐ㅠㅠ 하..... 코드 많이 작성하는 것도 작성하는 건데 코드를 이해하며 짜고, 또 왜 그렇게 동작하는지 알자