sarang_daddy.log

React - 파일 업로드(Drag & Drop)

Sat, 30 Dec 2023 15:48:09 GMT

웹에 파일을 업로드할 때 Drag & Drop 기능을 제공한다면 사용자 경험을 향상시킬 수 있다. React에서 Drag & Drop을 이용한 파일 업로드하는 방법을 구현해 보자.

1. 부모 컴포넌트에서의 사용

여러 컴포넌트에서 재사용이 가능하도록 구현해준다.
부모 컴포넌트로부터 파일 선택 핸들러를 받아온다.

// 부모 컴포넌트
export default function AdVideoUploadContainer() {
  // 선택된 파일을 관리한다.
  const [file, setFile] = useState(null);

  // 구현할 InputDragDrop에서 파일이 선택될 때 상태를 업데이트 한다.
  const handleFileSelect = (file: File | null) => {
    setFile(file);
  };  

  // 파일 업로드를 처리하는 로직
  const handleUpload = () => {
    if (file) {
      // Drag & Drop으로 가져온 파일 처리 로직 (API 호출 등)
    }
  };

  // ...

return 
 // ...
 
 // ...

2. 컴포넌트 생성

Drag & Drop 이벤트에는 Enter, Leave, Over, Drop 4개의 이벤트가 필요하다.
위 이벤트들은 이벤트 기본 동작과 이벤트 버블링 효과를 차단한다.

interface DragDropProps {
  onChangeFile: (file: File | null) => void;
  description?: string;
}

const DragDrop = ({
  onChangeFile,
  description = "파일 첨부",
}: DragDropProps) => {

  // 사용자가 파일을 드래드 중임을 상태로 관리 UI 변경을 위해 사용
  const [dragOver, setDragOver] = useState(false);

  // 드래그 중인 요소가 목표 지점 진입할때
  const handleDragEnter = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(true);
  };

  // 드래그 중인 요소가 목표 지점을 벗어날때
  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(false);
  };

  // 드래그 중인 요소가 목표 지점에 위치할때
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

  // 드래그 중인 요소가 목표 지점에서 드롭될때
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragOver(false);

    // 드래그되는 데이터 정보와 메서드를 제공하는 dataTransfer 객체 사용
    if (e.dataTransfer) {
      const file = e.dataTransfer.files[0];
      onChangeFile(file);
    }
  };

  // Drag & Drop이 아닌 클릭 이벤트로 업로드되는 기능도 추가
  const handleChange = (e: ChangeEvent) => {
    const file = e.target.files ? e.target.files[0] : null;
    onChangeFile(file);

    // input 요소의 값 초기화
    e.target.value = "";
  };

  return (
    
      
        
          {description}
          
            
          
        
        
      
    
  );
};


export default DragDrop;

3. 파일 확장자 제한과 알림 기능 추가하기

업로드 파일의 확장자를 제한하는 기능을 추가해보자.
허용되지 않은 확장자의 경우 알림을 통해 사용자에게 정보를 제공해보자.

// InputDragDrop 컴포넌트
interface InputDragDropProps {
  onChangeFile: (file: File | null) => void;
  description?: string;
  validExtensions?: string[]; // 확장자 정보를 받아온다.
}

const InputDragDrop = ({
  onChangeFile,
  description = "파일 첨부",
  validExtensions = ["*"], // 디폴트는 모든 확장자 허용.
}: InputDragDropProps) => {

  const { toast } = useToast(); // 알림 컴포넌트

  // ... 기존 코드

  // 파일 확장자 검증 함수
  const isValidExtension = (file: File) => {
    const fileName = file.name;
    const fileNameSplit = fileName.split(".");
    const fileExtension = fileNameSplit[fileNameSplit.length - 1];
    return validExtensions.includes(fileExtension);
  };

  // 허용된 확장자라면 업로드, 아니라면 사용자에게 알림
  const handleFileChange = (file: File | null) => {
    if (file && isValidExtension(file)) {
      onChangeFile(file);
    } else {
      toast({
        title: "잘못된 파일 형식",
        description: `지원하지 않는 파일 형식입니다. (${validExtensions.join(
          ", "
        )})로 등록해주세요.`,
        className: "bg-red-500 text-white",
      });
      onChangeFile(null);
    }
  };


  // ...기존 코드

부모 컴포넌트에서는 props로 허용 확장자만 알려주면 된다.

// 부모 컴포넌트
return 
 // ...
 
 // ...

React - 알림 (Polling)

Sat, 16 Dec 2023 17:05:01 GMT

처리해야하는 작업이 남아 있다면 아이콘을 활성화하여 사용자가 알 수 있도록 인터페이스(알림)을 제공하는 기능을 구현해보자.

처리 작업이 남아있다면 true 반환 API

해당 기능을 위해 서버에서 제공해주는 API는 클라이언트 요청시 반환을 해준다.

{
  "code": 200,
  "creator_application": true,
  "message": "SUCCESS"
}

1차 구현

아이콘은 처리 작업이 필요한 사이드바 메뉴에 활성화 한다.

export default function AdminSidebarContainer() {
  const { data: session } = useSession();
  const { data: newRequest } = useSWR(session ? `/main/side` : null, () =>
    session ? checkSidebar(session.user.token) : null
  );

  return (
    
      
    
  );
}

// AdminSidebar

// ...
// 새로운 요청 사항 있으면 아이콘 활성화
{newData?.creator_application &&
  subitem.href === "/admin/account/creator" && (
    
      
    
  )}

아이콘 활성화는 구현되었지만 아래와 같은 문제점이 남아있다.

추가 고려사항

처리해야하는 작업은 실시간으로 업데이트 된다.
언제 API를 요청해서 새로운 작업이 있는지 확인해야 할까?

기획상 실시간 알림까지의 필요성을 없다.

최대한 서버의 부담이 적은 방향으로 30분 간격의 확인으로 협의.

처리 작업이 완료되면 즉시 아이콘이 사라져야 한다.
작업 처리는 다른 컴포넌트에 존재한다.

커스텀훅으로 구현하여 여러 컴포넌트에서 동일한 요청이 가능하도록 구현

커스텀훅 생성

// hooks/useAdminSidebar.js
import useSWR from "swr";
import { checkSidebar } from "../services/adminSidebar.service";
import { useSession } from "next-auth/react";

export function useAdminSidebar() {
  const { data: session } = useSession();
  const { data, mutate } = useSWR(
    session ? `/admin/side` : null, // key
    () => (session ? checkSidebar(session.user.token) : null), // fetcher

    { refreshInterval: 1800000 } // 30분 간격으로 리플레쉬
  );

  return { data, refresh: mutate };
}

처리 작업 존재 여부 값을 반환한다.
useSWR의 refreshInterval 옵션으로 30분 간격으로 데이터를 새로고침한다.
수동적으로 새로고침을 실행하기 위해 mutate(refresh)를 반환한다.

2차 구현

사이드바는 커스텀훅을 통해 남은 작업 여부를 확인하고 30분마다 재확인한다.

import { AdminSidebar } from "@/admin/components/sidebar/AdminSidebar";
import { SIDEBAR_LIST } from "@/admin/constants/sidebarList";
import { useAdminSidebar } from "@/admin/hooks/useAdminSidebar";

export default function AdminSidebarContainer() {
  const { data: newData } = useAdminSidebar();

  return (
    
      
    
  );
}

작업 처리가 완료되면 refrash를 통해 데이터를 즉시 업데이트한다.

export default function EditCreatorContainer({
  applyId,
  offStateSettingModal,
}: EditCreatorContainerProps) {

  // useAdminSidebar 커스텀훅의 refresh 가져오기
  const { refresh } = useAdminSidebar();

  // 이벤트 핸들러
  const handleUpdate = async (data: FormData) => {
    if (!session) return;

    try {
      const response = await updateCreator(session.user.token, data);
      if (response) {
        mutate();
        offStateSettingModal();

        toast({
          title: "크리에이터 승인 요청이 처리 되었습니다.",
          className: "bg-white",
        });
      }
    } catch (error) {
      if (error instanceof Error && "response" in error) {
        const responseError = error as any;

        let errorMessage = "크리에이터 승인 요청 처리에 실패했습니다.";
        if (
          responseError.response &&
          responseError.response.data &&
          responseError.response.data.message
        ) {
          errorMessage = responseError.response.data.message;
        }

        toast({
          title: errorMessage,
          className: "bg-red-500 text-white",
        });
      } else {
        toast({
          title: "알 수 없는 오류가 발생했습니다.",
          className: "bg-red-500 text-white",
        });
      }
    }
    refresh(); // 작업이 처리되면 남은 작업 여부 데이터를 새로고침 해준다.
  };

React - 파일 다운로드

Sat, 16 Dec 2023 15:18:38 GMT

사용자의 요청을 처리하는 기능 구현 중 사용자의 첨부 자료를 다운로드하여 확인해야하는 기능이 필요하다. React에서 파일을 다운로드 하는 방법을 구현하고 정리해보자.

서버로부터 파일 소스 받아오기

사용자 정보에서 첨부된 파일의 소스를 알 수 있다.
서버주소에 해당 파일소스를 연결하여 요청하면 파일 다운로드가 가능하다.
${serverUrl}${creatorDetailData.file_src}

{
  ...
  "affiliation": "Tesggr",
  "grade": "초3",
  "nickname": "스파냐",
  "name": "테스트",
  ...
  "state": 1,
  "file_src": "/creator/20069242-dec1-4284-be9c-2bc030ce0aa9.jpg",
  "category": [24],
  ...
}

1차 시도 : window.open() 메서드

처음 시도는 window.open() 메서드로 해당 주소로 이동하면 다운로드가 가능하다고 생각했다.

const handleFileDownload = () => {
    window.open(`${serverUrl}/${creatorDetailData.file_src}`);
  };

첨부된 파일의 확인이 가능하지만 새로운 브라우저 탭에서의 내용 확인으로 동작되었다.
기획서에서 요구하는 구현방식은 컴퓨터에 파일이 직접 다운로드되는 방식이다.

2차 시도 : 요소의 download

링크 이동이 아닌 파일을 직접 다운로드하기 위해서는 요소의 다운로드 속성을 사용한다.

  const handleFileDownload = () => {
    const a = document.createElement("a");
    a.href = `${process.env.NEXT_PUBLIC_BASIC_URL}${creatorDetailData.file_src}`;
    a.download = creatorDetailData.file_src.split("/").pop() || "download";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

하지만, window.open()과 같이 다운로드가 아닌 새 탭에서 파일을 보여주는 방식으로 동작한다.

mdn을 자세히 살펴보니 CORS 문제로 다른 출처의 URL을 가리키면 보안상의 이유로 download 속성을 무시하고 파일을 새 탭이나 창에서 열도록 동작함을 알 수 있다.

CORS란?

Cross-Oring Resource Sharing (교차 출처 정책)
웹 페이지는 기본적으로 자신과 다른 도메인의 리소스 접근을 제한한다.
이것을 동일 출처 정책(same-orgin policy)이라 한다.
하지만 현대의 웹은 다양한 서비스가 통합되면서 다른 출처의 리소스 요청이 필수적이다.
이를 해결하기 위해 CORS가 등장했다.
서버에서 특정 출처 요청을 수락하고 이를 HTTP 응답 헤더를 통해 브라우저에게 알려준다.
브라우저는 서버로부터 받은 CORS 헤더를 확인하고 특정 출처의 요청을 허용한다.

CORS는 SOP의 제한을 안전하게 완화하기 위한 방법이다.

3차 시도 : fetch API

fetch API를 사용해 파일을 blob형태로 가져오고 이 blob을 이용해 브라우저에서 직접 다운로드할 수 있는 URL을 생성할 수 있다.

const handleFileDownload = () => {
    setIsDownloading(true);
    const fileUrl = `${serverUrl}${creatorDetailData.file_src}`;

    fetch(fileUrl)
      .then((response) => response.blob())
      .then((blob) => {
        const url = window.URL.createObjectURL(new Blob([blob]));
        const a = document.createElement("a");
        a.href = url;
        a.download = creatorDetailData.file_src.split("/").pop() || "download";
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a); 
        setIsDownloading(false);
      })
      .catch((error) => {
        console.error("파일 다운로드 오류:", error);
        setIsDownloading(false);
      });
  };

🧐 fetch API 방식을 사용한 이유

CORS 설정 변경 없이도 클라이언트 측에서 다운로드가 가능하다.
promise 메서드를 사용하여 에러 핸들링이 가능하다.
promise 객체의 상태값으로 다운로드 중임과 완료를 시각적으로 알려주어 UX를 향상시킨다.

결과

Axios를 사용중임으로 fecth를 Axios로 변경

export function CreatorSettingForm({
  creatorDetailData,
  categoryList,
}: CreatorSettingFormProps) {
  const [isDownloading, setIsDownloading] = useState(false);

  const handleFileDownload = () => {
    setIsDownloading(true);
    const fileUrl = `${creatorDetailData.file_src}`;

    client // AxiosInstance
      .get(fileUrl, { responseType: "blob" })
      .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const a = document.createElement("a");
        a.href = url;
        a.download = creatorDetailData.file_src.split("/").pop() || "download";
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a); 
        setIsDownloading(false);
      })
      .catch((error) => {
        console.error("파일 다운로드 오류:", error);
        setIsDownloading(false);
      });
  };

  return (
    
      
        크리에이터 신청
        
        
          {isDownloading ? (
            
          ) : (
            
          )}
        
      
    
  );
}

Redux - RTK Query

Wed, 13 Dec 2023 01:30:07 GMT

RTK Query로 서버상태 관리하기

앞서 middleware를 사용하여 비동기 처리를 통해 Redux 상태관리에 중앙집중화할 수 있었다. 다만, 현재 프로젝트에서 관리하던 상태는 서버 상태로서 관리하는 것이 효율성과 단순화에 좋다고 판단되었다.

RTK Query는 미들웨어, 액션, 리듀서 작성을 간소화하고 서버 데이터 캐싱, 업데이트, 리패칭을 효율적으로 관리하도록 도와준다.

1. RTK Query 주요 특징

자동 데이터 캐싱
: 서버 데이터를 받고 자동으로 캐싱해준다. 이는 동일한 데이터 요청에 대해 불필요한 네트워크 요청을 방지한다.
데이터 패칭 및 동기화
: useQuery, useMutation의 React Hooks을 제공한다. 이는 컴포넌트 내에서 API 요청을 쉽게 처리하고 데이터 상태를 관리하게 해준다.
데이터 업데이트 및 재검증
: 데이터가 변경되었을 때, RTK Query는 자동으로 데이터를 재검증하고 캐시를 무효화 한다.

위의 특징은 React Query, SWR에서 제공해주는 특징과 비슷하다.

2. RTK Query만의 특징

RTK Query는 React Query, SWR과 같은 데이터 패칭 기술과 비슷하지만 특별한 접근 방식을 API 디자인에 통합했다.

Redux 통함
: RTK Query는 Redux 상태 관리 시스템과 통합되어 있다.
이는 Redux를 기반으로 하는 애플리케이션에서 전체 애플리케이션 상태를 하나의 저장소에서 관리할 수 있도록 해준다.
Redux DevTools 통합
: Redux DevTools와의 통합을 통해 상태 변화를 추적하고 디버깅에 용이하게 해준다.

Redux를 사용하는 프로젝트라면 RTK Query를 함께 사용하여 일관된 상태 관리를 가능토록 할 수 있다.

Redux에 의존하지 않는 프로젝트에는 상대적으로 가벼운 React Query, SWR의 사용이 적합할 수 있다.

3. RTK Query 사용하기

RTK Query는 API 슬라이스를 정의하여 사용한다.
이는 서버와의 통신을 위한 여러 엔드포인트를 정의하는 방식으로 작동한다.

import { IUser, IUpdateUsers } from '@/modules/usersType';
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const BASE_API_URL = 'http://localhost:9000';

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: BASE_API_URL }),
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: () => '/user_data',
    }),
    addUser: builder.mutation({
      query: (user) => ({
        url: '/user_data',
        method: 'POST',
        body: user,
      }),
    }),
    updateUsers: builder.mutation({
      query: ({ ids, updateValue }) => ({
        url: `/user_data`,
        method: 'PATCH',
        body: { ids, isDeleted: updateValue },
      }),
    }),
  }),
});

