< 목차 >
1. [Redux 미들웨어] Thunk
2. Custom Hook (커스텀 훅)
3. 금일 소감
1. [Redux 미들웨어] Thunk
: 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을 전부 이해하고 시험 봄으로써 완전히 내 것으로 하는 것이었는데, 강의 다시 듣고, 유튜브 영상 보고 해도 이해가 안 돼서 결국 목표를 좀 낮췄다 ㅋㅋ큐ㅠㅠ 하..... 코드 많이 작성하는 것도 작성하는 건데 코드를 이해하며 짜고, 또 왜 그렇게 동작하는지 알자
'[Front-end] 개발자 공부' 카테고리의 다른 글
[개발 공부 43일차] JS 자료구조 | 예문 & 용도 (0) | 2024.02.23 |
---|---|
[개발 공부 42일차] Redux-Toolkit, Redux Error (0) | 2024.02.22 |
[개발 공부 40일차] ...(spread 연산자), Compile Error (1) | 2024.02.19 |
[개발 공부 39일차] Redux 작동 체계 | 데이터, 함수, Custom Hooks (0) | 2024.02.17 |
[개발 공부 38일차] 프로젝트 발표 완료 | 협업 시스템 정리 (4) | 2024.02.15 |