[과제] 이노베이션 캠프 5주차 리액트 심화 과제

리덕스 thunk(청크)

이미지 출처 : 벨로퍼트 모던 리액트 깃북

리덕스 미들웨어는 리덕스가 지니고 있는 핵심 기능입니다.
리덕스 미들웨어를 사용하면 액션이 dispatch 된 다음, 리듀서에서 해다 액션을 받아와서 업데이트 하기 전에 추가적인 작업을 할 수 있습니다.

보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리할 때 입니다.

리덕스 thunk는 리덕스에서 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어입니다.

thunk를 사용하면 우리가 dispatch를 할 때, 객체가 아닌 함수를 dispatch할 수 있게 해줍니다.

dispatch

dispatch는 스토어(store)의 내장함수 중 하나입니다.
액션을 발생시키는 것입니다. dispatch라는 함수에는 액션을 파라미터로 전달합니다.

dispatch(action)

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면, 액션을 참고하여 새로운 상태를 만들어 줍니다.

비동기와 프로미스(Promise)

자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.
자바스크립트에서 비동기 처리가 필요한 이유는 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 가만히 다른 코드를 실행 안 하고 기다릴 순 없기 때문입니다.

콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다.

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 콜백 함수의 문제점을 해결하기 위해 등장했습니다.

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.

프로미스는 생성하고 종료될 때까지 3가지 상태를 갖습니다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

async & await

자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.
Promise를 반환하는 함수 반환값을 사용하기 까지 코드를 지연시키기 위해 async, await를 사용합니다.

const sampleFunc = async () => {
 	// asyncFunc 함수는 Promise 객체를 반환한다
   const result = await asyncFunc() 
   console.log(result)
}

try-catch문을 추가하여 예외처리를 할 수 있습니다.

const sampleFunc = async () => {
   try {   
       // asyncFunc 함수는 Promise 객체를 반환한다
       const result = await asyncFunc() 
       console.log(result)
   } catch (err) {
       console.log(err)
   }
}

TDZ(Temporal Dead Zone/일시적 사각지대)

일시적 사각지대로, 스코프 시작 ~ 초기화 시작 사이의 구간을 의미합니다.
다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간을 말합니다.

Redux Toolkit

리덕스 팀에서 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것입니다. 줄여서 RTK라고도 합니다.

immer

react에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리입니다.

리액트 컴포넌트에서 상태를 업데이트 할 때 불변성을 지키는 것은 매우 중요합니다.
'불변성을 지킨다' 라는 것은 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말합니다.
불변성이 지켜지지 않으면 객체 내부의 값이 새로워져도 바뀐 것을 감지하지 못하게 됩니다.

json-server

json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함입니다.

Custom Hook

커스텀훅이란, 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅입니다.

파일의 이름 앞에 반드시 use 라는 키워드가 들어가야 합니다.

• 예시 코드

//useInput.js

import { useState } from "react";

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

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

  const reset = () => {
    setValue("");
  };

  return [value, handler, reset];
};
export default useInput;