export const { useGetUsersQuery, useAddUserMutation, useUpdateUsersMutation } =
  userApi;

4. RTK Query를 통해 관리되는 서버 상태 사용하기

RTK Query를 사용하면 컴포넌트내에서 데이터 조회, 업데이트가 가능하다.
상태는 전역적으로 관리되기에 필요한 컴포넌트 내에서 사용하기 용이하다.
데이터 캐싱과 리패칭을 통한 동기화 처리에 효율적이다.

// 유저 데이터 조회 요청
const { data: users, isLoading, isError } = useGetUsersQuery();
// 유저 정보 업데이트 요청
const [updateUser] = useUpdateUsersMutation();
// 유저 추가 요청
const [addUser] = useAddUserMutation();

const restoreUser = async (ids: number[]) => {
  await updateUser({ ids: ids, updateValue: false });
};

const onSubmit = async (data: IUser) => {
  const newUserData: IUser = {
    id: lastId + 1,
    nickname: data.nickname,
    birthday: data.birthday,
    sex: data.sex,
    isDeleted: false,
  };

  await addUser(newUserData);
  onClose();
};

5. 미들웨어 사용후 느낀점

RTK Query를 사용하면 서버와의 상호작용을 처리하는 코드를 줄여 프로젝트의 복잡성을 낮출 수 있다.
자동 캐싱, 데이터 무효화, 리패칭 기능은 성능 최적화에 도움을 준다.
RTK Query의 사용은 Redux의 원래 목적인 예측 가능한 상태 관리를 유지하면서 비동기 작업을 쉽고 효율적으로 처리할 수 있게 해준다.
RTK Query는 Redux를 이용한 상태 관리에서 비동기 로직이 필요한 서버 상태 관리에 매우 효율적인 도구다.

Redux - middleware

Sun, 26 Nov 2023 11:01:21 GMT

Redux에 미들웨어 추가하기

앞서 구현한 Redux의 상태관리 로직은 Context API와 useReducer 훅을 사용한 방식과의 큰 차이점이 없다. Redux는 Context API에는 존재하지 않는 미들웨어(Middleware)가 존재한다. Middleware에 대해 학습하고 적용해보자.

1. 미들웨어란?

Redux의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 다른 작업을 수행할 수 있다.

즉, action -> middleware -> dispatch -> reducer 과정으로 액션이 디스페치되면 리듀서에서 해당 액션을 실행하기 전에 추가적인 작업을 수행한다.

2. 미들웨어에서 사용하는 다양한 작업들

특정 조건에 따라 액션이 무시되게 만든다.
액션이 디스패치 됐을 때 이를 수정해서 리듀서에 전달되도록 한다.
특정 액션이 발생했을 때 특정 함수를 실행되도록 한다.

이러한 특징은 특히 비동기 작업 처리에서 많이 사용된다.

3. 미들웨어 만들어보기

// myLogger.ts
import { Action, AnyAction, Dispatch, Middleware, MiddlewareAPI } from 'redux';
import { IRootState } from '@/modules/types';

const myLogger: Middleware<
  Record,
  IRootState,
  Dispatch
> =
  (store: MiddlewareAPI, IRootState>) =>
  (next: Dispatch) =>
  (action: Action) => {
    console.log(action); // 현재 디스패치되는 액션 출력
    const result = next(action); // 다음 미들웨어 (없다면 리듀서)에게 액션 전달
    console.log(store.getState()); // 리듀서에서 처리된 상태 출력
    return result; // dispatch(action)의 결과물 반환
  };

export default myLogger;

// root/index.ts
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import myLogger from './middlewares/myLogger';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myLogger),
});

export type AppDispatch = typeof store.dispatch;

단순히 전달 받은 액션을 출력하고 다음으로 넘기는 미들웨어

미들웨어 안에서는 어떤 작업이든 가능하다.
미들웨어는 여러개를 만들어서 적용할 수 있다.

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().concat(myLogger, anotherMiddleware),

4. redux-thunk 프로젝트에 적용하기

redux 비동기 작업으로는 redux-thunk, redux-saga가 많이 사용다.
redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용되는 미들웨어다.
이 미들웨어를 사용하면 액션객체가 아닌 함수를 디스패치 할 수 있다.

thunk(미들웨어)를 사용하여 apis 파일에서 비동기 처리하던 로직을 redux내에서 처리되도록 수정해보자.

// modules/users.ts
// 비동기 액션 (thunks) 함수
export const getUsersData = createAsyncThunk(
  SET_USERS,
  async (_, { rejectWithValue }) => {
    try {
      const res = await axiosInstance.get('/user_data');
      return res.data;
    } catch (err: unknown) {
      return rejectWithValue((err as AxiosError)?.response?.data);
    }
  },
);

export const addUserData = createAsyncThunk(
  ADD_USER,
  async (user: IUser, { rejectWithValue }) => {
    try {
      await axiosInstance.post('/user_data', user);
      return user;
    } catch (err: unknown) {
      return rejectWithValue((err as AxiosError)?.response?.data);
    }
  },
);

export const updateUsersData = createAsyncThunk(
  UPDATE_USERS,
  async (
    { ids, updateValue }: { ids: number[]; updateValue: boolean },
    { rejectWithValue },
  ) => {
    try {
      const userToUpdate = { isDeleted: updateValue };
      const queryString = ids.join(',');
      await axiosInstance.patch(`/user_data?ids=${queryString}`, userToUpdate);
      return { ids, updateValue };
    } catch (err: unknown) {
      return rejectWithValue((err as AxiosError)?.response?.data);
    }
  },
);

// slice 생성 (reducer)
const usersSlice = createSlice({
  name: 'users',
  initialState: initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUsersData.pending, (state) => {
        state.loading = true;
      })
      .addCase(getUsersData.fulfilled, (state, action) => {
        state.loading = false;
        state.users = action.payload;
      })
      .addCase(getUsersData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || null;
      })
      .addCase(addUserData.pending, (state) => {
        state.loading = true;
      })
      .addCase(addUserData.fulfilled, (state, action) => {
        state.loading = false;
        state.users.push(action.payload);
      })
      .addCase(addUserData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || null;
      })
      .addCase(updateUsersData.pending, (state) => {
        state.loading = true;
      })
      .addCase(updateUsersData.fulfilled, (state, action) => {
        state.loading = false;
        const { ids, updateValue } = action.payload;
        state.users = state.users.map((user) => {
          if (ids.includes(user.id)) {
            return { ...user, isDeleted: updateValue };
          }
          return user;
        });
      })
      .addCase(updateUsersData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || null;
      });
  },
});

5. 미들웨어 사용후 느낀점

Redux의 기본적인 액션은 동기적인 페이로드를 전달하는 객체다.
즉, 리듀서에 전달되었을 때 최종 값을 가지고 있어야한다.
하지만, 데이터 요청과 같은 비동기 작업은 응답을 기다려야 한다.
이를 위해 사용되는 것이 middleware다.
middleware 덕분에 액션은 Promise 결과를 기다리고 리듀서에 전달 될 수 있다.
Promise의 pending, fulfilled, rejected의 상태에 따른 활용도 가능하다.
기존의 비동기 함수 내부에서 dispatch를 호출하는 방법도 동일한 동작을 지원했으나
애플리케이션의 상태를 예측 가능하게 만들자는 Redux 철학에는 middleware를 이용하여 비즈니스 로직을 중앙집중화하는게 적합하다.

Redux - 시작하기

Sat, 04 Nov 2023 17:56:40 GMT

Why Redux?

리액트 프로젝트에서 useContext와 useState, useReducer를 활용하여 상태관리를 진행해왔다. 하지만 이들 만으로는 약간의 아쉬움이 존재했다. 특히 전역 상태 관리를 도와주는 Context의 경우 하위 컴포넌트가 모두 리렌더링되기에 Provider마다 하나의 상태값만을 주게되어 전역 상태가 늘어날 수록 추가되는 Provider로 번거로움과 코드 가독성이 좋지 못함을 경험하게 되었다.

전역 상태관리 라이브러리를 사용해보고 싶어졌다. 그렇다면 어떤 라이브러리를 선택해야 할까? 프로젝트 규모와 팀원들과의 이해관계가 필요하겠지만 학습 단계인 나는 가장 많이 사용되고 있는 Redux를 적용해 보려고 한다.

npm trends 리액트 상태관리 트렌드의 변화

Redux의 철학

Redux를 사용하기에 앞서 Redux가 지향하고자 하는 철학에 대해서 알아보자.

1. Single Source of Truth

리덕스는 애플리케이션의 모든 상태를 하나의 스토어(store) 내에 있는 하나의 객체 트리(tree)에 저장한다. 이것은 애플리케이션의 상태를 예측 가능하게 만들고, 디버깅과 검사를 용이하게 한다.

2. State is Read-Only

상태를 변경할 수 있는 유일한 방법은 액션(action)을 발행(emit)하는 것이다. 액션은 무엇이 일어나야 하는지를 설명하는 일반 객체다. 이러한 제한은 상태 변경을 일관되게 추적할 수 있게 해주며, 애플리케이션에서 예측 가능한 동작을 보장한다.

3. Changes are Made with Pure Functions

액션에 의해 상태 트리가 어떻게 변화하는지를 지정하기 위해 리듀서(reducer)라 불리는 순수 함수를 사용한다. 리듀서는 이전 상태와 액션을 인자로 받아 새로운 상태를 반환하는 함수다. 이 원칙은 상태 변화의 로직을 명확하고 예측 가능하게 만들며, 테스트와 디버깅을 용이하게 해준다.

위와 같은 철학은 단방향 상태관리 Flux 아키텍쳐를 기반으로 Redux가 발전해왔기 때문이다.

상태관리로 유명한 패턴 중 하나인 MVC 패턴의 경우 양방향 데이터 바인딩이 가진 복잡성과 예측 불가능성으로 view가 많이 필요한 프론트엔드 개발에서는 어려움이 많다. 이를 해결하기 위해, Flux 아키텍처의 단방향 데이터 흐름 개념을 가져와서 발전한게 Redux 라이브러리다.

Redux 사용해보기

Redux 스토어 설정하기

Redux 스토어를 설정하는 첫 번째 단계는 프로젝트의 루트(index.tsx) 파일에서 생성한다.
아래는 단일 루트 리듀서를 사용하여 스토어를 생성하는데, 이 리듀서는 다양한 모듈의 리듀서들을 가지고 있을 수 있다.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './modules';
import App from './components/App';

const store = configureStore({
  reducer: rootReducer,
});

export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  
    
      
    
  ,
);

루트 리듀서

리듀서들을 포함하고 있는 modules 폴더에서 index.ts 파일을 통해 모든 리듀서들을 결합한다.
예시에서는 유저 데이터와 관련된 모든 액션을 처리하는 users 리듀서를 가지고 있다.
전역에서 관리하고자 하는 상태의 다른 리듀서를 추가할 수 있다.

// modules/index.ts
import { combineReducers } from 'redux';
import usersReducer from './users';

const rootReducer = combineReducers({
  usersReducer,
  // + 다른 리듀서들
});

export default rootReducer;

리듀서 생성

리듀서에 인자로 전달될 액션을 정의한다.
usersReducer는 세 가지 액션 타입 SET_USERS, ADD_USER, UPDATE_USERS에 대응하여 각각 다른 상태 변경을 수행하도록 설계되었다.

// modules/users.ts
export const setUsers = (users: IUser[]) => ({
  type: SET_USERS,
  payload: users,
});

export const addUser = (user: IUser) => ({
  type: ADD_USER,
  payload: user,
});

export const updateUsers = (userIds: number[]) => ({
  type: UPDATE_USERS,
  payload: userIds,
});

const initialState: IUserDataState = {
  users: [],
};

const usersReducer = (
  state = initialState,
  action: IUserDataActions,
): IUserDataState => {
  switch (action.type) {
    case SET_USERS:
      return {
        ...state,
        users: action.payload,
      };
    case ADD_USER:
      return {
        ...state,
        users: [...state.users, action.payload],
      };
    case UPDATE_USERS:
      return {
        ...state,
        users: state.users.map((user) =>
          action.payload.includes(user.id)
            ? { ...user, isDeleted: !user.isDeleted }
            : user,
        ),
      };
    default:
      return state;
  }
};

export default usersReducer;

dispatch로 리듀서에 액션 전달하여 상태 관리하기

useDispatch로 리듀서에 액션을 전달할 수 있다.
리듀서는 전달 받은 액션 타입에 따라 현재 상태를 반환, 변경, 추가 한다.
유저 정보는 서버에서 관리되는 데이터로 서버와의 통신이 필요하다.
때문에 아래 예제는 비동기 요청 함수 내에서 dispatch를 적용하고 있다.

const getUsersData = async (dispatch: AppDispatch) => {
  try {
    const res = await axiosInstance.get(`/user_data`);
    if (res.status === 200) {
      // 유저 데이터 반환
      dispatch(setUsers(res.data));
      return res.data;
    }
  } catch (err) {
    throw err;
  }
};

const addUserData = async (data: IUser, dispatch: AppDispatch) => {
  try {
    const res = await axiosInstance.post(`/user_data`, data);

    if (res.status === 200) {
      // 유저 추가
      dispatch(addUser(res.data));
    }
  } catch (err) {
    return err;
  }
};

const updateUserData = async (
  ids: number[],
  updateValue: boolean,
  dispatch: AppDispatch,
) => {
  try {
    const userToUpdate = { isDeleted: updateValue };
    const queryString = ids.join(',');
    const res = await axiosInstance.patch(
      `/user_data?ids=${queryString}`,
      userToUpdate,
    );

    if (res.status === 200) {
      // 유저 상태 변경
      dispatch(updateUsers(ids));
    }
  } catch (err) {
    return err;
  }
};

Redux를 활용한 전역 상태 활용하기

전역 단일 스토어에서 관리되는 리듀서이기에 어느 컴포넌트에서든 액션을 통해 서버로 부터 상태를 가져오거나 변경할 수 있다.

getUsersData(dispatch)
updateUserData(ids, false, dispatch);
addUserData(newUserData, dispatch);

useSelector로 상태를 구독하여 UI를 렌더링할 수 있다.

const users = useSelector((state: IRootState) => state.users.users);

// jsx
users.map((user) => (

Framer Motion의 Custom 속성을 활용한 동적 애니메이션 구현

Sat, 21 Oct 2023 06:59:15 GMT

React에서 Framer Motion 라이브러리로 애니메이션 효과를 적용하던 중 의도치 않은 버그가 발생되었다. 어떻게 버그가 해결되었는지 그리고 왜 이런 버그가 발생했는지 기록하고 정리해보자.

🐛 슬라이더 애니메이션 효과 버그 발생

반대 방향으로 슬라이더를 전환하면 이전 슬라이더 페이지가 사라지는 방향이 이전 속성 기반으로 움직이는 버그가 발생.

❌ 문제 코드

const [direction, setDirection] = useState<'right' | 'left'>('right');


      
        
           handleSliderPage(ControlKeys.LEFT)}
            icon="chevron-left"
            size="3x"
          />
           handleSliderPage(ControlKeys.RIGHT)}
            icon="chevron-right"
            size="3x"
          />
        
        

export const rowVariants = {
  left: {
    hidden: { x: -window.innerWidth },
    visible: { x: 0 },
    exit: { x: window.innerWidth },
  },
  right: {
    hidden: { x: window.innerWidth },
    visible: { x: 0 },
    exit: { x: -window.innerWidth },
  },
};

방향 상태를 만들고 이벤트가 일어나면 해당 상태를 애니메이션 속성으로 선택
- 오른쪽 버튼을 누르면 variants의 right를 선택
- 왼쪽 버튼을 누르면 variants의 left를 선택

✅ 해결 코드

AnimatePresence의 custom 속성 개념을 확인
custom을 이용하여 motion의 애니메이션에 prop(사용자 정의값)을 전달

const [direction, setDirection] = useState<'right' | 'left'>('right');


      
        
           handleSliderPage(ControlKeys.LEFT)}
            icon="chevron-left"
            size="3x"
          />
           handleSliderPage(ControlKeys.RIGHT)}
            icon="chevron-right"
            size="3x"
          />
        
        

export const rowVariants = {
  hidden: (direction: string) => ({
    x: direction === 'right' ? window.innerWidth : -window.innerWidth,
  }),
  visible: { x: 0 },
  exit: (direction: string) => ({
    x: direction === 'right' ? -window.innerWidth : window.innerWidth,
  }),
};

버그가 사라지도 의도하던 애니메이션이 잘 적용되고 있다.

📝 결론

두 코드의 차이점은 S.Row 컴포넌트에서 variants prop을 어떻게 사용하는가가 다르다.

첫 번째 코드

첫 번째 코드에서 rowVariants는 direction 값에 따라 다른 객체를 반환한다.
S.Row 컴포넌트에서 variants prop은 rowVariants[direction]을 통해 직접 해당 객체를 가져온다.
즉, S.Row 컴포넌트가 리렌더링될 때마다 variants prop의 참조(객체)가 변경된다.

두 번째 코드

두 번째 코드에서는 custom prop을 통해 direction 값을 전달하고 rowVariants가 함수를 통해 값을 계산한다.
동일한 객체에서 값을 다르게 계산한다.
S.Row 컴포넌트의 variants prop은 rowVariants를 직접 참조하고 있다.
즉, S.Row 컴포넌트가 리렌더링되더라도 variants prop의 참조(객체)는 동일하여 추적이 된다.

Framer Motion은 내부적으로 애니메이션 상태를 추적하기 위해 참조를 사용한다. 동적으로 애니메이션의 속성을 변경하고자 할때 객체를 할당하면 리렌더링마다 새로운 객체로 참조하게된다. 따라서, 객체의 참조는 일정하게 유지하면서 동적인 값을 주기 위해 custom 속성을 이용한다.

React - Suspense

Mon, 16 Oct 2023 05:14:02 GMT

Why Suspense?

기존에는 각 컴포넌트에서 데이터를 비동기로 요청할 때, 해당 컴포넌트 내에서 로딩 상태를 관리했다.

// Home
export const Home = () => {
  const { data: characters, status } = useFetch({
    fetchFunction: fetchCharacters,
    args: [50],
    cacheKey: ROUTE_PATH.HOME,
  });
  const charactersList = characters?.results;

  return (
    
      // 비동기 요청이 처리될 때까지 Loading 컴포넌트 렌더링
      {status === 'pending' ? (
        
      ) : (

// Detail
export const Detail = () => {
  const { id } = useParams();
  const { data: characterDetail, status } = useFetch({
    fetchFunction: fetchCharacterDetail,
    args: [id],
    cacheKey: `${ROUTE_PATH.DETAIL}/${id}`,
  });
  const detailsInfo = characterDetail?.results[0];

 return (
    <>
      // 비동기 요청이 처리될 때까지 Loading 컴포넌트 렌더링
      {status === 'pending' ? (
        
      ) : (

이는 각 컴포넌트마다 로딩 상태를 표시하는 로직을 포함하게 되어, 코드의 중복과 복잡성을 증가시킨다.

React의 Suspense와 lazy 기능을 사용하여 이러한 문제를 효과적으로 해결할 수 있다.

Suspense

Suspense는 React에서 비동기 작업의 결과를 기다리는 경계를 설정하는 컴포넌트다.
주로 lazy와 함께 사용하여 코드 분할 및 비동기 컴포넌트 로딩을 처리하며,
데이터를 불러오는 동안 보여줄 대체 컴포넌트 (보통 로딩 인디케이터)를 설정하는 데 사용된다.

Suspense의 주요 특징

비동기 경계 설정
: Suspense 내부의 컴포넌트들이 데이터를 불러오는 동안 대체 컴포넌트를 보여준다.
이를 통해 비동기 작업 중에도 사용자에게 즉시 반응하는 UI를 제공할 수 있다.
통합된 로딩 상태 관리
: 전통적으로 각 컴포넌트 내에서 로딩 상태를 관리해야 했으나,
Suspense를 사용하면 애플리케이션 전체에서 중앙 집중식으로 로딩 상태를 관리할 수 있다.
코드 분할과 연계
: React의 lazy 함수와 결합하여 컴포넌트의 코드 분할을 쉽게 할 수 있다.
이렇게 하면 특정 컴포넌트가 실제로 렌더링 될 때까지 해당 컴포넌트의 코드를 로딩하지 않아, 초기 로딩 성능이 향상된다.

Suspense 사용법

import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      {artist.name}
      }>
        
      
    
  );
}

function Loading() {
  return 🌀 Loading...;
}

Suspense 경계 내의 컴포넌트 Albums는 비동기적으로 데이터를 요청한다.
Albums는 비동기 작업 중일 때 해당 Promise를 throw 해야한다.
Albums는 데이터를 아직 받지 못했다면 Promise 가 pending를 throw한다.
Suspense는 Albums가 던진 Promise 상태를 받아 pending이면 fallback에 지정된 컴포넌트를 렌더링 한다.
데이터가 준비되면 (Promise가 fulfilled되면) 해당 컴포넌트(Albums)를 렌더링 한다.

lazy

lazy는 React의 기능 중 하나로, 컴포넌트를 동적으로 로드하는 데 사용된다.
이는 앱의 초기 로드 시 필요하지 않은 컴포넌트를 로드하지 않아 번들 크기를 줄이고 초기 로딩 속도를 개선할 수 있다.
사용자가 특정 기능이나 뷰에 액세스할 때만 해당 컴포넌트를 로드한다.

lazy 사용법

import { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    
      Loading...}>
        
      
    
  );
}

동적으로 불러내고자 하는 컴포넌트(OtherComponent)를 lazy 함수로 호출한다.
lazy는 Suspense 컴포넌트와 함께 사용된다.
사용자가 OtherComponent를 요청하면 로드되기에 로드되는 동안 Suspense의 fallback 컴포넌트를 보여준다.

🚀 코드에 적용하기

1. 데이터 요청 useFetch에서 Promise를 throw 하도록 수정

import { useState, useEffect, useRef } from 'react';
import { useCacheContext } from '@/contexts/CacheContext';

type Status = 'initial' | 'pending' | 'fulfilled' | 'rejected';

interface UseFetch {
  data?: T;
  status: Status;
  error?: Error;
  cacheKey: string;
}

interface FetchOptions {
  fetchFunction: (...args: any[]) => Promise;
  args: any[];
  cacheKey: string;
}

export const useFetch = ({
  fetchFunction,
  args,
  cacheKey,
}: FetchOptions): UseFetch => {
  const [state, setState] = useState>({
    status: 'initial',
    data: undefined,
    error: undefined,
    cacheKey,
  });

  const { cacheData, isDataValid } = useCacheContext();
  const activePromise = useRef | null>(null);

  useEffect(() => {
    let ignore = false;

    const fetchData = async () => {
      if (ignore) return;

      try {
        const response = await fetchFunction(...args);
        cacheData(cacheKey, response);

        setState((prevState) => ({
          ...prevState,
          status: 'fulfilled',
          data: response,
          cacheKey,
        }));
      } catch (error) {
        setState((prevState) => ({
          ...prevState,
          status: 'rejected',
          error: error as Error,
          cacheKey,
        }));
      }
    };

    if (state.status === 'initial') {
      if (isDataValid(cacheKey)) {
        setState((prevState) => ({
          ...prevState,
          status: 'fulfilled',
          data: cacheData(cacheKey),
          cacheKey,
        }));
      } else {
        setState((prevState) => ({
          ...prevState,
          status: 'pending',
        }));
        activePromise.current = fetchData();
      }
    }

    return () => {
      ignore = true;
    };
  }, [fetchFunction, cacheKey, cacheData, isDataValid, state.status]);

  if (state.status === 'pending' && activePromise.current) {
    throw activePromise.current;
  }
  if (state.status === 'rejected' && state.error) {
    throw state.error;
  }

  return state;
};

상태 업데이트에 따라 리렌더링을 방지하기 위해 throw할 Promise를 useRef에 저장한다.

Promise가 pending 상태가 되면 activePromise를 업데이트 해준다.

Promise 상태가 pending이고 activePromise.current에 값이 있으면 해당 Promise를 던져 Suspense를 활성화시킨다.
Promise 상태가 rejected이고 오류가 있으면 해당 오류를 던져서 Error Boundary에서 처리할 수 있게 한다.

2. 각 컴포넌트에서 관리하던 로딩 상태 로직을 제거한다.

// Home
export const Home = () => {
  const { data: characters } = useFetch({
    fetchFunction: fetchCharacters,
    args: [50],
    cacheKey: ROUTE_PATH.HOME,
  });
  const charactersList = characters?.results;

  return (
    
        
        // 렌더링 코드 중략

// Detail
export const Detail = () => {
  const { id } = useParams();
  const { data: characterDetail } = useFetch({
    fetchFunction: fetchCharacterDetail,
    args: [id],
    cacheKey: `${ROUTE_PATH.DETAIL}/${id}`,
  });
  const detailsInfo = characterDetail?.results[0];

 return (
    <>
      {detailsInfo && (
        
        // 렌더링 코드 중략

3. router 로직에서 비동기 요청 처리로 인한 로딩 상태를 관리한다.

import { Suspense, lazy } from 'react';
import { createBrowserRouter } from 'react-router-dom';
import { Layout } from '@/routes/Layout';
import { ROUTE_PATH } from '@/router/routePath';
import { NotFound } from '@/routes/NotFound';
import { ErrorBoundary } from '@/components/ErrorBoundary';
import { Loading } from '@/components/Loading';
import Home from '@/routes/Home';

const Detail = lazy(() => import('@/routes/Detail'));

export const router = createBrowserRouter([
  {
    element: ,
    path: ROUTE_PATH.ROOT,
    errorElement: ,
    children: [
      {
        path: ROUTE_PATH.HOME,
        element: (
          
            }>
              
            
          
        ),
      },
      {
        path: ROUTE_PATH.DETAIL,
        element: (
          
            }>
              
            
          
        ),
      },
    ],
  },
]);

lazy를 사용하여 Detail 컴포넌트는 초기 로드에서 제외하고 사용자가 엑세스 하는 경우 로드한다.

Recoil - Selectors

Mon, 09 Oct 2023 04:26:25 GMT

Recoil의 Selectors와 React Hook Form을 학습하며 ToDoList를 만들어 보자.

Selectors란?

앞서 학습한 Atoms와 함께 Recoil에는 Selectors라는 개념이 존재한다.
Selectors는 Atoms 상태 값을 동기 또는 비동기 방식을 통해 변환한다.

Recoil의 selectors는 파생 상태(derived state) 또는 상태 변환을 계산하고 관리하기 위한 도구다.
selectors는 기본적으로 하나 이상의 atom 또는 다른 selectors의 상태를 기반으로 새로운 상태 값을 계산하는 순수 함수다.

Selectors의 특징

Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다.
상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다.
컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링 된다.
컴포넌트의 관점에서 보면 selectors와 atoms는 동일한 인터페이스를 가지므로 서로 대체할 수 있다.

1. 파생 상태 (get)

여러 atom의 값을 결합하여 새로운 상태 값을 계산할 수 있다.

const lengthState = selector({
  key: 'lengthState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

2. 비동기 쿼리 (get)

selectors는 비동기 작업을 수행하고 결과를 상태로 반환할 수 있다.

const userDataSelector = selector({
  key: 'userData',
  get: async ({ get }) => {
    const response = await fetch('/api/user');
    return response.json();
  },
});

3. 다른 상태 변경 (set)

selectors는 set 함수를 사용하여 연관된 atom 또는 다른 selectors의 상태를 변경할 수 있다.

const resetAllData = selector({
  key: 'resetAllData',
  set: ({ reset }) => {
    reset(dataAtom1);
    reset(dataAtom2);
  },
});

4. 캐싱

selectors는 계산된 결과를 자동으로 캐시한다.
같은 입력에 대한 결과가 이미 캐시되어 있으면, selectors는 캐시된 값을 재사용한다.

5. 의존성 관리

selectors는 자동으로, 의존하는 atom 또는 selectors의 변화를 감지한다.
따라서 의존하는 상태가 변경되면 해당 selectors도 자동으로 업데이트된다.

ToDoList 만들기

1. Recoil 상태 설정 (Atoms, Selectors)

전역 상태로 관리할 toDoList 배열을 atoms로 정의한다.
toDoList에 존재하는 toDo들의 상태를 기반으로 filter하기 위한 Selectors를 정의한다.

import { atom, selector } from 'recoil';

export enum FilterKeys {
  'TOGO' = 'TOGO',
  'BEEN' = 'BEEN',
  'LIKE' = 'LIKE',
  'DEL' = 'DEL',
}

export interface IToDo {
  id: number;
  text: string;
  filterKey: FilterKeys;
}

export const toDoListFilterState = atom({
  key: 'toDoListFilterState',
  default: FilterKeys.TOGO,
});

export const toDoListState = atom({
  key: 'toDoListState',
  default: JSON.parse(localStorage.getItem('toDoList') || '[]'),
});

export const toDoSelector = selector({
  key: 'toDoSelector',
  get: ({ get }) => {
    const toDos = get(toDoListState);

    return [
      toDos.filter((toDo) => toDo.filterKey === FilterKeys.TOGO),
      toDos.filter((toDo) => toDo.filterKey === FilterKeys.BEEN),
      toDos.filter((toDo) => toDo.filterKey === FilterKeys.LIKE),
    ];
  },
});

ToDo가 되는 개체의 타입을 정의한다.
Filter로 사용될 key값을 enum을 사용해 안정성을 높여준다.

사용자가 입력하는 ToDo들을 가지는 리스트 상태다.
로컬스토리지에 저장된 값이 있다면 불러오고 없다면 빈 배열로 초기화 한다.

toDo의 filterKey 속성에 들어갈 값
최초 toDo 생성시 TOGO 키값으로 초기화 한다.

toDoListState atom의 전체 할 일 목록을 가져와서, 각 filterKey에 따라 필터링하여 새로운 배열을 반환한다.
이렇게 원본 상태를 기반으로 새로운 값을 계산하는 기능이 selector의 핵심적인 특징이다.

2. Form 컴포넌트 구현

React Hook Form의 useForm 훅을 사용하여 폼을 구현한다.
폼 요소(예: input)에 register 함수를 연결하여 폼과 관련된 상태와 함수를 관리한다.
필요한 경우 유효성 검사 또는 에러 핸들링을 구현한다.

import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { toDoSelector, toDoListState } from '@/atoms';
import ToDo from './ToDo';
import CreateToDo from './CreateToDo';

export default function ToDoList() {
  // 전역 상태로 관리되는 toDoListState 상태값을 불러온다.
  const toDoList = useRecoilValue(toDoListState);
  // toDoSelector로 필터링된 배열값들을 불러온다.
  const [toGo, been, like] = useRecoilValue(toDoSelector);

  // toDoList의 최신 상태를 로컬스토리지에 저장한다.
  useEffect(() => {
    localStorage.setItem('toDoList', JSON.stringify(toDoList));
  }, [toDoList]);

  return (
    
      내가 가고싶은 나라들
      
      {toGo?.map((toDo) => )}
      내가 가본 나라들
      {been?.map((toDo) => )}
      내가 좋아하는 나라들
      {like?.map((toDo) => )}
    
  );
}

toDoSelector로 필터링된 값들을 UI 요소로 사용하고 있다.
실제 상태의 원본값은 필터링 되어 분리되어 있지 않다.
원본 상태의 훼손과 변경없이 selector를 활용한 매우 유용한 기능이다.

3. 컴포넌트에서 Recoil 상태의 사용

폼의 제출 함수(onSubmit) 내에서 Recoil 상태를 업데이트하거나, 폼의 초기 값으로 Recoil 상태를 사용한다.
필요한 경우 selectors를 사용하여 폼 데이터를 변환하거나 비동기 작업을 수행한다.

// CreateToDo 컴포넌트
const CreateToDo = () => {
  // toDoList에 새로운 toDo를 추가하기 위해 useSetRecoilState 함수 호출
  const setToDoList = useSetRecoilState(toDoListState);
  // 새로운 toDo의 필터키 값을 주기위해 초기화 filterKey값 호출
  const filterKey = useRecoilValue(toDoListFilterState);

  const { register, handleSubmit, setValue, formState } = useForm();

  const handleValid = ({ toDo }: IForm) => {
    setToDoList((prevToDos) => [
      ...prevToDos,
      { text: toDo, id: Date.now(), filterKey },
    ]);
    setValue('toDo', '');
  };

  return (
    
      
      
      {formState.errors.toDo?.message}
    
  );
};

export default CreateToDo;

RHF로 제출된 toDo를 기존 toDoList에 추가하는 함수 로직
최초 filterKey 값은 전역 상태에서 지정한 TODO가 된다.
전역 상태로 관리하기에 전역 상태에서만 변경해주면 구독 중인 모든 컴포넌트에 동일하기 적용된다.
즉, 다른 컴포넌트에서 filterKey를 활용한 기능 추가에 더욱 유용하다.

// ToDo 컴포넌트
const ToDo = ({ text, filterKey, id }: IToDo) => {
  // toDoList의 toDo 상태를 변경하기 위해 useSetRecoilState 함수 호출
  const setToDoList = useSetRecoilState(toDoListState);

  const onClick = (setFilterKey: IToDo['filterKey']) => {
    setToDoList((prevToDos) => {
      if (setFilterKey === FilterKeys.DEL) {
        return prevToDos.filter((toDo) => toDo.id !== id);
      }

      return prevToDos.map((toDo) =>
        toDo.id === id ? { ...toDo, filterKey: setFilterKey } : toDo,
      );
    });
  };

  return (
    
      {text}
      {filterKey == FilterKeys.TOGO && (
        <>
          
          
        
      )}
      {filterKey == FilterKeys.BEEN && (
        <>
          
          
        
      )}
      {filterKey == FilterKeys.LIKE && (
        
      )}
    
  );
};

export default ToDo;

ToDo 컴포넌트는 앞서 toDoList에서 필터링된 상태값들을 props로 받아오고 있다.
원본 상태를 변경하지 않고 selector로 새로운 상태값을 파생하여 만든 컴포넌트가 된다.

원본 상태를 필터링하여 렌더링한 UI, 원본 상태를 파생하여 생성한 컴포넌트 모두 원본 상태와 의존되어 있다.

파생된 값으로 만들어진 컴포넌트 ToDo에서도 전역 상태의 toDoList를 변경할 수 있다.
toDoList 상태를 변경 하면 의존성에 의해서 toDoList를 구독한 컴포넌트들은 모두 리렌더링 된다.

ToDoList 결과물

Recoil - Atoms

Thu, 05 Oct 2023 07:04:56 GMT

Why Recoil?

Recoil은 React 애플리케이션의 상태 관리를 위한 라이브러리다.
호환성과 단숨함을 위해서는 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용함이 좋다.
하지만, React의 자체 상태 관리 기능에는 다음과 같은 한계가 존재한다.
- 컴포넌트의 상태는 공통된 상위요소까지 끌어올려야만 공유된다. 이 과정에서 공유되는 모든 컴포넌트가 리렌더링 된다.
- 전역 상태 관리를 지원하는 Context API는 여러 개의 독립적인 상태 값을 동시에 효율적으로 관리하기 어렵다.
- 이 두 가지 특성이 트리의 최상단부터 트리의 말단까지의 코드 분할을 어렵게 한다.

Context API의 한계

Context는 하나의 'value' 속성만 가질 수 있다.
즉, 사용자 정보과 테마 설정을 동시에 Context를 통해 관리하고자 한다면 이 두 상태를 하나의 객체로 묶어서 전달해야 한다.

const MyContext = React.createContext();


  ...
;

이는 userInfo만의 상태를 변경하더라도 Context의 변화를 감지하고 themeSettings를 가지는 컴포넌트로 리렌더링된다.
때문에 이 두 상태를 분리하고 각각의 상태에 대해 다른 컴포넌트가 구독하고자 한다면 각 상태에 대해 별도의 Context를 생성해야 한다.
이는 코드의 복잡성이 증가하고 관리가 어려워 진다.

Atoms

Atoms는 Recoil의 핵심 개념으로 컴포넌트의 상태를 따로 분리하여 관리한다.
Atoms라는 별도의 파일에서 상태를 관리하고 여러 컴포넌트에서 사용되는 경우 상태를 공유한다.
즉, atoms를 간단하게 이애한다면 전역에 존재하는 context와 유사하다.
다만, 컴포넌트는 특정 atom을 구독하는 매커니즘으로 해당 atom을 구독한 컴포넌트들만 리렌더링된다.

Recoil의 핵심 장점 중 하나는 효율적인 구독 메커니즘이 있어서 해당 atom을 직접 구독하는 컴포넌트만 해당 atom의 변화에 반응하여 리렌더링된다.

Recoil로 다크모드 적용하기

Recoil의 atom을 사용하여 다크모드 기능을 구현해 보자.

1. recoil 설치

npm install recoil

2. recoil 적용

앱 전역에 recoil을 적용한다.

// index
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);
root.render(
  
    
      
    
  ,
);

3. Atoms 생성

import { atom } from 'recoil';

export const isDarkAtom = atom({
  key: 'isDark',
  default: false,
});

key : Atoms는 디버깅, 지속성 및 모든 atoms의 map을 볼 수 있는 고유한 키가 필요하다.
default : 컴포넌트의 상태처럼 기본값을 가진다.

4. Atoms 상태값 사용

// App
import { useRecoilValue } from 'recoil';
import { isDarkAtom } from './atoms';

function App() {
  const isDark = useRecoilValue(isDarkAtom);

  return (

useRecoilValue() 훅을 통해서 어느 컴포넌트에서든 사용이 가능하다.
다크 모드의 경우 모든 App에 전달되어야 하므로 App에서 사용한다.

5. Atoms 상태값 변경

// coins
import { isDarkAtom } from '@/atoms';
import { useSetRecoilState } from 'recoil';

const Coins = () => {
  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setDarkAtom((prev) => !prev);

return (
    
      
        Coins

useSetRecoilState() 훅을 통해 Atom의 상태를 변경하는 함수를 만들 수 있다.
const [state, setState] = useState()의 setState와 유사하다.
다만, 다른 컴포넌트에서도 사용할 수 있다는 차이가 있다.

6. 구현 결과

Recoil의 훅

1. useRecoilState

useState와 유사하게 동작하는 훅. 주어진 atom의 상태와 해당 상태를 설정하는 함수를 반환한다.

const [value, setValue] = useRecoilState(myAtom);

2. useRecoilValue

주어진 atom 또는 selector의 현재 값을 반환하는 훅. 상태만을 읽을 때 사용한다.

const value = useRecoilValue(myAtom);

3. useSetRecoilState

주어진 atom의 상태를 설정하는 함수만을 반환하는 훅.
상태를 변경할 때만 필요하고, 현재 값을 알 필요가 없는 경우에 사용한다.

const setValue = useSetRecoilState(myAtom);

4. useResetRecoilState

주어진 atom의 상태를 초기 상태로 재설정하는 함수를 반환하는 훅.

const resetValue = useResetRecoilState(myAtom);

5. useRecoilCallback

Recoil 상태에 액세스하거나 변경하는 콜백을 생성하는 훅.
이 콜백은 비동기 작업에 유용하며, Recoil 상태를 바깥 스코프에서 사용할 수 있게 해준다.

const someCallback = useRecoilCallback(({ snapshot, set }) => async () => {
  const currentValue = snapshot.getLoadable(myAtom).contents;
  // Do something with currentValue or set new value
  set(myAtom, newValue);
});

React - React Hook Form

Wed, 27 Sep 2023 06:26:51 GMT

React Hook Form

React Hook Form (RHF)은 React 기반 애플리케이션에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리다.
일반적인 방법으로 Form을 만든다면 매우 많은 state와 검증단계가 필요하다.
RHF을 사용한다면 다양한 Input의 상태와 검증을 간단하게 관리할 수 있다.

일반적인 방법의 코드

하나의 input에도 많은 양의 코드가 필요하다.

import { useState } from 'react';

const ToDoList = () => {
  const [toDo, setToDo] = useState('');
  const [toDoError, setToDoError] = useState('');

  const onChange = (event: React.FormEvent) => {
    const {
      currentTarget: { value },
    } = event;
    setToDoError('');
    setToDo(value);
  };

  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log(toDo);
    if (toDo.length < 10) {
      return setToDoError('To do should be longer');
    }
    console.log('submit');
  };

  return (
    <>
      
        
          
          
          {toDoError !== '' ? toDoError : null}
        
      
    
  );
};

export default ToDoList;

React Hook Form

React Hook Form

설치

npm install react-hook-form

사용방법

1. useForm

RHF의 핵심 훅으로 폼과 관련된 여러 메서드와 속성을 가져올 수 있다.

import { useForm } from 'react-hook-form';

const ToDoList = () => {
  const {} = useForm();
  return (
    <>
      
        
          
          
        
      
    
  );
};

export default ToDoList;

const {} = useForm() 에서 다양한 메서드(도구)를 사용할 수 있다.
register: 입력 요소를 폼에 등록하는 함수
handleSubmit: 폼 제출을 처리하는 함수
formState: 폼의 상태에 관한 정보를 담고 있다. (예: errors)
setError: 수동으로 폼의 오류를 설정하는 함수
setValue : 폼 제출 후 입력값을 설정하는 함수

2. register

입력 요소를 RHF에 등록하는데 사용된다.

import { useForm } from 'react-hook-form';

const ToDoList = () => {
  const { register } = useForm();

  return (
    <>
      
        
          
          
        
      
    
  );
};

export default ToDoList;

register에는 input에서 사용하던 다양한 속성이 들어있다.

input {...register('toDO')}한번으로 전부 적용할 수 있다.
필수입력, 최소 길이 등의 조건 추가가 가능하다.
```
  
```

3. watch

입력 요소의 값을 확인할 때 사용된다.

const ToDoList = () => {
  const { register, watch } = useForm();

console.log(watch())

form 입력값들의 변화를 관찰 할 수 있게 해주는 함수

4. handleSubmit

폼 제출을 처리하는 데 사용된다.
인자로 콜백 함수를 받아서 폼이 유효하다면 해당 콜백 함수를 실행한다.
기존의 onSubmit, preventDefault 를 담당한다고 생각하면 된다.

import { useForm } from 'react-hook-form';

const ToDoList = () => {
  const { register, handleSubmit } = useForm();
  // 모든 검증이 끝나면 일어난다.
  const onVaild = (data: any) => {
    console.log(data);
  };

  return (
    <>
      
        
          
          
          
          
          
          
        
      
    
  );
};

export default ToDoList;

5. formState

폼의 현재 상태와 관련된 정보를 제공한다.
isDirty: 사용자가 폼의 어떤 입력 필드라도 변경한 경우 true를 반환
isSubmitting: 폼이 현재 제출 중인 경우 true를 반환
isValid: 폼이 유효한 경우 true를 반환
submitCount: 폼이 제출된 횟수
touchedFields: 사용자가 접근하거나 수정한 입력 필드의 목록
errors: 폼의 유효성 검사 오류에 대한 정보.

import { useForm } from 'react-hook-form';

const ToDoList = () => {
  const { register, handleSubmit, formState } = useForm();
  // 모든 검증이 끝나면 일어난다.
  const onValid = (data: any) => {
    // console.log(data);
  };

  // formState의 errors 속성 확인
  console.log(formState.errors);

  return (
    <>
      
        
          
          
          
          
          
          
        
      
    
  );
};

export default ToDoList;

formState의 errors 속성을 이용하면 현재 어떤 input에서 에러가 발생했는지 알 수 있다.

6. errors

formState의 errors를 활용해서 사용자에게 잘못된 입력값을 알려 줄 수 있다.
register에서 등록한 조건을 충족하지 못한다면 formState의 errors 속성에 등록된다.

errors의 속성

type : 오류의 유형. (예: "required", "minLength", "pattern" 등)
message : 오류에 대한 메시지. register 함수에서 설정한 오류 메시지나 setError 함수를 통해 수동으로 설정한 오류 메시지를 포함할 수 있다.
특정 register에 errors가 있다면 message를 통해 사용자에게 보여 줄 수 있다.

7. setError

수동으로 입력 필드에 오류를 설정하는 데 사용된다.
API 응답 또는 사용자 정의 로직을 기반으로 오류를 설정할 때 유용하다.

setError(name, error, options);

name(필수) : 오류를 설정할 입력 필드의 이름
error(필수) : 설정할 오류의 정보
- type: 오류의 유형 (예: "manual", "required" 등)
- message: 오류 메시지
options(선택) : 추가적인 옵션을 설정할 수 있다.
- shouldFocus: 오류가 설정된 입력 필드로 포커스를 이동할지 결정하는 불리언 값.

onValid에 setError를 추가하여 폼 제출전에 검증 단계를 추가할 수 있다.

const onValid = (data: IForm) => {
    if (data.password !== data.rePassword) {
      setError(
        'rePassword',
        { message: 'Password are not the same' },
        { shouldFocus: true },
      );
    }
  };

8. Custom Validation

사용자 정의 유효성 검사로 register 함수의 validate 옵션을 사용해서 정의할 수 있다.
예) 특정 아이디는 사용이 불가하다는 사용자 정의 유효성

9. Pattern VS Validate

pattern

pattern은 정규 표현식을 기반으로 입력 값의 형식을 검사한다.
주로 특정 형식(예: 이메일 주소, 전화번호)을 가진 값이 입력되었는지 확인할 때 사용된다.
pattern 속성의 값은 정규 표현식과 관련된 오류 메시지를 포함하는 객체가 될 수 있다.

예시:

register('email', {
  pattern: {
    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
    message: 'Invalid email format'
  }
})

validate

validate는 사용자 정의 검증 함수를 제공하여 좀 더 복잡한 유효성 검사를 수행할 수 있다.
함수는 입력 값이 유효한 경우 true 또는 유효하지 않은 경우 오류 메시지를 반환해야 한다.
여러 개의 사용자 정의 검증 함수를 객체 형태로 제공하여 여러 규칙을 동시에 적용할 수 있다.

예시:

register('username', {
  validate: {
    isUnique: value => isUsernameUnique(value) || 'Username is already taken',
    notEmpty: value => value.trim().length > 0 || 'Username cannot be empty'
  }
})

차이점

pattern은 정규 표현식을 기반으로 입력 값의 형식을 간단하게 검사하는 데 사용되는 반면, validate는 복잡한 로직이나 여러 검증 규칙을 적용하는 데 사용된다.
pattern은 주로 특정 형식의 값이 입력되었는지 확인하는 데 사용되고, validate는 다양한 조건을 기반으로 입력 값을 검증하는 데 사용된다.

React - Data Caching

Sun, 24 Sep 2023 20:00:47 GMT

Data Caching?

Data Caching이란 반복적으로 엑세스되는 데이터를 빠르게 사용할 수 있도록 메모리에 일시적으로 저장하는 프로세스를 의미한다.

데이터 캐싱으로 얻을 수 있는 이점이 많기에 성능 향상과 효율적인 리소스 사용을 위해 필수적으로 사용되고 있다.

데이터 캐싱의 이점

속도 향상 : 캐시 메모리는 RAM과 같은 저장소에 위치하므로 외부 서버에 접근하는 것보다 빠르게 엑세스할 수 있다.
부하 감소 : 반복적으로 요청되는 데이터를 캐시에 저장함으로써 서버로의 데이터 요청 수를 줄일 수 있다.
사용자 접근성 향상 : 캐시된 데이터로 빠르게 화면에 사용자가 원하는 데이터를 보여줄 수 있다.

데이터 캐싱이 없다면 아래 화면처럼 페이지가 렌더링 될 때마다 데이터를 서버로 부터 가져 오기에 loading 메시지가 반복된다.

React Query라는 라이브러리에서는 데이터 캐싱을 자동으로 지원해주지만, 이번에는 Context API를 사용하여 데이터 캐싱 로직을 직접 구현해보자.

Data Caching 구현

데이터 캐싱 구현에는 몇 가지 주의 사항이 있다.

캐시 일관성 : 캐시된 데이터는 원본 데이터와 동기화 되어야 한다. 즉, 캐시된 데이터가 오래되거나 변경되면, 업데이트 혹은 무효화해야 한다.
메모리 사용 : 캐싱은 추가적인 메모리를 사용하므로, 캐시 크기와 관리 전략에 대한 고려가 필요하다.
캐시 전략 : 어떤 데이터를 캐시에 저장할지, 얼마나 오래 저장할지, 언제 캐시를 무효화 할지 등의 정의가 필요하다.

이번 구현에는 만료 시간을 할당하여 캐시의 유효성을 판단하도록 했다.

1. 캐싱 메니저 함수 생성

캐싱 로직을 관리하는 헬퍼 함수를 생성한다.
이 함수는 캐싱할 데이터와 해당 데이터의 만료 시간을 관리한다.
즉, 캐시된 데이터의 유효성을 검사하고 데이터를 반환한다.

const ONE_MINUTE_MS = 60 * 1000;

const cacheManager = (cacheExpirationDuration: number = ONE_MINUTE_MS * 10) => {
  const cache: Record = {};

  return {
    cacheData: (key: string, data?: any) => {
      if (cache[key]) {
        const { data: cachedData, expireTime } = cache[key];
        if (expireTime > Date.now()) {
          return cachedData;
        }
      }
      cache[key] = { data, expireTime: Date.now() + cacheExpirationDuration };
      return data;
    },
    isDataValid: (key: string) => {
      if (!cache[key]) return false;
      const { expireTime } = cache[key];
      return expireTime > Date.now();
    },
  };
};

export default cacheManager;

ONE_MINUTE_MS : 1분을 밀리초로 표현한 상수.
cacheManager : 캐싱 로직을 관리하는 함수. 캐시 만료 시간은 10분으로 지정.
cacheData와 isDataValid 두 메서드를 포함하는 객체를 반환한다.
외부에서 cacheManager를 통해 캐시된 데이터를 가져오거나 새로운 데이터를 저장하고, 유효성 검사가 가능하다.

캐시를 저장할 객체.
각 키는 문자열이며, 값은 { data: any; expireTime: number } 형태를 가진다.
여기서 data는 캐싱할 데이터를 나타내고, expireTime은 해당 데이터의 만료 시간을 나타낸다.

주어진 키에 해당하는 데이터를 캐시에서 가져오거나 새로운 데이터를 캐시에 저장하는 함수.
주어진 키가 존재하고 만료 시간이 현재 시간보다 미래라면 캐시된 데이터를 반환한다.
주어진 키가 없거나 만료된 경우, 새로운 데이터와 만료 시간을 저장한다.
캐시된 데이터 혹은 새로 캐시된 데이터를 반환한다.

주어진 키의 캐시 데이터의 유효성을 검사하는 함수.
주어진 키에 해당하는 데이터가 캐시에 있고 그 데이터의 만료 시간이 아직 지나지 않았다면 true를 반환한다.
그렇지 않은 경우 false를 반환한다.

2. CacheContext 생성

앱 전체에서 데이터 캐싱을 관리하기 위해 Context API로 CacheContext를 생성한다.

import { createContext, useContext } from 'react';
import cacheManager from '@/helpers/cacheManager';

interface ICacheContext {
  cacheData: (key: string, data?: any) => any;
  isDataValid: (key: string) => boolean;
}

export const CacheContext = createContext({} as ICacheContext);

interface CacheContextProviderProps {
  children: React.ReactNode;
}

export const CacheContextProvider = ({
  children,
}: CacheContextProviderProps) => {
  const { cacheData, isDataValid } = cacheManager();

  return (
    
      {children}
    
  );
};

export const useCacheContext: () => ICacheContext = () =>
  useContext(CacheContext);

cacheManager에서 반환되는 두 메서드를 사용할 수 있는 context를 생성한다.

contextProvider를 사용하여 cacheData, isDataValid를 제공한다.
contextProvider의 하위 컴포넌트들은 cacheData, isDataValid 함수에 접근할 수 있다.

함위 컴포넌트에서 context를 사용할 useContext를 커스텀 훅으로 만들어준다.
각 컴포넌트에서 useContext를 import하고 호출할 필요가 없어진다.
useCacheContext는 CacheContext의 값을 가져와서 반환하는 함수(훅)이다.
이 함수의 반환 값의 타입은 ICacheContext 타입이다.

3. useFetch 훅 작성

데이터 패치와 캐싱 로직을 관리하는 useFetch 훅을 작성한다.

import { useState, useEffect } from 'react';
import { useCacheContext } from '@/contexts/CacheContext';

type Status = 'initial' | 'pending' | 'fulfilled' | 'rejected';

interface UseFetch {
  data?: T;
  status: Status;
  error?: Error;
  cacheKey: string;
}

interface FetchOptions {
  fetchFunction: (...args: any[]) => Promise;
  args: any[];
  cacheKey: string;
}

export const useFetch = ({
  fetchFunction,
  args,
  cacheKey,
}: FetchOptions): UseFetch => {
  const [state, setState] = useState>({
    status: 'initial',
    data: undefined,
    error: undefined,
    cacheKey,
  });

  const { cacheData, isDataValid } = useCacheContext();
  useEffect(() => {
    let ignore = false;

    const fetchData = async () => {
      if (ignore) return;

      setState((state) => ({ ...state, status: 'pending' }));

      try {
        const response = await fetchFunction(...args);

        cacheData(cacheKey, response);
        setState((state) => ({
          ...state,
          status: 'fulfilled',
          data: response,
          cacheKey,
        }));
      } catch (error) {
        setState((state) => ({
          ...state,
          status: 'rejected',
          error: error as Error,
          cacheKey,
        }));
      }
    };

    if (state.status === 'initial') {
      if (isDataValid(cacheKey)) {
        setState((state) => ({
          ...state,
          status: 'fulfilled',
          data: cacheData(cacheKey),
          cacheKey,
        }));
      } else {
        fetchData();
      }
    }

    return () => {
      ignore = true;
    };
  }, [fetchFunction, cacheKey, cacheData, isDataValid, state.status]);

  return state;
};

Status는 데이터 가져오기 상태를 나타내는 문자열 유니언 타입이다.
UseFetch는 useFetch 훅이 반환하는 객체의 타입이다.
FetchOptions는 useFetch 훅에 전달되는 인자의 타입이다.

// 기존 Home 컴포넌트
const { data: characters, status } = useFetch(fetchCharacters, 50);

// 수정된 Home 컴포넌트
export const Home = () => {
  const { data: characters, status } = useFetch({
    fetchFunction: fetchCharacters,
    args: [50],
    cacheKey: ROUTE_PATH.HOME,
  });

useFetch 커스텀훅을 사용하는 컴포넌트에서 useFetch 인자를 객체로 전달하도록 수정.
...rest는 마지막 인자로 전달되어야 하기에 순서를 고려하지 않고 전달하기 위해 수정했다.

함수에 전달되는 모든 인자들을 객체의 속성으로 묶어서 전달하면, 순서에 구애받지 않고 인자들을 함수에 전달할 수 있다.

useFetch 함수에 전달되는 인자 정의.
cacheKey가 추가되었다.

// 수정 전 useFetch 인자 정의
export const useFetch = (
  fetchFunction: (...args: any[]) => Promise,
  ...args: any[]
): UseFetch => {

state와 setState는 useFetch 훅의 내부 상태를 관리한다.
cacheData와 isDataValid 함수는 캐시 컨텍스트에서 가져온다.
이 함수들은 데이터를 캐시에 저장하고, 캐시된 데이터의 유효성을 확인하는데 사용된다.

useEffect를 사용하여 API에서 데이터를 가져온다.

초기 상태(initial) 확인하여 캐시에서 유요한 데이터가 있는지 확인.
유효한 데이터가 있으면 해당 데이터로 상태를 업데이트 한다.
유요한 데이터가 없다면 fetchData 함수를 호출하여 API 데이터를 가져온다.

클린업 함수로 언마운트 됬을 경우 네트워크 요청으로 인한 상태 변경을 방지한다.
useEffect의 의존성 배열을 정의한다.
useFetch 훅은 현재 상태를 반환한다. 이 상태는 데이터 가져오기의 결과 및 상태 정보를 포함한다.

4. 앱 구조 작성 (App)

앱의 최상위 컴포넌트에서 CacheContextProvider를 사용하여 캐싱 관련 함수를 앱 전체에 제공한다.

Data Caching 결과

API로부터 데이터를 받는 동안 화면에 보이면 "Loading..."이 동일 페이지 이동시 보이지 않는다.
한번 가져온 데이터를 메모리에 캐싱하여 동일한 데이터가 필요한 경우 API 요청이 생략되었다.

데이터 캐싱 매니저 함수와 Context API를 사용한 로직을 useFetch 훅에 적용하여 API에서 데이터를 가져오는 기능과 함께 데이터 캐싱 기능이 가능하도록 구현되었다.

React Query를 사용하면 기본으로 제공되는 기능이지만, 기본 원리를 이해하는 것은 라이브러리를 더욱 효율적으로 사용하고 문제가 발생 했을때 디버깅에도 용이하다고 생각한다.

React - React Query(TanStack Query)

Sat, 23 Sep 2023 07:55:14 GMT

React Query

React Query는 웹 애플리케이션에서 서버 데이터를 효율적으로 가져오고, 캐싱하며 동기화하는 데 도움을 주는 라이브러리다.
이 라이브러리의 도움으로 개발자는 서버와의 데이터 동기화, 데이터 리프레시, 오류 처리 등의 복잡한 작업을 훨씬 간결하게 처리할 수 있다.

React Query의 장점

자동 데이터 리프레시 : 사용자에게 항상 최신의 데이터를 제공한다.
백그라운드 데이터 동기화 : 애플리케이션이 백그라운드에서도 데이터를 동기화한다.
오류 처리 : API 호출에서 오류가 발생하면 error 및 isError 상태를 통해 쉽게 처리할 수 있다.
캐싱 : 데이터를 자동으로 캐시하여 반복적인 요청을 피하고 성능을 향상시킨다.

기존 fetch 방식

전통적인 데이터 가져오기 방법은 useState와 useEffect를 사용하여 데이터 상태를 관리하고 API 호출을 수행한다.

// 기존 코드 예시
const Coins = () => {
  const [coins, setCoins] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let isIgnore = false;

    (async () => {
      const response = await fetch('https://api.coinpaprika.com/v1/coins');
      const json = await response.json();

      if (!isIgnore) {
        setCoins(json.slice(0, 100));
        setLoading(false);
      }
    })();

    return () => {
      isIgnore = true;
    };
  }, []);

  // 렌더링 로직
};

React Query 사용

1. 설치

npm i @tanstack/react-query

2. QueryClient, QueryClientProvider 생성

React Query를 사용하려면 먼저 QueryClient를 생성하고 이를 QueryClientProvider에 전달해야 한다.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

3. useQuery 훅으로 fetcher 함수 전달

데이터를 가져오기 위해 useQuery 훅을 사용하고, 데이터 가져오기 함수를 제공한다.

const Coins = () => {
  const { isLoading, data } = useQuery(['allCoins'], fetchCoins);

    /* 아래 코드는 모두 삭제된다. */
  // const [coins, setCoins] = useState([]);
  // const [loading, setLoading] = useState(true);

  // useEffect(() => {
  //   let isIgnore = false;

  //   (async () => {
  //     const response = await fetch('https://api.coinpaprika.com/v1/coins');
  //     const json = await response.json();

  //     if (isIgnore) {
  //       setCoins(json.slice(0, 100));
  //       setLoading(false);
  //     }
  //   })();

  //   return () => {
  //     isIgnore = true;
  //   };
  // }, []);

API 요청 함수는 따로 파일을 분리해서 관리한다.

// api fetcher 파일
export const fetchCoins = () => {
  return fetch('https://api.coinpaprika.com/v1/coins').then((response) =>
    response.json(),
  );
};

4. useQuery 훅 설명

const { isLoading, data } = useQuery(['allCoins'], fetchCoins);

isLoading : 기존에 state로 따로 관리해주던 로딩 불리언 값을 react query에서 반환해준다.
data : fetch후 받아온 데이터를 반환해준다.
[’allCoins’] : Query Key - query를 고유하게 식별해주는 key로 필수 항목이다.
React Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리한다.

5. 렌더링 로직에 적용

import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { fetchCoins } from '@/api/fetcher';
import * as S from './styles';

interface ICoin {
  id: string;
  name: string;
  symbol: string;
  rank: number;
  is_new: boolean;
  is_active: boolean;
  type: string;
}

const Coins = () => {
  const { isLoading, data } = useQuery(['allCoins'], fetchCoins);

  return (
    
      
        Coins
      
      {isLoading ? (
        Loading...
      ) : (
        
          {data?.slice(0, 100).map((coin) => (
            
              
                
                {coin.name}
                →
              
            
          ))}
        
      )}
    
  );
};

export default Coins;

useState와 useEffect로 상태를 관리하고 데이터를 호출하던 로직을 react query를 통해 한번에 해결할 수 있다.
💡 React Query는 데이터를 자동으로 캐싱하므로 동일한 요청을 여러 번 수행할 필요가 없다.

여러 useQuery 사용하기

때로는 하나의 컴포넌트에서 여러 데이터 소스를 동시에 요청해야 할 수 있다.
React Query의 useQuery는 이러한 상황을 간단히 처리할 수 있게 해준다.

Query key 구성

각 쿼리는 고유한 키를 가져야 한다.
이 키를 사용하여 내부적으로 캐싱된 데이터를 관리한다.
복잡한 쿼리의 경우, 쿼리 키를 배열로 구성하여 고유성을 보장할 수 있다.
예를 들어, 특정 코인의 정보와 티커를 동시에 가져오는 경우 다음과 같이 작성할 수 있다.

const { isLoading: infoLoading, data: infoData } = useQuery(
  ['info', coinId],
  () => fetchCoinInfo(coinId.coinId),
);

const { isLoading: tickersLoading, data: tickersData } = useQuery(
  ['tickers', coinId],
  () => fetchCoinTickers(coinId.coinId),
);

위의 코드에서 coinId를 쿼리 키의 일부로 사용하여 각 코인에 대한 정보와 티커 쿼리를 고유하게 식별한다.

여러 쿼리의 상태 관리

두 개 이상의 useQuery를 사용할 때, 각 쿼리의 로딩 상태나 에러 상태를 개별적으로 처리할 수 있다.
예를 들어, 위의 예시에서는 infoLoading과 tickersLoading을 통해 각 쿼리의 로딩 상태를 파악할 수 있다.
필요한 경우, 이러한 상태들을 조합하여 컴포넌트의 전체 로딩 상태를 결정할 수도 있다.

const loading = infoLoading || tickersLoading;

이렇게하면 Coin 컴포넌트의 렌더링 로직에서 loading 변수를 사용하여 전체 로딩 상태를 처리할 수 있다.

React Query Devtools

앞서 React Query는 데이터를 자동으로 캐시하므로 동일한 요청을 여러 번 수행할 필요가 없다고 했다.
React Query Devtools는 캐싱된 쿼리와 관련된 정보를 시각적으로 확인할 수 있게 도와주는 도구다.

React Query Devtools 설치

npm i @tanstack/react-query-devtools

React Query Devtools 적용

import router from './router';
import { RouterProvider } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

import { ThemeProvider } from 'styled-components';
import GlobalStyle from './styles/GlobalStyle';
import theme from '@/styles/theme';

const queryClient = new QueryClient();

function App() {
  return (
    
      
        
        
        
      
    
  );
}

export default App;

애플리케이션에서 캐싱된 데이터를 보여주는 도구가 추가된다.

Devtools는 개발 모드에서만 번들에 포함되므로, 프로덕션 빌드 중에 제외하는 것에 대해 걱정할 필요가 없다.

학습자료

노마드코더-리액트 마스터 TanStack Query 공식문서

React - Error Boundary

Sun, 17 Sep 2023 18:11:19 GMT

웹 앱을 구축하는 것은 복잡한 과정이다. 때때로 문제가 발생하게 되며, 이런 문제를 완전히 막을 수는 없다. 예상치 못한 방식으로 오류가 발생할 것을 예상하고 그에 대응할 준비가 되어 있어야 한다. 이를 위한 Error Boundary를 알아보고 직접 만들어 보자.

Error Boundary 란?

에러에 대한 경계를 의미하는 Error Boundary는 경계 내의 구간에서 에러가 발생하면 그 에러를 잡아내서 처리할 수 있는 역할을 한다. 기본적인 로직은 아래와 같다.

React에서는 특정 컴포넌트 렌더링 도중 에러가 발생하면 해당 컴포넌트 UI를 제거한다.
에러에 대한 준비가 따로 되어 있지 않다면 React에서 제공하는 에러페이지로 넘어간다.
- 실제 환경에서는 아무 페이지도 뜨지 않을 것이다. 사용자는 사라진다..😢
이를 방지하기 위해 컴포넌트를 Error Boundary로 감싸준다.
경계 내의 컴포넌트에서 에러가 발생한다면 준비된 UI를 보여 줄 수 있다.
준비된 UI를 fallback이라 한다.
- 예상치 못한 에러가 발생하면 사용자에게 다시 홈부터 시작하도록 유도할 수 있다.

Error Boundary 생성

공식문서를 살펴보면 Error Boundary는 현재 함수형 컴포넌트로 작성할 수 있는 방법이 없으며 클래스로 예시 코드를 알려주고 있다.

클래스를 직접 작성하기 싫다면 react-error-boundary를 제공해 준다.

클래스 예시 코드를 참고하여 코드를 생성해보자.

import { Component, ErrorInfo, ReactNode } from 'react';

// 에러바운더리를 사용할 때 fallback prop을 제공하지 않으면 사용되는 기본 UI
import { DefaultErrorFallback } from './DefaultErrorFallback';

// 에러바운더리 컴포넌트 props 타입 정의
interface ErrorBoundaryProps {
  children: ReactNode; // 렌더링될 자식 컴포넌트들
  fallback?: ReactNode; // 에러 발생시 보여주는 컴포넌트
}

// 에러바운더리 컴포넌트 state 타입 정의
interface ErrorBoundaryState {
  hasError: boolean; // 에러 발생 여부
  error?: Error; // 에러 객체
}

export class ErrorBoundary extends Component<
  ErrorBoundaryProps,
  ErrorBoundaryState
> {
  // 생성자에서 초기 상태 설정
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: undefined };
  }

  // React의 생명주기 메서드 'getDerivedStateFromError'
  // 하위 컴포넌트에서 에러가 발생하면 호출된다.
  // 에러 객체를 받아서 새로운 상태를 반환한다.
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  // React의 생명주기 메서드 'componentDidCatch'
  // 에러와 에러 정보를 받아서 처리한다.
  // 분석 서비스에 에러를 기록하는 등 추가 작업이 가능하다.
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error(error, errorInfo);
  }

  // 컴포넌트 렌더링
  render() {
    // 에러가 있으면 fallback 렌더링
    if (this.state.hasError && this.state.error) {
      return (
        this.props.fallback || 
      );
    }
    // 에러 없으면 children 렌더링
    return this.props.children;
  }
}

Error Boundary 적용하기

Error Boundary를 적용하고 싶은 컴포넌트를 감싸주면 된다.

전체 페이지에 적용

// Layout
import { Outlet } from 'react-router-dom';
import { ErrorBoundary } from '@/components/ErrorBoundary';

export const Layout = () => {
  return (
    
      
    
  );
};

개별 라우트 내에 적용

// Router
import { createBrowserRouter } from 'react-router-dom';

import { Home } from '@/routes/Home';
import { Detail } from '@/routes/Detail';
import { Layout } from '@/routes/Layout';
import { ROUTE_PATH } from '@/router/routePath';
import { NotFound } from '@/routes/NotFound';
import { ErrorBoundary } from '@/components/ErrorBoundary';

export const router = createBrowserRouter([
  {
    element: ,
    path: ROUTE_PATH.ROOT,
    errorElement: ,
    children: [
      {
        path: ROUTE_PATH.HOME,
        element: ,
      },
      {
        path: ROUTE_PATH.DETAIL,
        element: (
          
            
          
        ),
      },
    ],
  },
]);

Detail 라우트에서만 발생하는 오류를 ErrorBoundary로 캡처한다. Home 라우트에서 발생하는 오류는 캡처되지 않는다.

특정 컴포넌트 내에 적용

// Component
import { ErrorBoundary } from '@/components/ErrorBoundary';

const Detail = () => {
  return (
    
      Detail Page
      
        
      
    
  );
}

Profile 컴포넌트 내에서 발생하는 오류만 ErrorBoundary로 캡처된다.

Error Boundary의 한계

Error Boundary는 비동기 통신 에러는 잡지 못한다

export const Detail = () => {

  // 중략

  // 에러 바운더리 확인을 위한 에러 유도 코드
  useEffect(() => {
    async function test() {
      throw new Error('에러바운더리 테스트');
    }
    test();
  }, []);

  return (
  // 중략
  )

Detail 컴포넌트에서 useEffect를 사용하여 비동기 통신 중 에러가 발생했다.
하지만 Error Boundary의 fallback UI가 아닌 정상적인 화면이 렌더링 된다.

Error Boundary는 렌더링 중 발생한 에러만을 잡는다

Error Boundary는 컴포넌트 트리 내에서 하위 컴포넌트의 렌더링에서 발생하는 에러를 잡는다. 즉, 아래의 경우에는 에러를 포착할 수 없다.

이벤트 핸들러 Error Boundary는 이벤트 핸들러 내에서 발생하는 오류를 포착하지 않는다. 예를 들어, onClick 또는 onChange와 같은 이벤트 핸들러에서 발생하는 오류는 Error Boundary로 잡히지 않는다.
비동기 코드 setTimeout, requestAnimationFrame, 서버 사이드 렌더링 등 비동기 코드에서 발생하는 오류는 Error Boundary에서 포착되지 않는다.
Server Side Rendering (SSR) 서버 사이드 렌더링 중에 발생하는 오류는 Error Boundary에서 잡히지 않는다.
Error Boundary 자체의 오류 Error Boundary 컴포넌트 내부에서 발생하는 오류는 해당 Error Boundary에서 포착되지 않는다. 이러한 오류를 포착하려면 상위 컴포넌트에서 다른 Error Boundary를 사용해야 한다.
외부 라이브러리와 코드 Error Boundary는 React 컴포넌트 트리 내에서 발생하는 오류만 포착한다. 따라서 React 외부에서 발생하는 오류나 외부 라이브러리에서 발생하는 오류는 포착되지 않는다.

Error Boundary의 사용

위 내용들처럼 Error Boundary는 에러에 대한 준비를 가능하게 해줌으로서 애플리케이션의 안정성을 향상 시켜주지만, 한계점이 분명하기에 전체 오류 관리 전략의 일부로서 사용되도록 해야한다.

참고자료

Error Boundary의 적절한 사용

오류 경계를 너무 적게 사용하는 경우 애플리케이션의 상단에 단 하나의 오류 경계만 있으면, 한 부분에서의 오류가 전체 애플리케이션에 영향을 미칠 수 있다.
오류 경계를 과도하게 사용하는 경우 각 컴포넌트마다 오류 경계를 설정하면, 사용자 경험이 혼란스러워질 수 있다. 또한 성능에도 영향을 미칠 수 있다.

Error Boundary의 적절한 위치 찾기

애플리케이션의 기능 경계를 확인하고 그곳에 오류 경계를 배치하는 것이 가장 좋다.

Twitter를 예로 들면, 메인 콘텐츠 섹션은 Home, Trends for you, Who to follow 등 세 가지로 구분된다.

Who to Follow 섹션 내에서도 여러 하위 섹션이 있으며, 각각의 섹션에서 오류가 발생할 경우 다른 섹션에 영향을 주어야 하는지를 고려하여 오류 경계를 설정한다.

Fault Tolerance 테스트

애플리케이션의 오류 허용성을 테스트하는 가장 좋은 방법은 일부러 오류를 발생시켜보는 것이다.

function CreditCardInput(props) {
  // What happens if I messed up here? Let's find out!
  throw new Error("oops, I made a mistake!")
  return 
}

요약

애플리케이션 상단에 단 하나의 오류 경계만 두는 것은 피해야 한다.
오류 경계를 과도하게 사용하는 것도 피해야 한다.
애플리케이션의 기능 경계를 파악하고 그곳에 오류 경계를 배치한다.
"이 컴포넌트가 충돌하면 형제 컴포넌트도 충돌해야 하는가?"라는 질문을 통해 기능 경계를 찾을 수 있다.
오류 상태를 위해 애플리케이션을 의도적으로 설계해야 한다.

React - useFetch

Fri, 15 Sep 2023 18:41:08 GMT

외부 리소스와의 상호 작용 중 외부 API 호출할 때는 useEffect 훅을 사용한다. 이는 컴포넌트가 렌더링 된 후에 외부 데이터를 가져와 컴포넌트의 상태를 업데이트 되도록 해준다.

다만, 여러 컴포넌트에서 동일한 데이터 패치 로직을 사용할 경우 코드 중복이 발생할 수 있다. 이러한 중복을 줄이고 코드의 재사용성과 유지보수성을 높이기 위해 공통로직을 커스텀 훅으로 분리해서 사용할 수 있다.

커스텀 훅

커스텀 훅은 React의 기본 훅을 활용하여 사용자가 만든 재사용 가능한 함수다. 기존 프로젝트에서 반복되는 로직을 따로 함수로 만들어서 사용하던 방식에 React의 기본 훅이 추가되었다고 생각할 수 있다.

훅을 만들기에 이름 앞에는 "use"로 시작한다.
커스텀 훅은 상태 자체를 공유하는 것이 아닌 상태 로직을 공유한다.
커스텀 훅을 사용하는 컴포넌트는 커스텀 훅이 반환해준 결과에만 의존하면 된다.

즉, 데이터를 가져오는 방식은 커스텀 훅에서 고민하고 결과 값을 반환해준다. 컴포넌트에서는 가져온 데이터를 어떻게 보여줄까만 고민하면 된다. 이는 컴포넌트를 보다 더 선언적으로 만들어 준다.

useFetch 커스텀 훅 만들기

1. useEffect 사용하던 컴포넌트

아래 코드는 useEffect를 사용해 외부 데이터를 받아오고 있다.
데이터를 받아오면 컴포넌트 상태를 업데이트 후 화면을 변경한다.

// Home
export const Home = () => {
  const [loading, setLoading] = useState(true);
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    let ignore = false;

    const getCharacters = async () => {
      const data = await fetchCharacters(50);

      if (!ignore) {
        setCharacters(data.results);
        setLoading(false);
      }
    };

    getCharacters();

    return () => {
      ignore = true;
    };
  }, []);

  return (
    // --중략
  );
};

// Detail
export const Detail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [characterDetail, setCharacterDetail] =
    useState();

  useEffect(() => {
    let ignore = false;

    const getCharacterDetail = async () => {
      const data = await fetchCharacterDetail(id);

      if (!ignore) {
        setCharacterDetail(data.results[0]);
        setLoading(false);
      }
    };

    getCharacterDetail();

    return () => {
      ignore = true;
    };
  }, [id]);

  return (
    <>
        // -- 중략
    
  );
};

데이터를 받아오고 컴포넌트를 업데이트하는 작업에는 문제가 없다.
다만, 컴포넌트에서 데이터를 어떻게 가져오는지, 에러 처리는 어떻게 해야할지, 로딩 상태는 어떻게 관리하는지를 관여하고 있다.
또, 두 컴포넌트에서 요청 API만 다를 뿐 같은 로직을 중복 사용하고 있다.

2. useFetch 커스텀 훅을 만들기 전 고려사항

useFetch는 API 호출 함수와 해당 함수에 전달될 인수를 받아야 한다.
useEffect를 사용하여 컴포넌트 마운트 시 데이터를 로드한다.
status, data, error 상태를 관리한다.
API 호출 중에 오류가 발생할 경우를 대비하여 적절한 에러 처리를 고려해야 한다.
컴포넌트가 언마운트될 때 진행 중인 비동기 작업을 취소하거나 무시해서 메모리 누수를 방지 해야한다.

3. useFetch 생성 과정

3-1. 타입을 정의한다

type Status = 'initial' | 'pending' | 'fulfilled' | 'rejected';

interface UseFetch {
  data?: T;
  status: Status;
  error?: Error;
}

Status는 요청의 상태를 나타내며, 초기 상태(initial), 로딩 중(pending), 요청 성공(fulfilled), 요청 실패(rejected) 중 하나의 값을 갖는다.
UseFetch는 useFetch 훅이 반환하는 객체의 타입이다. 여기서 T는 fetch 함수의 반환 타입을 나타낸다.

3-2. useFetch 함수 선언

1️⃣ : fetchFunction: 데이터를 가져오는 함수(API 호출 함수)다. 이 함수는 Promise를 반환해야 한다.
2️⃣ : ...args: fetchFunction에 전달될 인수들이다.
3️⃣ : 함수는 UseFetch 타입의 객체를 반환한다.

3-3. 상태 초기화

const [state, setState] = useState>({
  status: 'initial',
  data: undefined,
  error: undefined
});

초기 상태는 status가 initial이며, data와 error는 정의되지 않은 상태다.

3-4. useEffect를 사용한 데이터 로드

useEffect(() => {
  let ignore = false;

ignore 변수는 컴포넌트가 언마운트된 후에 상태를 변경하려는 시도를 방지한다.

const fetchData = async () => {
  setState({ ...state, status: 'pending' });

  try {
    const data = await fetchFunction(...args);
    if (!ignore) {
      setState({ status: 'fulfilled', data });
    }
  } catch (error) {
    if (!ignore) {
      setState({ status: 'rejected', error });
    }
  }
};

비동기 함수 fetchData를 선언한다.
함수가 호출되면 상태를 pending으로 설정하여 로딩 중임을 나타낸다.
fetchFunction을 호출하여 데이터를 가져온다.
- 성공적으로 데이터를 가져오면 상태를 fulfilled로 설정하고 데이터를 저장한다.
- 오류가 발생하면 상태를 rejected로 설정하고 오류를 저장한다.

fetchData();

return () => {
  ignore = true;
};

useEffect 내에서 fetchData 함수를 호출하여 데이터 로드를 시작한다.
컴포넌트가 언마운트 되면 클린업 함수에서 ignore를 true로 설정하여 비동기 작업이 일어나도 상태가 변경되는 것을 방지한다.

3-5. 상태 반환

return state;

마지막으로 현재 상태를 반환한다. 이 상태에는 data, status, error가 포함된다.

4. useFetch 전체 코드

import { useState, useEffect } from 'react';

type Status = 'initial' | 'pending' | 'fulfilled' | 'rejected';

interface UseFetch {
  data?: T;
  status: Status;
  error?: Error;
}

export const useFetch = (
  // API 호출 함수 그리고 함께 전달될 인수.
  fetchFunction: (...args: any[]) => Promise,
  ...args: any[]
): UseFetch => {
  // useFetch에서 관리하는 상태 -> 최종 반환값이 된다.
  const [state, setState] = useState>({
    status: 'initial',
    data: undefined,
    error: undefined,
  });

  // useEffect를 통해 데이터를 가져온다.
  useEffect(() => {
    // 컴포넌트가 언마운트 되면 비동기 작업으로 인한 상태 변경 방지.
    let ignore = false;

    const fetchData = async () => {
      // 비동기 함수 fetchData()를 실행하면 "로딩중"이 된다.
      setState({ ...state, status: 'pending' });

      // 요청 API(fetchFunction)를 실행한다.
      try {
        // 요청 API 인수에 함께 전달받았던 "...args"를 준다.
        const data = await fetchFunction(...args);
        if (!ignore) {
          // 성공하면 상태를 'fulfilled로 변경하고 데이터를 저장한다.
          setState({ status: 'fulfilled', data });
        }
      } catch (error) {
        if (!ignore) {
          // 실패하면 상태를 'rejected'로 변경하고 오류를 저장한다.
          setState({ status: 'rejected', error: error as Error });
        }
      }
    };

    fetchData();

    return () => {
      ignore = true;
    };
  }, [fetchFunction]);

  return state;
};

5.useFetch를 사용하는 컴포넌트

// Home
export const Home = () => {
  const { data: characters, status } = useFetch(fetchCharacters, 50);
  const charactersList = characters?.results;

  return (
        // -- 중략
  );
};

// Details
export const Detail = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const { data: characterDetail, status } = useFetch(fetchCharacterDetail, id);
  const detailsInfo = characterDetail?.results[0];

  const handleBackPage = () => {
    navigate(-1);
  };

  return (
    <>
      // -- 중략
    
  );
};

두 컴포넌트에서 중복으로 사용되던 데이터 패치 로직이 생략되었다.
데이터 패치 관련 로직은 useFetch에서만 관리하면 된다.
각 컴포넌트는 데이터를 가져오고 어떻게 보여줄지만 고려하면 된다.

데이터를 받아오는 과정, 과정 중의 상태, 에러 여부는 컴포넌트가 고려하지 않아도 된다. 컴포넌트는 받아온 결과 값과 상태만을 고려해서 화면을 보여주면 된다.

React - 클린업으로 엄격모드 로그인 문제 해결하기

Fri, 01 Sep 2023 16:10:45 GMT

소셜 로그인으로 구현한 로그인 로직에서 동일한 사용자로 로그인을 시도했음에도 로그인이 잘되는 경우와 에러가 발생하는 경우가 발생했다. 성공이면 성공, 에러면 에러가 나와야 하는데, 잘 되기도 하고 안되기도 하고 개발 입장에서는 원인을 파악하기 어려운 상황이었다. 다행히 그 원인을 리액트 공식문서 학습에서 엄격 모드 때문임을 알게 되었다.

😢 문제 상황

동일한 사용자로 로그인을 시도하면 성공하는 경우도 있고 실패하는 경우도 발생

👀 문제 파악하기

개발자 도구 네트워크를 확인하니 로그인 요청이 두 번 발생하고 있다.

요청이 두 번 발생하기에 잘못된 인증코드가 서버로 가는 경우가 발생
엄격모드는 컴포넌트의 부수효과를 두 번 호출한다.
이는 상용 환경에서는 발생하지 않는 문제이지만, 엄격모드를 제거한다면 개발 단계에서 잠재적 문제를 발견하기 어렵다.
useEffect에 클립업 함수를 추가해서 두 번째 요청을 무시하도록 해야한다.

💡 문제 해결

로그인 로직 점검

1. 사용자에게 GitHub 로그인을 제안

웹에서 "GitHub으로 로그인" 버큰 제공
사용자 로그인 버튼 클릭

2. 사용자를 GitHub 인증 페이지로 리다이렉트

GitHub의 OAuth 인증 페이지로 리다이렉트

3. 사용자 인증 및 권한 부여

사용자는 GitHub에 로그인하고 애플리케이션에 필요한 권한 부여

4. GitHub에서 웹으로 리다이렉트

인증 및 권한 부여가 성공하면 GitHub는 사용자를 웹으로 다시 리다이렉트
인증 코드(AUTHORIZATION_CODE)가 URL의 쿼리 파라미터로 전달

5. 서버로 AUTHORIZATION_CODE와 함께 로그인 요청

리다이렉트 되면서 클라이언트에서 서버측으로 AUTHORIZATION_CODE 코드와 함께 로그인 요청
서버는 AUTHORIZATION_CODE코드와 "client_secret"을 함께 GitHub OAuth 서버로 전송하여 액세스 토큰 획득

6. 액세스 토큰을 이용하여 사용자 정보 조회

서버는 액세스 토큰을 이용하여 GitHub API를 통해 사용자 정보를 가져온다
사용자 정보가 "신규" 회원인지 "기존회원" 인지 서버에서 판단하고 클라이언트에게 응답

7. 서버 응답으로 회원가입 or 로그인 진행

서버로 부터 "응답"과 함께 JWT을 받는다
응답이 "신규" 이면 JWT로 회원가입 진행
응답이 "기존회원" 결과를 받으면 JWT로 로그인 진행

5번, 서버로 로그인 요청에서 디버깅

const Callback = () => {
  const searchParams = new URLSearchParams(window.location.search);
  const code = searchParams.get(AUTHORIZATION_CODE);
  const { data } = useAsync(() => postLogin(code));
  const { handleLogin } = useAuthContext();
  const navigate = useNavigate();

  useEffect(() => {
    if (data?.status === 'FORBIDDEN') {
      const { nickname, profileUrl, oauthId } = data.data;
      navigate(
        `${REGISTER}?nickname=${nickname}&profileUrl=${profileUrl}&oauthId=${oauthId}`,
      );
    }

    if (data?.status === 'OK') {
      const { jwt } = data.data;
      handleLogin(jwt);
      navigate(HOME);
    }
  }, [data]);

  return (
  // 중략

const { data } = useAsync(() => postLogin(code))이 원인으로 판단

function useAsync(
 // 중략 

  const fetchData = async (): Promise => {
    dispatch({ type: 'LOADING' });
    try {
      const response: AxiosResponse = await callback();
      dispatch({ type: 'SUCCESS', data: response.data });
    } catch (e) {
      dispatch({ type: 'ERROR', error: e as AxiosError });
    }
  };

  useEffect(() => {
    if (skip) return;
    fetchData();
  }, deps);


// 중략
}

두 번째 로그인 요청에서는 fetchData()가 호출되지 않도록 클립업함수를 추가한다.

  let ignore = false;

  useEffect(() => {
    if (skip) return;

    if (!ignore) {
      fetchData();
    }
    return () => {
      ignore = true;
    };
  }, deps);

fetchData()는 ignore이 false 인 경우(첫 요청)에만 호출된다.
엄격모드로 useEffect가 재실행될 때는 ignore이 true가 되어 두 번째 fetchData()호출을 방지한다.

엄격모드 활성화 환경에서도 한 번의 요청만 처리되도록 수정하여 문제 해결

🧐 느낀점

계속해서 Effect의 좋은 점만을 생각하면서 사용을 해온 것 같다. 리액트 학습과 프로젝트 진행을 병행해 가면서 Effect 사용의 조심성이 계속 커지고 있다. 데이터 Fetch에서 특히 많이 사용하고 있는데, 이미 발생한 네트워크 요청은 실행 취소가 안되니, 클린업 함수에 대한 이해와 필요성을 많이 고민해 봐야겠다.

React - 상태 업데이트와 리렌더링 과정

Wed, 30 Aug 2023 06:56:51 GMT

React에서 상태가 변경되면 다시 렌더링 해준다는 개념으로 useState를 사용해왔다. 하지만 사용중에 원하던 상태값이 아직 반영되지 않았거나 상태가 변경되어도 렌더링이 되지 않는 등의 문제를 접할 수 있었다.

"상태가 변하면 리렌더링"으로만 이해하지 말고 상태 업데이트로 인해 React에서는 어떠한 과정이 일어나는지 조금 더 깊게 이해해보자.

🔍 상태 업데이트와 리렌더링 과정

1. 사용자에 의해 이벤트 발생

사용자가 버튼을 클릭하거나 입력을 하는 등의 이벤트가 발생한다.

2. 이벤트 핸들러 함수 실행

해당 이벤트에 대한 핸들러 함수가 실행된다. 예를 들어 버튼 클릭에 대한 handleClick 함수가 있다.

3. 이벤트 핸들러 안에서 useState의 setter 함수 실행

이벤트 핸들러 함수 내에서 useState의 setter 함수(ex:setAge)가 호출된다.
이 함수 호출로 인해 React는 상태 변경을 예약한다.
실제로 상태는 바로 업데이트 되지 않고 예약 된다. (setter 함수가 스택에 쌓이는 개념과 비슷하다.)
상태 변경을 일괄적으로 처리하기 위해서 예약을 한다.
예약된 setter 함수들은 이벤트 루프가 완료될 때까지 대기한다.

4. 일괄 처리 (Batching)

일괄 처리에서 대기 중인 setter 함수가 모두 처리된다.
setter 함수가 직접적인 상태 할당인 경우 상태에 새로운 값을 직접 제공한다.
setter 함수가 업데이터 함수인 경우 이전 상태를 기반으로 새로운 상태를 계산한다.
이렇게 일괄 처리로 변경된 상태들이 최종 상태가 결정된다.
일괄 처리 덕분에 여러 상태값이 변경되어도 렌더링은 한번만 일어난다.
React는 여러 상태 업데이트를 일괄 처리하는 방식을 사용하여 효율을 높인다.
아직 최종 상태 값이 반환된 것은 아니다.

5. 리렌더링 (컴포넌트 함수 실행)

일괄 처리에서의 최종상태가 기존 상태와 동일하다면 리렌더링은 생략된다.
상태가 변경되었다고 판단되면 React는 컴포넌트를 리렌더링 한다.
이 과정에서 useState는 최신 상태를 반환하고 변수에 할당한다.

6. JSX 스냅샷 (Virtual DOM 생성)

리렌더링이 일어나면 새로운 JSX 구조가 생성된다.
리액트는 새로운 JSX 구조를 스냅샷으로 저장한다.
이것은 Virtual DOM의 형태로 메모리 상에 존재한다.

7. React가 JSX를 실제 DOM에 반영

React는 이전 상태의 Virtual DOM과 새로운 Virtual DOM을 비교하여 (Diffing 알고리즘), 실제 DOM에 반영할 변경 사항을 결정한다.
즉, 변경이 필요한 DOM만이 업데이트 된다.

실제 코드로 리렌더링 과정을 알아보기

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    
      
      {count}
    
  );
}

button을 클릭하면 이벤트가 실행 setCount로 상태 업데이트 예약
이벤트 루프가 종료되면 상태 업데이트 일괄처리
count + 1 로 최종상태 결정
이전 상태값과 다르기에 리렌더링 실행
count + 1 최종상태 값 반환
새로운 JSX 스냅샷 저장
이전 JSX 스냅샷과 새로운 JSX 스냅샷 비교
태그 내부의 텍스트가 변경되므로, 실제
DOM 변경

이 과정을 통해 React는 효율적으로 UI를 업데이트하며, 개발자에게 선언적인 프로그래밍 방식을 가능하게 한다.

⛔️ useState 사용에 주의사항

set 함수는 다음 렌더링에 대한 state 변수만 업데이트 한다.
set 함수를 호출한 후에도 렌더링 과정에서 state 변수에는 변경 전 값이 담겨져 있다.
set 함수로 호출한 값이 이전 값과 같다면 리렌더링 하지 않는다.
React는 state 업데이트를 일괄 처리한다. 모든 이벤트 핸들러가 실행되고 set 함수를 호출한 후에 화면을 업데이트 한다.
DOM에 접근하기 위해 React가 화면을 일찍 업데이트하도록 강제해야 하는 경우 flushSync를 사용한다.
React는 렌더링 도중 set 함수를 만나면 렌더링 중인 내용을 버리고 새로운 state로 다시 렌더링을 시도한다.

📝 예제로 이해하는 useState

이전 state를 기반으로 state 업데이트하기 (업데이터 함수)

const [age, setAge] = useState(40);

const handleClick = () => {
  setAge(age + 1);
  setAge(age + 1);
  setAge(age + 1);
};

위 예제 처럼 설정자 함수로 이전 state를 기반으로 state 값을 업데이트 할 수 있다.
하지만 결과는 43이 아닌 41로 나온다.

렌더링 중 state age값은 업데이트 되지 않기 때문이다.

업데이트 된 state를 렌더링 중에 사용하고 싶다면 설정자 함수에 업데이터 함수를 전달해야 한다.

function handleClick() {
  setAge((a) => a + 1); // setAge(40 => 41)
  setAge((a) => a + 1); // setAge(41 => 42)
  setAge((a) => a + 1); // setAge(42 => 43)
}

a => a + 1 은 업데이터 함수다.
업테이터 함수는 대기 중인 state를 가져와서 다음 state를 계산한다.

a => a + 1은 대기 중인 state로 40를 받고 다음 state로 41을 반환한다.
a => a + 1은 대기 중인 state로 41을 받고 다음 state로 42를 반환한다.
a => a + 1은 대기 중인 state로 42를 받고 다음 state로 43를 반환한다.
대기 중인 다른 업데이트가 없으므로, React는 결국 43을 현재 state로 저장한다.

설정하려는 state가 이전 state에서 계산되는 경우 업데이터 함수를 전달하자.

❓ 만약 어떤 state가 다른 state 변수의 이전 state로부터 계산된다면?
💡 이를 하나의 객체로 결합하고 reducer를 사용하는 것이 좋다.

이전 렌더링에서 얻은 정보 저장하기

보통 이벤트 핸들러에서 state를 업데이트 한다.
드물게 렌더링된 값을 기반으로 state를 조정해야 하는 경우가 있다. ❓

import { useState } from "react";

export default function CountLabel({ count }) {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState(null);
  if (prevCount !== count) {
    setPrevCount(count);
    setTrend(count > prevCount ? "increasing" : "decreasing");
  }
  return (
    <>
      {count}
      {trend && The count is {trend}}
    
  );
}

count는 props로 전달 받은 값이다.
trend는 count의 값이 증가했는지 감소했는지 알고 싶다. ❗️
trend는 count의 렌더링 결과 값(렌더링된 값)을 가지고 판단해야한다.

일반적인 패턴은 아니지만 useEffect를 사용하는 것 보다 효율적이다. (두 번 렌더링 방지)

JS - 브라우저 렌더링 과정

Mon, 28 Aug 2023 08:23:54 GMT

대부분의 프로그래밍 언어는 운영체제나 가성머신 위에서 실행된다.
하지만 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다.

브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다.

브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 알아보자.

파싱(parsing)
: 파싱은 구문분석이라 하며, 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고,
토큰에 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 과정이다. 생성된 파스 트리를 기반으로 바이트 코드를 생성하고 실행한다.
렌더링(rendering)
: 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.

브라우저의 렌더링 과정

브라우저는 렌더링에 필요한 HTML, CSS, JS, Image 등의 리소스를 서버에 요청하고 응답 받는다.
브라우저 렌더링 엔진은 서버로 부터 받은 HTML, CSS를 파싱하고(DOM, CSSOM) 결합하여 렌더 트리를 만든다.
브라우저 자바스크립트 엔진은 응답된 JS를 파싱하여 AST를 생성하고 바이트코드로 변환하여 실행한다.
이때 JS는 DOM API를 통해 DOM, CSSOM을 변경할 수 있다. 변경된 DOM, CSSOM은 다시 렌더 트리로 결합된다.
위 과정에서 생성된 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 페인팅 한다.

브라우저의 핵심 기능
: 브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, JS, img, font 등의 정적 파일 또는 서버가 동적으로 생성한 데이터)를 
서버에 요청하고 응답 받아 브라우저에 시각적으로 렌더링 하는 것이다.

1. 요청과 응답

리소스를 받기위해 브라우저는 서버에 어떻게 요청을 할까?
우리가 특정 웹사이트에 접속을 할때 사용하는 주소창과 주소를 통해 브라우저는 서버에 요청을 한다.

주소창에 주소(URL)을 입력하면 URL의 호스트(Domain) 이름이 DNS를 통해 IP 주소로 변환되고 이 IP 주소를 갖는 서버에 요청을 전송한다.

IP : 인터넷상에서 내 컴퓨터 위치를 나타낼 수 있는 통신 규칙 (숫자 주소 형태)
호스트(Domain) : 사용자가 기억하기 쉽도록 IP를 문자로 바꾼 것
프로토콜 : 컴퓨터들 간 정보를 주고 받는 방법을 정리한 하나의 규칙 (ex.HTTP)
DNS : 도메인 네임 시스템으로 인터넷의 주소록. 기억하기 어려운 IP 대신 사용하는 도메인 이름을 IP 주소로 변환해주는 역할을 한다.

1-1. HTTP 1.1과 HTTP 2.0

HTTP(HyperText Transfer Protocol)는 웹에서 브라우저와 서버가 통신하기 위한 프로토톨(규약)이다.
1991년 팀 버너스 리에 의해서 최초로 문서화 되었다.
1996년 HTTP/1.0 발표
1999년 HTTP/1.1 발표
2015년 HTTP/2 발표

HTTP/1.1

커넥션(connection)당 하나의 요청과 응답만 처리한다.
여래 개의 요청을 한번에 전송할수 없고 응답 또한 마찬가지다.
즉, HTML 내의 리소스 요청(link 태그)이 개별적으로 전송되고 응답 또한 개별적으로 전송된다.

HTTP/2

커넥션(connection)당 여러 개의 요청과 응답이 가능하다.
HTTP/1.1과는 다르게 다중 요청/응답이 가능하다.
여러 리소스의 동시 전송이 가능하므로 HTTP/1.1에 비해 페이지 로드 속도가 약 50% 빠르다.

2. HTML 파싱과 DOM 생성

앞서 url을 통해 브라우저가 서버에 요청을 보내면 응답으로 리소스가 온다.
리소스중 HTML 문서는 문자열로 이루어진 순수한 텍스트다.

❗️ 순수한 텍스트인 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링 하려면 
브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야 한다.

✅ 브라우저 렌더링 엔진의 DOM 생성

브라우저의 렌더링 엔진이 HTML 문서를 브라우저가 이해할 수 있는 자료구조인 DOM으로 만들어준다.

브라우저가 HTML 파일을 서버에 요청한다.
서버는 브라우저가 요청한 HTML 파일을 읽어 들여 메모리에 저장한 다음 메모리에 저장된 바이트(2진수)를 인터넷을 통해 응답한다.
브라우저는 서버가 응답한 HTML 문서를 바이트(2진수) 형태로 응답 받는다.
응답된 바이트 형태의 HTML 문서는 meta 태그의 charset 속성에서 지정된 인코딩 방식 기준으로 문자열된다. (UTF-8)
인코딩 방식은 content-type : text/html; charset-utf-8과 같이 응답 헤더에 담겨 응답된다.
브라우저는 응답 헤더를 확인하고 문자열로 변환한다.
문자열로 변환된 HTML 문서를 문법적 의미를 갖는 코도의 최소 단위인 토큰들로 분해한다.
각 토큰들을 객체로 변환하여 노드들을 생성한다. 노드는 DOM을 구성하는 기본 요소다.
HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩 관계를 갖는다.
중접관계란 HTML 요소안에 다른 HTML 요소가 존재함을 말한다. (부모 자식 관계)
모든 HTML 요소 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이를 DOM이라 부른다.

DOM (Document Object Model) 문서 객체 모델은 HTML 문서를 파싱한 결과물이다.

3. CSS 파싱과 CSSOM 생성

브라우저 렌더링 엔진은 HTML을 순차적으로 파싱하여 DOM을 생성해 나간다.
이 과정 중 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중지한다.

✅ 브라우저 렌더링 엔진의 CSSOM 생성

DOM을 만들어간다.
link, style 태그를 만난다.
link 태그의 href 속성을 통해 지정된 CSS 파일을 서버에 요청한다.
서버로 부터 응답받은 CSS 파일이나 style 내의 CSS를 HTML과 동일한 파싱 과정으로 CSSOM을 생성한다.
CSS 파싱이 완료되면 중지된 DOM 생성을 이어나간다.

4. 렌더 트리 생성

브라우저 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 위 과정을 거쳐 DOM과 CSSOM을 생성한다.
이 두 DOM과 CSSOM을 렌더링을 위해 렌터 트리로 결합된다.

렌더 트리는 렌더링을 위한 트리 구조의 자료구조다.
브라우저 화면에 렌더링 되지 않는 노드(meta, script태드 등)와 CSS에 의해 비표시(disply:none)되는 노드들은 제외된다.
즉, 렌더 트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.

완성된 렌더 트리는 각 HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용된다. (layout)
계산 후에는 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다. (paint)

렌더링의 반복 실행 (리플로우, 리페인팅)

페인팅까지의 렌더링 과정은 반복해서 실행될 수 있다.
DOM, CCSOM이 변경되면 다시 렌더 트리로 결합되고 레이아웃과 페인트 과정이 다시 일어난다. 이를 리플로우라 한다.
레이아웃에 영향이 없는 변경을 페인트만 일어난다. 이를 리페인트라 한다.

리플로우가 일어나는 경우

자바스크립트에 의한 노드 추가 또는 삭제
브라우저 창의 리사이징에 의한 뷰포트 크기 변경
HTML 요소의 레이아웃에 변경을 발생시키는 width, margin 등의 스타일 변경

리페인트가 일어나는 경우

레이아웃을 제외한 스타일 변경
color, border-radius 등

CSS 스타일이 렌더링에 미치는 리스트

레이아웃 계산과 페인팅을 다시 실행하는 리렌더링을 비용이 많이 발생하여 성능에 영향을 주는 요인이다.
가급적 리렌더링이 빈번하게 발생하지 않도록 주의할 필요가 있다.

왜 "left"가 아닌 "translateX"를 사용할까?

💡 리렌더링이란?
"리렌더링" 이라는 용어는 리플로우와 리페인팅 두 단계를 합쳐서 부르는 용어다.
즉, 브라우저가 화면에 반영해야할 변경 사항을 다시 계산하고 다시 페인팅하는 과정을 말한다.

DOM과 CSSOM이 다시 생성되는 것을 리렌더링이라고 부르기 보단 DOM과 CSSOM의 재구성이라고 말하는 것이 맞다.
다만, DOM과 CSSOM이 재구성되면 리플로우, 리페인팅도 일어나기에 통칭해서 리렌더링이라 부르는 경우가 많다.

5. 자바스크립트 파싱과 실행

HTML 문서를 파싱한 결과물로서 생성된 DOM은 HTML 문서의 구조와 정보를 가진다.
또한, HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스인 DOM API를 제공한다.
자바스크립트 코드는 DOM API를 사용하여 생성된 DOM을 동적으로 조작할 수 있다.

✅ 브라우저 렌더링 엔진의 JS 실행

브라우저 렌더링 엔진은 DOM을 생성해나간다.
생성 중 JS 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중지 한다.
script 태그 src 속성의 JS 파일을 서버에 요청한다.
응답된 JS 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘겨준다.
JS 코드 파싱과 실행이 종료되면 브라우저 렌더링 엔진으로 제어권이 돌아온다.
중단된 DOM 생성을 이어나간다.

자바스크립트 파싱과 실행은 브라우저 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다.

자바스크립트 엔진

자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행하는 역할을 한다.
자바스크립트 엔진으로는 구글 크롬, Node.js의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore등이 있으며 모두 ECMAscript 사양을 준수한다.
자바스크립트 엔진은 자바스크립트를 해석하여 AST(추상적 구문 트리)를 생성한다.
AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트코드를 생성하여 실행한다.

인터프리터

인터프리터는 프로그래밍 언어의 실행 모델 중 하나로, 소스 코드나 중간 코드를 한 줄씩 읽으면서 즉시 실행하는 방식의 프로그램 또는 환경을 의미한다. 이는 컴파일러와 대비되는 개념으로, 컴파일러는 전체 소스 코드를 미리 기계어로 번역한 후 실행하는 반면, 인터프리터는 코드를 미리 번역하지 않고 실행 시점에 해석하며 실행한다.

소스 코드의 해석과 실행 과정을 최적화하고 효율화하는 데 도움을 준다.

토크나이징

단순한 문자열인 자바스크립트 소스코드를 어휘분석하여 문법적 의미를 갖는 최소 단위인 토큰으로 분해한다.

파싱

토큰들의 집합을 구문분석하여 AST를 생성한다.
AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조다.

바이트코드 생성과 실행

파싱의 결과물인 AST는 인터프리터가 실행할 수 있는 중간 코드인 바이트코드로 반환되고 실행된다.
V8 엔진의 경우 자주 사용되는 코드는 터보팬이라 불리는 컴퍼일러에 의해 최적화된 머신 코드로 컴파일되어 성능을 최적화 한다.

6. 자바스크립트 파싱에 의한 HTML 파싱 중단

브라우저 렌더링 엔진과 자바스크립트 엔진은 병렬이 아닌 직렬적으로 파싱을 수행한다.
즉, 브라우저는 동기적으로 위에서 아래 순서대로 HTML, CSS, JS를 파싱하고 실행한다.
때문에, link와 script 태그의 위치에 영향을 받는다.
특히 DOM API를 사용하는 JS코드는 DOM이 생성되기전에 실행되면 문제가를 발생시킨다.



  
    
    
    
  
  
    
      Apple
      Banana
      Orange

script(JS 코드)를 body 요소 가장 아래에 두는 이유다.

7. script 태그의 async/defer 어트리뷰트

자바스크립트 파싱에 의한 DOM 생성 중단 문제를 해결하기 위해 HTML5부터 script 태그에 async와 defer 속성이 추가되었다.

async와 defer 속성을 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.

자바스크립트 파일의 로드가 동시에 진행된다는 점을 주의해야 한다.

async

HTML 파싱과 외부 자바스크립트 파일의 로드가 동시에 진행된다.
자바스크립트 파싱과 실행은 자바스크립트 파일 로드가 완료된 직후 진행되며, HTML 파싱은 중단된다.
여러개의 script가 존재한다면 로드가 완료된 자바스크립트부터 실행된다.
즉, 실행 순서를 보장되지 않는다.

defer

HTML 파싱과 외부 자바스크립트 파일의 로드가 동시에 진행된다.
자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후, DOM 생성 직후 진행된다.
DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다.

어떤 방식이 더 좋다는 구별은 없다.
상황에 따라 사용하며 보통 DOM 전체가 필요한 스크립트나 실행순서가 중요하면 defer.
방문자 수 카운터나 광고 관련 스크립트 같이 독집적인 스크립트 혹은 순서가 중요하지 않으면 async를 사용한다.

React - 불필요한 Effect 제거하기 part.2

Fri, 25 Aug 2023 04:36:14 GMT

Effect의 의존성 배열에 객체를 사용하면 생기는 문제점을 이해하고 내 코드를 수정해보자.

참고자료 리액트 공식문서
의존성 배열에 객체, 배열 사용하면 생기는 문제점

반응형 값으로 객체, 배열을 사용한 경우 변경된 값이 없어도 Effect가 실행될 수 있다.

import { useState, useEffect } from "react";
import { createConnection } from "./chat.js";

const serverUrl = "https://localhost:1234";

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState("");

  const options = {
    serverUrl: serverUrl,
    roomId: roomId,
  };

  useEffect(() => {
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [options]);

  return (
    <>
      Welcome to the {roomId} room!
       setMessage(e.target.value)} />
    
  );
}

export default function App() {
  const [roomId, setRoomId] = useState("general");
  return (
    <>
      
        Choose the chat room:{" "}
        
      
      
      
    
  );
}

위 예제에서 roomId가 변경되면 options가 변경되고 Effect가 일어난다 (연결).
문제는 의존성 배열로 options 객체가 사용되었다.
이 예제는 setMessage로 메시지만 변경되어도 Effect가 실행된다.
사용자의 의도와는 다른 불필요한 Effect가 발생하게 된다.

문제원인

자바스크립트의 객체는 평가될 때마다 새로운 객체를 생성한다.

즉, 두 객체가 동일한 값을 가지로 있더라도 다른 메모리제 저장된 별개의 객체다.

var person1 = {
  name: 'Lee'
};

var person2 = {
  name: 'Lee'
};

console.log(person1 === person2); // false

때문에 roomId가 변경되지 않아도 자바스크립트는 새로운 객체(options)로 판단하고 Effect를 실행하기 때문에 생기는 문제다.

해결방법 : 객체에서 원시 값 읽기

별개의 객체라도 프로퍼티가 가리키는 원시값을 비교 평가 할 수 있다.

// 프로퍼티 값을 참조하는 person1.name과 person2.name은 값으로 평가될 수 있는 표현식이다.
// 두 표현식 모두 원시 값 'Lee'로 평가된다.
console.log(person1.name === person2.name); // true

Effect 외부의 객체에서 비교할 원시값을 읽고 동일한 값을 가진 객체인지 판단할 수 있다.

function ChatRoom({ options }) {
  const [message, setMessage] = useState('');

  const { roomId, serverUrl } = options;
  useEffect(() => {
    const connection = createConnection({
      roomId: roomId,
      serverUrl: serverUrl
    });
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
  // ...

Effect 외부의 객체에서 정보를 읽어서 객체 의존성을 피한다.
Effect 외부의 객체에서 비교 대상값을 읽고 Effect 내부에 동일한 값을 가진 객체를 만든다.
이 경우 Effect가 어떤 정보에 의존하는지 명확하게 알 수 있다.

내 코드에 적용하기

잘못된 사용

  useEffect(() => {
    const postObjectToStore = { ...postObject };
    localStorage.setItem('postObject', JSON.stringify(postObjectToStore));
    console.log('변경사항 렌더링 체크');
  }, [postObject]);

postObject 객체를 로컬스토리지에 저장하는데 useEffect를 사용
로컬스토리지 저장에는 문제가 없지만, 의존성 배열에 postObject를 사용

변경내용이 없는 postObject의 경우에도 Effect가 실행되고 있다.

postObject가 아닌 변경에도 Effect가 실행될 수 있다.

수정 내용

  const { title, price, content, categoryId, locationId, files } = postObject;

  useEffect(() => {
    const postObjectToStore = {
      title,
      price,
      content,
      categoryId,
      locationId,
      files,
    };
    localStorage.setItem('postObject', JSON.stringify(postObjectToStore));
    console.log('렌더링 체크');
  }, [title, price, content, categoryId, locationId, files]);

의존성 배열에서 객체를 제거한다.
Effect 외부에서 객체의 원시값을 읽어준다.
Effect 의존성 배열에서 원시값을 비교한다.

동일한 값을 가진 객체인 경우 Effect가 일어나지 않는다.

느낀점

자바스크립트 객체의 특성을 알고 있고 자바스크립트로 구현할때는 조심하려고 신경 썻던 부분을 리액트에서는 안일하게 생각하고 있었던 것 같다. 그래서 더욱 글로 남겨두고 싶었다. 리액트는 자바스크립트의 특징과 문법을 활용한 점을 잊지말자.

React - 불필요한 Effect 제거하기 part.1

Fri, 18 Aug 2023 16:55:32 GMT

리액트 공식문서를 학습하면서 나는 너무나 잘못된 Effect를 사용하고 있음을 알게 되었다.

렌더링 후 이미 존재하는 데이터가 있다면 값으로 불러오기 위해 Effect를 사용하고 있었다.

잘못된 사용

inputForm (부모 - postObject 상태 관리)
- title (props : postObject)
- price (props : postObject)
- content (props : postObject)
- categoryId (props : postObject)
- locationId (props : postObject)
- files (props : postObject)

자식들에서 입력된 값들이 부모 postObject에 모인다.
부모에서 postObject를 POST 요청을 보낸다.
여기서 사용자 데이터를 보존하기 위해 localStorage를 사용
POST 요청 전에 postObject 내용을 localStorage에 저장
사용자가 POST 요청 없이 페이지를 이동
다시 POST 요청 페이지로 돌아왔을 로컬스토리지에 보존된 데이터를 초기값으로 할당
각 자식 컴포넌트들에서는 초기 렌더링 이후 상태값이 존재한다면 다시 렌더링 되도록 Effect 사용

const { postObject, setPostObject } = useContext(postSalesItemContext);
const [inputComment, setInputComment] = useState(null);

  useEffect(() => {
    if (postObject.content) {
      const storedContent = postObject.content;
      setInputComment(storedContent);
    }
  }, []);

사용자 입력으로 postObject가 변경되면 부모 컴포넌트로 부터 변경된 props가 전달되면서 렌더링이 일어난다. (1번)
렌더링 후 useEffect가 호출되면서 렌더링이 일어난다. (2번)
보존 데이터를 업데이트 하기 위한 용도로 useEffect를 사용한 문제다.

잘못된 Effect 사용으로 불필요한 렌더링이 한 번 더 일어나고 있다.

수정 내용

렌더링을 위해 데이터를 변환하는 경우 Effect는 필요하지 않다.

부모 컴포넌트에서 localStorage 값을 postObject 초기값으로 가져온다.

// 페이지 이동 후 localStorage 값이 존재한다면 가져온다.
  const [postObject, setPostObject] = useState(
    storedPostObject ? JSON.parse(storedPostObject) : initialPostObject,
  );

부모 컴포넌트로부터 전달 받은 props를 자식 컴포넌트 초기값으로 설정한다.

  const [inputComment, setInputComment] = useState(
    postObject.content ? postObject.content : null,
  );

자식 컴포넌트의 모든 Effect를 제거.

부모 컴포넌트에서 localStorage에 값을 보존하기 위한 Effect 하나를 제외하고 모든 Effect를 제거 할 수 있었다.

두 번씩 일어나던 렌더링도 해결되었다.

수정 내용을 간단한 측정이지만 테스트해보니 사용자가 체감하기에는 미비한 수치지만 개선되었음을 확인할 수 있다.

느낀점

불필요한 useEffect의 사용은 성능 문제, 유지 보수의 어려움, 가독성 저하 등 웹 프로그래밍에 치명적임을 알게 되었다. 특히 스스로가 너무 무지성으로 Effect를 사용하고 있었음에 충격을 받았다. 리액트 공식문서의 Effect 파트를 반복해서 읽고, 불필요한 Effect를 사용하고 있는 것은 아닐까? 라는 고민을 항상 하도록 하자.