인터넷 사용 시 기기마다 화면 크기가 상이함. 컴퓨터는 화면이 크고 휴대폰은 작음. 반응형 디자인은 이러한 다양한 기기 환경에 맞춰 화면 레이아웃이 자동으로 변하는 디자인을 의미함.

◼ 필요성

• 유저 편의성: 사용자는 항상 쾌적한 환경을 원함. 휴대폰 사용 시 글씨가 너무 작거나 레이아웃이 깨지면 사용성이 크게 저하됨.
• 경험 최적화: 모든 기기에서 콘텐츠가 잘 보이게 하여 긍정적인 사용자 경험(UX)을 제공하기 위함.

◼ 장점

• 효율성: 디바이스별로 사이트를 별도 제작할 필요가 없음.
• 리소스 절약: 한 번의 구현으로 모든 기기에 대응 가능하여 개발 시간과 노력을 획기적으로 단축함.

◼ 반응형 웹과 적응형 웹

반응형 웹(Responsive Web)

반응형 웹은 화면 크기에 따라 레이아웃이 유동적으로 변경되는 방식.

참고사이트

🔗 애플 https://www.apple.com/kr/store

🔗 에어비앤비 https://www.airbnb.co.kr

🔗 H&M https://www2.hm.com/ko_kr/index.html

적응형 웹(Adaptive Web)

적응형 웹은 기기별로 미리 정의된 화면 레이아웃을 제공하는 방식. 각 기기에 최적화된 디자인이 가능하나, 정의되지 않은 크기에서는 화면이 부자연스러울 수 있음. 접속 디바이스에 따라 URL이 변경되기도 함 (예: m.naver.com)

참고사이트

🔗 네이버 PC https://www.naver.com

🔗 네이버 Mobile https://m.naver.com

🔗 무신사 PC https://www.musinsa.com

무신사 Mobile: 무신사 접근 시점에 device 모드(개발자 도구 - ctrl(command) + shift + M)일 경우 확인 가능

◼ 반응형 웹 개발방법

CSS Media Query 활용

CSS 파일에 미디어쿼리를 작성하여 리액트 컴포넌트에 적용하는 기본적인 방식.

/* styles.css */

.container {
  padding: 20px;
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

import React from 'react';
import './styles.css';

const SampleComponent = () => {
  return (
    <div className="container">
      반응형 웹
    </div>
  );
}

export default SampleComponent;

Styled-components 활용

JavaScript 파일 내에서 스타일과 미디어쿼리를 함께 정의하여 관리.

// SampleComponent.jsx

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
`;

const SampleComponent = () => {
  return (
    <Container>
      반응형 웹
    </Container>
  );
}

export default SampleComponent;

react-responsive 라이브러리 활용

useMediaQuery 훅을 사용하여 JS 로직 내에서 분기 처리.

// SampleComponent.jsx

import React from 'react';
import { useMediaQuery } from 'react-responsive';

const SampleComponent = () => {
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

  return (
    <div style={{ padding: isMobile ? '10px' : '20px' }}>
      반응형 웹
    </div>
  );
}

export default SampleComponent;

Tailwind CSS 활용

tailwind.config.js의 theme 설정을 활용하면 다양한 디자인 프리셋 구성 가능. 프로젝트 전반에서 일관된 디자인 시스템 구축 가능.

🔗 참고 URL https://tailwindcss.com/docs/theme

스크린 사이즈 지정(Break Point)

반응형 웹 구현 시 디바이스별 대표 화면 너비(break point) 기준으로 디자인 구성. break point는 레이아웃이 변경되는 기준 지점 역할을 함. 보통 디자이너가 기준 해상도를 정의함. tailwind.config.js에서 screens 설정 가능. Tailwind는 기본적으로 min-width 기준의 Mobile First 방식 사용.

모바일 퍼스트 (min-width): 작은 화면부터 큰 화면 순으로 스타일 적용.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px', // => @media (min-width: 640px) { ... }
      'md': '768px', // => @media (min-width: 768px) { ... }
      'lg': '1024px', // => @media (min-width: 1024px) { ... }
      'xl': '1280px', // => @media (min-width: 1280px) { ... }
      '2xl': '1536px', // => @media (min-width: 1536px) { ... }
    }
  }
}

데스크탑 퍼스트 (max-width): 큰 화면부터 작은 화면 순으로 스타일 적용.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'}, // => @media (max-width: 1535px) { ... }
      'xl': {'max': '1279px'}, // => @media (max-width: 1279px) { ... }
      'lg': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
      'md': {'max': '767px'}, // => @media (max-width: 767px) { ... }
      'sm': {'max': '639px'}, // => @media (max-width: 639px) { ... }
    }
  }
}

🔗 참고 URL https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints

컬러 지정

프로젝트에서 자주 사용하는 색상을 theme에 미리 정의 가능. 디자인 일관성 유지, 코드 가독성 향상, 유지보수 편의성 향상의 장점이 있음.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    }
  }
}

프리셋 사용

모바일 퍼스트 기준 screen 설정 예시

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

실제 태그 적용 예시

<img class="w-16 md:w-32 lg:w-48" src="...">

클래스 접두사(md:, lg:)를 사용하여 사이즈별 스타일을 제어. Tailwind CSS의 w-{number} 유틸리티는 0.25rem 단위를 사용함.

img의 width값은 기본(sm)일때 width: 4rem(64px), md일때 width: 8rem(*128px),* lg일때 width 12rem(192px)으로 적용됨.

Tailwind CSS는 디자인 시스템을 직접 구축할 수 있도록 도와주는 CSS 프레임워크. 가볍고 사용이 간단한 프레임워크이며, 유틸리티 퍼스트(Utility-First) 방식을 사용함. 빠르고 쉽게 스타일을 적용할 수 있는 다양한 클래스를 제공함.

◼ 등장배경

1. CSS 프레임워크의 중요성
   • 웹 애플리케이션 규모가 커질수록 CSS 관리의 복잡도 급증함.
   • 일관된 디자인 시스템 구축 및 유지보수 효율화를 위해 프레임워크 사용 필수적임.
2. 기존 스타일링 방식의 한계
   • 전통적인 CSS/SASS: 클래스 네임 명명 규칙(BEM 등) 준수가 어렵고, 프로젝트가 커질수록 CSS 파일 크기가 비대해짐.
   • CSS-in-JS (Styled-Components 등): 런타임 성능 오버헤드 발생 가능 및 스타일 정의를 위해 끊임없이 새로운 컴포넌트를 생성해야 하는 번거로움 존재함.
   • 클래스 네임 충돌: 전역 스타일 오염이나 의도치 않은 스타일 중복 적용 문제 빈번함.

→ 이러한 문제를 해결하기 위해 등장한 프레임워크가 Tailwind CSS

→ 유틸리티 클래스 기반 스타일링 지원

→ CSS 관리 단순화 가능

→ 빠르고 일관된 UI 스타일 구축 가능

◼ 주요특징

유틸리티 퍼스트

HTML 요소에 직접 클래스를 추가하는 방식 사용함.

유틸리티 클래스란? 특정 스타일 속성을 나타내는 짧고 간단한 CSS 클래스. HTML만으로 스타일 적용 가능하며 별도의 CSS 파일 작성 필요 없음. 예시: bg-blue-500 → 배경색 파랑, p-4 → 패딩 설정

성능 최적화

Tailwind CSS는 필요한 스타일만 포함하는 방식으로 성능 최적화 지원.

• Purging CSS 기능을 통해 사용하지 않는 CSS를 자동 제거하여 최종 빌드 파일 크기를 최소화함.
• 애플리케이션 로딩 속도 개선 가능.

Purging CSS? Purging CSS는 사용하지 않는 CSS를 제거하여 빌드 파일 크기를 줄이는 과정을 의미함. Tailwind CSS는 빌드 과정에서 사용되지 않는 스타일을 자동으로 제거함.

React와의 통합

• React의 JSX 문법과 완벽히 호환되어 스타일링이 간편함.
• 클래스 네임 충돌 걱정 없이 독립적인 컴포넌트 스타일링 지원함.

<div className="bg-blue-500 text-white p-4">
  Hello, Tailwind CSS!
</div>

커스터마이징

• 전통적인 프레임워크 대비 유연성이 매우 높음.
• tailwind.config.js 설정을 통해 색상, 폰트, 스페이싱 등 프로젝트만의 디자인 시스템 구축 가능함.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
      },
    },
  },
};

◼ 설치 및 기본 사용법

설치

npm install tailwindcss@3.3.5 postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 변경

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

기본 사용법

// src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

적용 예시 (Header 컴포넌트)

// src/components/Header.jsx
// 변경 전

// ... 생략
<header
  style={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: "0 20px",
    backgroundColor: "lightgray",
  }}
/>
// ... 생략

// 변경 후

// ... 생략
<header className="flex justify-between items-center px-5 bg-gray-200" />
// ... 생략

◼ Tailwind CSS vs Styled-Components

설정 및 사용법 비교

Tailwind CSS

유틸리티 클래스를 사용하여 HTML에서 직접 스타일 적용.

<div className="bg-blue-500 text-white p-4">
  Hello, Tailwind CSS!
</div>

Styled-Components

JavaScript 파일에서 스타일 정의 후 컴포넌트에 적용.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 1rem;
`;

function App() {
  return <Button>Hello, Styled-Components!</Button>;
}

장단점 비교

Tailwind CSS

장점

• 유틸리티 클래스 기반 빠른 스타일링 가능
• 사용하지 않는 CSS 제거로 성능 최적화 지원
• 높은 커스터마이징 가능

단점

• 클래스 네임 길어질 수 있음
• 초기 설정 필요

Styled-Components

장점

• JavaScript 파일에서 스타일 관리 가능
• 동적 스타일링 지원
• 컴포넌트 기반 스타일 구조 구성 가능

단점

• 초기 학습 필요
• 런타임 스타일 처리로 성능 이슈 발생 가능

서버 API URL

https://api.example.com

회원가입

아이디, 비밀번호, 닉네임으로 DB에 회원정보를 저장.

• Request

  • Method: POST

  • URL PATH: /register

  • Body (JSON):

    JSON
    {
      "id": "유저 아이디",
          "password": "유저 비밀번호",
          "nickname": "유저 닉네임"
    }

• Response

    {
      "message": "회원가입 완료",
      "success": true
    }

로그인

아이디와 비밀번호 일치 시 accessToken, userId, avatar, nickname 총 4가지 유저 정보를 응답.

• Request

  • Method: POST

  • URL PATH: /login

  • Body (JSON):

    JSON
    {
    "id":"유저 아이디",
    "password": "유저 비밀번호"
    }

• Query String (선택): accessToken 유효시간 조정을 위해 사용함.

  • 미기입 시 기본 1시간 설정.
  • expiresIn 파라미터로 시간 단위(s, m, h) 지정 가능. (ex. 10s, 10m, 10h)
  • TIP: 토큰 만료 후 자동 로그아웃 로직을 테스트할 때 유용함.
  • 예시: /login?expiresIn=10m (유효시간 10분 요청)

• Response

    {
      "accessToken": "eyJhbGciOiJIUzI1Ni...",
      "userId": "유저 아이디",
      "success": true,
      "avatar": "프로필 이미지 URL",
      "nickname": "유저 닉네임"
    }

회원정보 확인

accessToken이 유효한 경우, 비밀번호를 제외한 본인 정보를 응답함.

// authorization 속성 정의
const response = await axios.get(`${BASE_URL}/user`, {
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${accessToken}`,
  },
});

• Request

  • Method: GET

  • URL PATH: /user

  • Header:

      {
          "Authorization": "Bearer AccessToken"
      }

• Response

    {
      "id": "사용자 아이디",
      "nickname": "사용자 닉네임",
      "avatar": null,
      "success": true
    }

프로필 변경

accessToken이 유효한 경우, FormData를 통해 이미지나 닉네임 수정 가능. 수정 완료 후 변경된 정보를 응답함.

// 이미지파일을 FormData에 담는 방법

const formData = new FormData();
// avatar와 nickname 중 하나 또는 모두 변경 가능
formData.append("avatar", imgFile);
formData.append("nickname", nickname);

// 요청 시 Content-Type에 유의
const response = await axios.patch(`${BASE_URL}/profile`, formData, {
  headers: {
    "Content-Type": "multipart/form-data",
    Authorization: `Bearer ${accessToken}`,
  },
});

• Request

  • Method: PATCH

  • URL PATH: /profile

  • Header:

      {
          "Authorization": "Bearer AccessToken"
      }

  • Body (Form-Data):

      {
          "avatar": [이미지파일],
          "nickname": "변경할 닉네임"
      }

• Response

    {
      "avatar": "변경된 이미지 URL",
      "nickname": "변경된 닉네임",
      "message": "프로필이 업데이트되었습니다.",
      "success": true
    }

◼ Thunder Client

HTTP 요청을 보내고 응답을 확인할 수 있는 API 테스트 도구. VS Code 내부에서 API 요청 테스트 및 디버깅 가능.

설치방법

VS Code Extensions에서 [thunder Client] 검색 후 설치 → 사이드바의 아이콘 선택

기본 사용 방법

1. New Request 클릭
2. 원하는 HTTP Method 선택 및 URL 입력
3. Payload가 필요할 경우 Body에 추가
4. [Send]를 눌러 응답 확인

인증(Authentication)

서비스를 이용하려는 사용자가 등록된 회원인지 확인하는 절차. 일반적으로 로그인 과정.

인가(Authorization)

인증이 완료된 사용자가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차. 로그인 이후, 기능 또는 데이터 접근 권한을 검사하는 과정.

◼ HTTP 프로토콜 특징

무상태(stateless)

• 독립적 요청 처리 : HTTP는 무상태 프로토콜로, 서버가 이전 요청에 대한 정보를 기억하지 않음.
• 클라이언트 책임 : 서버가 이전 요청의 상태나 정보를 기억하지 않으므로, 클라이언트는 매 요청마다 필요한 상태 정보를 포함하여 전달해야 함.
• 서버 운영 효율 : 상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답.
• 수평 확장성(Scale-out) 유리 : 각 서버는 상태를 기억할 필요가 없어 독립적으로 요청을 처리할 수 있음. 하나의 서버에 장애가 발생하더라도 다른 서버가 계속해서 요청을 처리할 수 있어 안전.

스케일 아웃(Scale-out)이란? 동일 애플리케이션을 여러 대의 서버에 배포하고 로드 밸런서를 통해 요청을 여러 서버로 분산하는 방식.

비연결성(connectionless)

• 연결 즉시 종료 : 클라이언트와 서버가 요청과 응답을 주고받은 후 바로 연결을 끊음.
• 자원 관리 : 서버 입장에서는 연결을 유지하는 비용이 들지 않아 최소한의 자원으로 많은 수의 요청 대응 가능.
• 한계점 : 매번 새로운 연결을 맺어야 하므로, 요청이 잦은 서비스에서는 비효율적일 수 있음.

◼ 쿠키, 세션, 토큰

쿠키(Cookie)

브라우저에 저장되는 작은 텍스트 데이터 조각 (Key-Value 형태).

• HTTP의 무상태성, 비연결성 보완 : 쿠키를 사용하여 마치 서버가 클라이언트의 인증 상태를 기억하는 것처럼 구현.
• 자동 전송 : 별도로 삭제 처리하거나 유효기간이 만료되지 않는 한, 서버와 통신할 때 자동으로 주고받음(단, 동일 Origin 또는 CORS 허용 범위 내에서만 작동).
• Set-Cookie : 서버에 특정 API 요청을 했을 때(ex: 로그인 요청)서버가 응답 헤더에 이 속성을 담으면 브라우저가 알아서 저장. 서버에서 브라우저에게 저장하도록 지시할 수 있다는 점에서는 localStorage나 sessionStorage와는 다름.

Origin 이란? protocol + host + port 를 의미.

CORS 란? Cross Origin Resource Sharing(CORS)는 다른 출처에 리소스 요청하는 것을 허용하는 정책. 브라우저는 보안상의 이유로 Same Origin Policy(SOP)를 원칙으로 하고 있지만, 서버와 클라이언트 각각 CORS 설정을 통해 상호합의된 웹사이트는 예외적으로 서로 다른 출처(Cross-Origin)임에도 API 요청이 가능.

세션(Session)

서버와 클라이언트 간의 연결/인증이 유지되고 있는 상태.

• 인증 과정
  1. 로그인 성공 시 서버에서 세션 생성 및 저장소(DB, Redis 등)에 보관.
  2. 생성된 sessionId를 쿠키에 담아 브라우저로 응답.
  3. 브라우저는 이후 요청마다 쿠키(sessionId)를 함께 보냄.
  4. 서버는 수신한 ID를 저장소에서 조회하여 인증 처리.
• 상태값
  • 세션 유지 : 서버 저장소에 해당 데이터가 존재함
  • 세션 만료 : 서버 저장소에서 데이터가 삭제됨 (로그아웃 또는 시간 초과).

토큰(Token)

클라이언트가 직접 보관하는 암호화/인코딩된 인증 정보.

• 장점 : 세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없어 서버 부담이 적음.
• 주요 방식 : 주로 JWT(JSON Web Token) 형식을 사용.
• 암호화 vs 인코딩
  • 암호화 : 데이터 보호 목적. 데이터를 특정 알고리즘으로 변환하여 인가된 사용자만이 읽을 수 있도록 하는 과정이며, 기밀성을 유지.
  • 인코딩 : 전송/처리 목적. 데이터를 다른 형식으로 변환하여 전송 및 저장을 용이하게 하는 과정으로, 특별한 키 없이도 원래 형태로 복원할 수 있음.

◼ JWT

토큰 기반 인증의 표준 규격으로, 로그인 후 API 요청 시 신분증 역할을 함.

구조

1. 헤더(Header) : 토큰 종류 및 서명 알고리즘 정보 포함.
2. 본문(Payload) : 실제 데이터 부분. 예를 들어, 사용자 ID, 토큰의 만료 시간 등.
3. 서명(Signature) : 토큰 위조여부를 확인하는 역할. 서버만 알 수 있는 비밀키로 서명되어 있음. 이 서명 때문에 토큰의 무결성이 보장됨.

특징

• 위조 방지 : 인코딩된 토큰을 누구나 복호화하여 payload를 볼 수 있습니다. 즉, 토큰의 용도는 데이터 보호가 아니라 "이 데이터를 서버가 발행한 진짜가 맞는가?"를 검증하는 위조 방지 역할.
• 무결성 보장: Secret Key가 있어야 Signature 검증이 가능하므로 클라이언트가 임의로 수정 불가.

인증 보안 강화(Access & Refresh)

프론트엔드 개발 시 백엔드와 협업하여 보안을 강화하는 방식.

• Access Token : 리소스 접근용. 만료 기간을 짧게(예: 30분) 설정하여 탈취 위험 감소.
• Refresh Token : Access Token 재발급용. 만료 기간을 길게(예: 1~2주) 설정.
• 작동 원리 : Access Token이 만료되면 Refresh Token을 서버에 보내 새 Access Token을 받아옴. 둘 다 만료되면 다시 로그인 필요.

Throttling은 짧은 시간 간격으로 연속 발생한 이벤트를 일정 시간 단위(delay)로 제한하는 기법. 지정한 시간 동안 처음 또는 마지막 이벤트만 실행 가능. 주로 무한스크롤, 스크롤 이벤트, 버튼 연속 클릭 방지 등에 사용.

이벤트 반복 발생 시 처리 방식은 다음과 같이 구분 가능.

◼ Debouncing란?

Debouncing은 짧은 시간 간격으로 연속 발생하는 이벤트가 멈출 때까지 기다렸다가, 마지막 이벤트 기준으로 일정 시간(delay) 이후 한 번만 실행하는 기법. 주로 입력값 실시간 검색, 자동완성 기능, 화면 resize 이벤트 등에 사용. 서버에 대한 불필요한 API 호출을 줄이고 짧은 시간에 많은 이벤트가 발생하는 상황에서 UI 과부하 방지.

◼ 메모리 누수(Memory Leak)란?

필요하지 않은 메모리를 계속 점유하는 현상.

setTimeout이 메모리 누수를 유발하는가?

쓰로틀링과 디바운싱에서 setTimeout을 자주 사용하기 때문에, 이 함수의 사용으로 인한 메모리 누수 가능성을 이해하는 것이 중요. 상황에 따라 메모리 누수를 일으킬 수도 있고 아닐 수도 있음.

하나의 페이지에서 페이지 이동 없이 setTimeout을 동작시키고 타이머 함수가 종료될 때까지 기다린다면 메모리 누수는 없음. React 기반 SPA에서는 페이지 이동 시 컴포넌트가 언마운트됨. 페이지 이동 전에 setTimeout 으로 인해 타이머가 동작중인데 clearTimeout을 호출하지 않고 페이지를 이동한다면, 컴포넌트는 언마운트 되었음에도 불구하고 타이머는 여전히 메모리를 차지하고 동작하고 있음. 이 경우 메모리 누수(Memory Leak)에 해당.

따라서 cleanup 함수에서 반드시 clearTimeout 처리 필요.

◼ 실습

직접 만들어보는 throttling & debouncing

프로젝트 생성

npm create vite thro-debo-app --template react

페이지 이동 테스트를 위한 react-router-dom 설치

npm install react-router-dom

App 컴포넌트 작성

// src/App.jsx

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "pages/Home";
import Company from "pages/Company";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
                <Route path="/company" element={<Company />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home 컴포넌트 작성

throttling, debouncing 동작에 집중. 페이지 이동 시 cleanup이 없다면 타이머가 계속 동작. 이 경우 메모리 누수 발생 가능.

// src/pages/Home.jsx

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Home() {
  // const [state, setState] = useState(false);
  const navigate = useNavigate();
  let timerId = null;

  // Leading Edge Throttling
  const throttle = (delay) => {
    if (timerId) {
      // timerId가 있으면 바로 함수 종료
      return;
    }
    // setState(!state);
    console.log(`API요청 실행! ${delay}ms 동안 추가요청 안받음`);
    timerId = setTimeout(() => {
      console.log(`${delay}ms 지남 추가요청 받음`);
      // alert("Home / 쓰로틀링 쪽 API호출!");
      timerId = null;
    }, delay);
  };

  // Trailing Edge Debouncing
  const debounce = (delay) => {
    if (timerId) {
      // 할당되어 있는 timerId에 해당하는 타이머 제거
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      // timerId에 새로운 타이머 할당
      console.log(`마지막 요청으로부터 ${delay}ms지났으므로 API요청 실행`);
      timerId = null;
    }, delay);
  };

  useEffect(() => {
    return () => {
      // 페이지 이동 시 실행
      if (timerId) {
        // 메모리 누수 방지
        clearTimeout(timerId);
      }
    };
  }, [timerId]);

  return (
    <div style={{ paddingLeft: 20, paddingRight: 20 }}>
      <h1>Button 이벤트 예제</h1>
      <button onClick={() => throttle(2000)}>쓰로틀링 버튼</button>
      <button onClick={() => debounce(2000)}>디바운싱 버튼</button>
            <div>
        <button onClick={() => navigate("/company")}>페이지 이동</button>
      </div>
    </div>
  );
}

lodash 활용

lodash는 JavaScript 유틸리티 라이브러리로, 배열, 객체, 문자열 등의 데이터 조작을 쉽게 할 수 있는 다양한 함수들을 제공. 성능 최적화와 코드 가독성을 높이는 데 유용. 특히, throttle과 debounce 같은 함수도 포함되어 있어 편리.

lodash를 활용한 debouncing 테스트

// src/pages/Home.jsx

import { useState, useCallback } from "react";
import _ from "lodash";

function Home() {
  const [searchText, setSearchText] = useState("");
  const [inputText, setInputText] = useState("");

  const handleSearchText = _.debounce((text) => setSearchText(text), 2000);

  const handleChange = (e) => {
    setInputText(e.target.value);
    handleSearchText(e.target.value);
  };

  return (
    <div
      style={{
        paddingLeft: 20,
        paddingRight: 20,
      }}
    >
      <h1>디바운싱 예제</h1>
      <br />
      <input
        placeholder="입력값을 넣고 디바운싱 테스트를 해보세요."
        style={{ width: "300px" }}
        onChange={handleChange}
        type="text"
      />
      <p>Search Text: {searchText}</p>
      <p>Input Text: {inputText}</p>
    </div>
  );
}

export default Home;

문제 발생

input에서 입력한 값이 delay 간격으로 한 글자씩 반영되는 현상 발생. 원인 : 컴포넌트에서 리렌더링이 일어나면서 debounce 함수를 계속해서 생성하기 때문.

const handleSearchText = _.debounce((text) => setSearchText(text), 2000);

해결 방법

useCallback으로 함수를 memoization.

  const handleSearchText = useCallback(
    _.debounce((text) => setSearchText(text), 2000),
    []
  );

Zustand는 상태관리 본연의 기능에 집중한 라이브러리. 복잡성을 줄이고, 간단하고 직관적인 상태관리 기능 제공. 단순화된 Flux 패턴 기반의 small, fast, scalable 상태관리 솔루션이며 Hooks 기반의 간편한 API 제공.

◼ 등장배경

상태관리의 중요성

기존 상태관리 라이브러리인 Redux는 강력한 기능과 다양한 미들웨어 지원하지만, 설정과 사용 방식이 복잡한 편. 상태관리는 모든 React 애플리케이션에서 핵심 요소. 작은 규모에서는 상태관리가 간단하지만, 애플리케이션이 커질수록 상태관리는 더 복잡해짐.

→ Zustand는 복잡성을 줄이고, 간단하고 직관적인 상태관리 기능 제공.

◼ 주요특징

• 간결함 : 간단한 API 제공하기 때문에, 학습 곡선이 완만. 적은 설정 코드로 상태관리 구현 가능.
• 성능 : 불필요한 리렌더링을 방지하는 등 성능최적화가 잘 되어 있음. 상태 변경 시 해당 상태를 구독(subscribe)한 컴포넌트만 리렌더링.
• React와의 통합 : React의 훅(Hook)과 자연스럽게 통합 가능. 상태를 정의하고 이를 React 컴포넌트에서 쉽게 사용할 수 있어, 기존 React 개발 경험을 그대로 활용할 수 있음.

구독(subscribe)이란? 구독은 상태 변경을 감지하고, 해당 변경에 반응하는 컴포넌트만 업데이트하는 메커니즘 의미. 상태 일부가 변경되더라도, 그 값을 사용하지 않는 컴포넌트는 리렌더링되지 않음. 애플리케이션 전체 리렌더링 방지. 이를 통해 성능을 최적화하고 리렌더링으로 인한 성능 저하를 방지할 수 있음.

◼ 설치 및 기본 사용법

설치

npm install zustand

기본 사용법

// src/zustand/bearsStore.js

import { create } from "zustand";

const useBearsStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}));

export default useBearsStore;

// src/App.jsx

import "./App.css";
import useBearsStore from "./zustand/bearsStore";

function App() {
  **const bears = useBearsStore((state) => state.bears);
  const increasePopulation = useBearsStore((state) => state.increasePopulation);**
  return (
    <div>
      <h1>{bears} around here ...</h1>
      <button onClick={increasePopulation}>one up</button>
    </div>
  );
}
export default App;

◼ Zustand vs Redux Toolkit

• 설정과 사용법: Zustand는 간단한 설정과 직관적인 사용 방식 제공. Redux Toolkit은 더 구조화된 방법을 제공.
• 성능: 두 라이브러리 모두 성능 최적화가 잘 되어 있지만, Zustand는 불필요한 리렌더링을 방지하는데 더 초점
• 유연성: Zustand는 필요한 부분만 선택적으로 사용 가능. Redux Toolkit은 보다 강력한 구조화된 방법을 제공.
• 커뮤니티와 자료: Zustand는 빠르게 성장 중이며 증가 추세. Redux Toolkit은 대형 커뮤니티와 풍부한 레퍼런스 보유.

Zustand

보일러플레이트 최소화. 상태 정의와 사용 과정 직관적.

import { create } from "zustand";

const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 }))
}))

Redux Toolkit

보일러플레이트 많음. 비교적 많은 설정 코드 요구.

import { configureStore, createSlice } from '@reduxjs/toolkit'

const slice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 }
  }
})

const store = configureStore({ reducer: slice.reducer })

◼ Zustand 장점과 단점

장점

• 간편한 사용: 간단한 API와 직관적인 사용법 제공.
• 성능 최적화: 불필요한 리렌더링을 방지.
• React와의 완벽한 통합: React Hooks 기반 자연스러운 통합 지원.
• 미들웨어 지원: persist, devtools 등.
• 유연성: 필요한 기능만 선택 사용 가능.

단점

• 규모가 커지면 관리 어려움: 상태가 많아지면 관리가 복잡해짐.

◼ 예시

기본 예제

상태 정의

// src/zustand/todosStore.js

import { create } from "zustand";

const useTodosStore = create(set => ({
  todos: [],
  addTodo: (todo) => set(state => ({ todos: [...state.todos, todo] })),
  removeTodo: (index) => set(state => ({
    todos: state.todos.filter((_, i) => i !== index)
  }))
}))

export default useTodosStore;

상태 사용

// src/App.jsx

import React, { useState } from "react";
import useTodosStore from "./zustand/todosStore";

function App() {
  const todos = useTodosStore((state) => state.todos);
  const addTodo = useTodosStore((state) => state.addTodo);
  const removeTodo = useTodosStore((state) => state.removeTodo);
  const [input, setInput] = useState("");

  return (
    <div>
      <h1>Todo List</h1>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button
        onClick={() => {
          addTodo(input);
          setInput("");
        }}
      >
        Add Todo
      </button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Zustand와 Immer의 결합

immer란? Immer는 JavaScript에서 상태를 쉽게 변경할 수 있게 해주는 라이브러리. 원본 데이터를 변경하지 않고 마치 직접 수정하는 것처럼 코드를 작성할 수 있으며, Immer가 자동으로 불변성을 유지한 새 상태를 만들어줌.

직접 중첩된 상태를 업데이트 했을 때의 문제점

Zustand의 간편한 상태 업데이트 방식은 깊은 중첩 구조를 가지는 상태를 업데이트할 때 문제가 발생할 수 있음. 배열이나 객체의 중첩된 상태를 업데이트할 때 불변성을 유지하지 않으면 상태 반영이 제대로 이루어지지 않아, 예상치 못한 오류가 발생할 수 있음.

import create from "zustand";

// Zustand 스토어 생성
const useTodosStore = create((set) => ({
  todos: [],
  addTodo: (text) =>
    set((state) => {
      // 불변성을 어기는 예시: 직접 배열을 수정
      state.todos.push({ id: Date.now(), text, completed: false });
      return state;
    }),
  toggleTodo: (id) =>
    set((state) => {
      // 불변성을 어기는 예시: 직접 객체를 수정
      const todo = state.todos.find((todo) => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
      return state;
    }),
}));

export default useTodosStore;

// src/App.jsx

import useTodosStore from "./zustand/todosStore";

function App() {
  const { todos, addTodo, toggleTodo } = useTodosStore();

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? "line-through" : "none",
              }}
              onClick={() => toggleTodo(todo.id)}
            >
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
      <button
        onClick={() => addTodo(prompt("새로운 todolist를 입력해주세요."))}
      >
        Add Todo
      </button>
    </div>
  );
}

export default App;

리스트가 추가/수정 되더라도 다른 요소에 의해 리렌더링이 일어나지 않는 한 UI에 반영이 안됨.

immer 설치

npm install immer

todosStore.js 수정

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

const useTodosStore = create(
  immer((set) => ({
    todos: [
      {
        id: 1,
        title: "Learn Zustand",
        tasks: [{ id: 1, task: "Read documentation", done: false }],
      },
    ],
    addTask: (todoId, newTask) =>
      set((state) => {
        const todo = state.todos.find((todo) => todo.id === todoId);
        if (todo) {
          todo.tasks.push(newTask); // 불변성 유지: immer가 자동으로 처리
        }
        // return { todos: state.todos }; // 변경된 참조가 기존 상태와 같아 리렌더링되지 않음
      }),
    toggleTask: (todoId, taskId) =>
      set((state) => {
        const todo = state.todos.find((todo) => todo.id === todoId);
        if (todo) {
          const task = todo.tasks.find((task) => task.id === taskId);
          if (task) {
            task.done = !task.done; // 불변성 유지: immer가 자동으로 처리
          }
        }
        // return { todos: state.todos }; // 변경된 참조가 기존 상태와 같아 리렌더링되지 않음
      }),
  }))
);

export default useTodosStore;

기타 유용한 패턴

선택적 상태 구독

상태의 특정 부분만 구독하여 성능 최적화 할 수 있음. 리렌더링 범위 최소화 가능.

// src/App.jsx

const todos = useTodosStore((state) => state.todos);
const addTask = useTodosStore((state) => state.addTask);
const toggleTask = useTodosStore((state) => state.toggleTask);

미들웨어 사용

import { produce } from "immer";
import { create } from "zustand";
import { persist } from "zustand/middleware";

const useTodosStore = create(
  persist(
    (set) => ({
      todos: [
        {
          id: 1,
          title: "Learn Zustand",
          tasks: [{ id: 1, task: "Read documentation", done: false }],
        },
      ],
      addTask: (todoId, newTask) =>
        set(
          produce((state) => {
            const todo = state.todos.find((todo) => todo.id === todoId);
            if (todo) {
              todo.tasks.push(newTask); // 불변성 깨짐: 직접 수정
            }
            // return { todos: state.todos }; // 변경된 참조가 기존 상태와 같아 리렌더링되지 않음
          })
        ),
      toggleTask: (todoId, taskId) =>
        set(
          produce((state) => {
            const todo = state.todos.find((todo) => todo.id === todoId);
            if (todo) {
              const task = todo.tasks.find((task) => task.id === taskId);
              if (task) {
                task.done = !task.done; // 불변성 깨짐: 직접 수정
              }
            }
            // return { todos: state.todos }; // 변경된 참조가 기존 상태와 같아 리렌더링되지 않음
          })
        ),
    }),
    {
      name: "todos-storage", // 저장소 이름 설정.
      // getStorage: () => sessionStorage, // localStorage가 아닌 곳에 저정하고 싶다면.
    }
  )
);

export default useTodosStore;

persist를 이용해서 새로고침을 하더라도 데이터 유지. persist는 zustand 내장이므로 별도 설치할 필요가 없음. 위와 같이 하면 새로고침 이후에도 localStorage에서 데이터를 관리하기 때문에 지속성을 유지할 수 있음.

다운로드 UI가 있거나 UX를 저해하는 불필요한 네트워크 요청을 제거할 때 사용. 대용량 fetching을 중간에 취소하거나, 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소해 불필요한 네트워크 비용을 절감함.

사용방법

QueryFunctionContext queryFn 은 매개변수로 QueryFunctionContext 이란 객체를 받음.

export const getTodos = async (queryFnContext) => {
  const { queryKey, pageParam, signal, meta } = queryFnContext;
    // queryKey: 배열형태의 쿼리키
    // pageParam: useInfiniteQuery 사용 시 getNextPageParam 실행 결과 반영
    // signal: AbortSignal을 의미(네트워크 요청을 중간에 중단시킬 수 있는 장치)
    // meta: query에 대한 정보를 추가적으로 메모를 남길 수 있는 string 필드

  const response = await axios.get("http://localhost:5000/todos", { signal });
  return response.data;
};

useQuery({
  queryKey: ["todos"],
  queryFn: getTodos,
})
// example: <div onClick={(event) => {}}

페이지 컴포넌트 unmount 시 Query 취소 API 요청의 기본 설정은 컴포넌트가 unmount 되어도 네트워크 요청이 중단되지 않음. GET 요청은 abort signal이 옵션으로 전달된 경우에만 unmount 시 자동으로 네트워크 요청이 취소됨.

import axios from 'axios'

const query = useQuery({
  queryKey: ['todos'],
  queryFn: ({ signal }) =>
    axios.get('/todos', {
      // Pass the signal to `axios`
      signal,
    }),
})

수동으로 Query 취소 queryClient.cancelQueries 사용해 특정 쿼리 취소 가능.

const query = useQuery({
  queryKey: ['todos'],
  queryFn: async ({ signal }) => {
    const resp = await fetch('/todos', { signal })
    return resp.json()
  },
})

const queryClient = useQueryClient()

return (
  <button
    onClick={(e) => {
      e.preventDefault()
      queryClient.cancelQueries({ queryKey: ['todos'] })
    }}
  >
    Cancel
  </button>
)

사용시 주의사항

모든 GET 요청마다 Abort Signal 적용 필요 여부 불필요한 네트워크 요청을 최소화한다는 명분으로, 단순히 모든 GET 요청에 Abort Signal을 적용하는 것은 권장되지 않음. 동영상 다운로드처럼 대용량 fetching이 아닌 이상, 대부분의 GET 요청은 빠르게 완료되고 캐싱 처리되어 성능에 유의미한 영향을 주지 못함. 대용량 fetching이 있거나 Optimistic UI를 구현하는 경우처럼 필요한 상황에서만 적용하는 것을 권장.

◼ Optimistic Updates

서버 요청이 성공할 것을 가정하고 UI를 먼저 변경한 뒤, 서버 요청을 보내는 방식. 요청이 실패하면 UI를 원상복구(revert/rollback)해야 함. 즉각적인 사용자 피드백을 제공할 수 있어 UX 향상에 효과적.

◼ Prefetching

페이지 이동 전에 이동할 페이지의 쿼리를 백그라운드에서 미리 호출(prefetching). 캐시 데이터가 있는 상태에서 해당 페이지로 이동하면 로딩 없이 바로 UI를 볼 수 있음.

const prefetchTodos = async () => {
  // 이동할 페이지의 queryKey, queryFn과 동일하게 설정 필요
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

◼ Paginated / Lagged Queries

페이지 이동 시 매번 Loading UI를 표시하는 대신, 기존 UI를 유지하다가 서버에서 새로운 데이터를 받아온 뒤에 화면을 갱신하는 방식을 적용. useQuery 옵션에서 keepPreviousData: true를 설정하면 이전 캐시 데이터를 기준으로 isLoading 여부를 판단하므로, 페이지 전환 시 UX를 더 부드럽게 구성할 수 있음.

◼ Infinite Queries

데이터 fetching이 일어날 때마다 기존 리스트 데이터에 fetching된 데이터를 추가하고 싶을 때 유용하게 사용할 수 있는 훅. 더보기 UI 또는 무한 스크롤 UI 구현에 적합.

const fetchProjects = async ({ pageParam = 0 }) => {
    const res = await fetch('/api/projects?cursor=' + pageParam)
    return res.json()
  }

  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
  })

실행 순서 정리

1. queryFn 실행
2. 캐시에 { pages, pageParams } 형태로 데이터 등록
3. getNextPageParam 실행
4. 반환된 nextPageParam을 훅 내부 메모리에 저장 (캐시 저장 아님)
5. nextPageParam이 undefined가 아닐 경우 hasNextPage를 true로 상태 변경
6. fetchNextPage 실행
7. 내부 저장된 nextPageParam을 queryFn의 매개변수로 전달

pages 와 pageParams 를 갖는 캐시 데이터

• useQuery는 queryFn의 반환값이 그대로 캐시 데이터로 등록됨.
• useInfiniteQuery는 queryFn의 반환값이 pages 배열 요소로 추가됨.
• 매개변수로 전달받은 pageParam은 pageParams 배열 요소로 추가됨.

useInfiniteQuery 사용 시 주의사항

• 훅의 내부 동작 원리로 인해 예상보다 리렌더링이 자주 발생할 수 있음.
• 연산량이 많은 코드가 있다면 useMemo와 같은 메모이제이션 적용을 고려해야 함.
• 리렌더링이 발생하더라도 실제 브라우저 렌더링이 항상 발생하는 것은 아님. Virtual DOM 기반 diff 과정을 거친 뒤 변경 사항만 반영됨.

TanStack Query는 서버 상태 관리를 위한 라이브러리. 서버 상태란 서버와의 통신을 통해 받아오는 데이터 의미.

클라이언트 상태와 달리 다음과 같은 관리 필요.

• Fetching(패칭) : 서버에서 데이터를 가져옴.
• Caching(캐싱) : 가져온 데이터를 캐싱하여, 동일한 데이터를 반복해서 요청하지 않음.
• Synchronizing(동기화) : 서버의 데이터와 캐시된 데이터를 동기화.
• Updating(업데이트) : 서버의 데이터를 쉽게 업데이트하고, 이를 캐시에 반영.

TanStack Query는 위 과정을 자동화 및 간소화 지원.

stale-while-revalidate(swr) 전략

SWR은 최신 데이터가 도착하기 전까지 기존 캐시 데이터를 사용하는 전략. 이를 통해 사용자는 최신 데이터를 기다리는 동안에도 즉시 UI 응답이 가능. TanStack Query는 SWR 전략을 사용하여 효율적으로 데이터를 관리.

캐시 데이터는 어디에 보관?

TanStack Query는 캐시 데이터를 전역으로 관리함. QueryClientProvider를 사용하면 React 애플리케이션 전체에서 캐시에 접근할 수 있음. 이는 내부적으로 React Context API를 사용하기 때문임. Provider 하위의 모든 자식 컴포넌트가 캐시 데이터에 접근할 수 있음. 이 내부 Context를 앞으로 캐시 컨텍스트, 그 안의 데이터를 캐시 데이터로 정의.

Provider 설정

// src/main.jsx
// <Provider>로 감싸준 범위 내부의 자식 컴포넌트 안에서 캐시 데이터를 공유할 수 있음.

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

◼ 데이터 흐름

A 컴포넌트

1. useQuery 실행. 이때 todos라는 queryKey를 기준으로 캐시 컨텍스트에 데이터를 요청.
2. 초기 상태에서는 todos라는 queryKey에 아무 값도 저장되어 있지 않으므로 const { data } = useQuery~~의 data는 undefined가 됨.
3. 이후 getTodos(query function)를 호출하고, 실행이 완료되면 외부에서 가져온 todos 데이터를 캐시 컨텍스트에 저장. 이 과정을 ["todos"]에 대한 데이터로 캐싱 처리한다고 표현.
4. A 컴포넌트에 값을 반영하기 전에 리렌더링이 발생. React 컴포넌트는 상태나 props가 변경되면 다시 렌더링됨. useQuery 역시 데이터 패칭 상태가 변경될 때 컴포넌트를 다시 렌더링함.
5. useQuery가 재실행되며, todos라는 queryKey를 기준으로 캐시 컨텍스트에 데이터를 요청.
6. 이제 캐싱된 데이터가 존재하므로 값을 반환하고, const { data } = useQuery~~의 data에 값이 담김.

B 컴포넌트

1. B 컴포넌트에서 useQuery가 실행. 이때 todos라는 queryKey를 기준으로 캐시 컨텍스트에 데이터를 요청.
2. 이미 캐싱된 데이터가 존재하므로 값을 반환하고, const { data } = useQuery~~의 data에 값이 담김.

C 컴포넌트

1. C 컴포넌트에서 어떤 액션으로 addTodo라는 API 호출이 발생하며 데이터 갱신을 시도.
2. 호출이 성공적으로 완료되어도, 이때 useQuery에서 사용하던 캐시 데이터가 자동으로 갱신되지는 않음. 반드시 해당 queryKey를 기준으로 invalidateQueries 처리를 해줘야 기존에 가져왔던 오래된 데이터를 새 것으로 교체할 수 있음.
3. invalidateQueries를 처리하면 useQuery로 캐시 데이터를 활용하던 모든 곳이 새로운(fresh) 데이터를 구독.

◼ LifeCycle

캐시 데이터 LifeCycle

TanStack Query의 생명주기는 데이터가 캐시되고 사용되며 갱신되는 과정을 포함함. 아래는 주요 상태를 설명함.

default config(기본 설정)

헷갈리는 개념 정리

• staleTime : 데이터를 fresh로 유지할 시간 설정(default: 0)
• gcTime : inactive 이후 캐시 유지 시간(default: 5분, gcTime 0되면 삭제처리)
• staleTime과 stale/fresh 관계 : staleTime > 0 → 일정 시간 fresh 유지, staleTime = 0 → 즉시 stale 취급.
• isPending : 새로운 캐시 데이터를 서버에서 받고 있는 지 여부. 캐시 데이터가 있는 경우 isPending은 false, isFetching은 true.
• isFetching : 서버에서 데이터를 받고 있는 지 여부.

◼ Must-know options

enabled

enabled 옵션은 쿼리(queryFn) 실행 여부를 제어함. 기본값은 true이며, false로 설정하면 쿼리가 자동으로 실행되지 않음. 이 옵션을 사용하면 특정 이벤트가 발생했을 때만 쿼리를 실행할 수 있음.

useQuery({
    queryKey: ["todos"],
    queryFn: getTodos,
    enabled: true
})

예제

Disabling/Pausing Queries (이벤트 발생 시에만 수동 실행하고 싶을 때)

const { data, refetch } = useQuery({
    queryKey: ["todos"],
    queryFn: getTodos,
    enabled: false
});

return (
    <div>
    <button onClick={() => refetch()}>데이터 불러오기</button>
  </div>
);

Dependent Queries(useQuery 2개 이상이며 실행순서 설정 필요할 때)

// Dependent Query 예제 (순차적 query 실행)
// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // userId 존재할 때만 두 번째 쿼리 실행 가능.
  enabled: !!userId
})
// userId는 Boolean(userId)와 같음.

select

select 옵션은 queryFn이 반환한 데이터를 가공해 사용할 때 활용 가능. UI에서 필요한 데이터만 추출하거나 변환하는 용도로 사용 가능. 단, 캐시에는 항상 원본 데이터 유지. 가공된 데이터는 해당 useQuery를 사용하는 컴포넌트에만 적용됨.

예제

import { useQuery } from 'react-query'

function User() {
  const { data } = useQuery({
      queryKey: ["user"],
      queryFn: fetchUser,
      select: user => user.username
  });

  return <div>Username: {data}</div>
}

TanStack Query는 서버 상태 관리 라이브러리. 데이터 패칭, 캐싱, 동기화, 무효화 등의 기능을 제공. 비동기 로직을 간결하게 작성할 수 있어 유지보수성을 높일 수 있음.

◼ 등장배경

1. 비동기 로직의 복잡성 해결 필요
   • 기존의 useEffect, useState를 사용한 비동기 데이터 처리 방식은 상태 관리 로직이 분산되기 쉬움. 로딩, 에러, 데이터 상태를 각각 직접 관리해야 하므로 코드 중복이 발생할 수 있음.
   • Redux Thunk와 같은 미들웨어를 사용하더라도 비동기 로직 테스트가 복잡하고 보일러플레이트 코드가 많이 생기므로, 더 효율적인 도구가 필요.
2. 서버 상태 관리의 어려움
   • 서버 상태는 단순 클라이언트 상태와 달리 캐싱, 동기화, 재검증 등 관리 요소가 많아 기존 방식으로는 관리가 어려움.

→ 이러한 문제를 해결하기 위해 등장한 라이브러리가 TanStack Query.

→ 복잡한 비동기 로직을 간결하게 작성할 수 있음.

→ 서버 상태 관리를 단순화할 수 있음.

◼ 주요기능

• 데이터 캐싱: 동일한 데이터를 반복 요청하지 않도록 캐싱해 성능을 향상시킴.
• 자동 리페칭: 데이터가 변경되면 자동으로 리페칭해 최신 상태를 유지함.
• 쿼리 무효화: 특정 이벤트 발생 시 쿼리를 무효화하고 데이터를 다시 가져옴.

◼ 설정

프로젝트 생성

npm create vite tanstack-query-app --template react

설치

npm install @tanstack/react-query

전역 적용을 위해 Provider 사용. App.jsx 또는 main.jsx(index.jsx)에 세팅 권장.

// main.jsx

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

◼ useQuery

useQuery는 데이터 조회 훅. queryKey와 queryFn을 인자로 전달해 사용. 데이터, 로딩 상태, 에러 상태를 반환하므로 모든 상태를 직접 세팅할 필요 없음.

기본 사용법

fetchTodos와 같은 비동기 함수는 별도 파일 분리 권장. 현재는 학습 목적상 한 파일에서 진행.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const App = () => {
  const fetchTodos = async () => {
    const response = await axios.get("http://localhost:4000/todos");
    return response.data;
  };

  const {
    data: todos,
    isPending,
    isError,
  } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });

  if (isPending) {
    return <div>로딩중입니다...</div>;
  }

  if (isError) {
    return <div>데이터 조회 중 오류가 발생했습니다.</div>;
  }

  return (
    <div>
      <h3>TanStack Query</h3>
      <ul>
        {todos.map((todo) => {
          return (
            <li
              key={todo.id}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                backgroundColor: "aliceblue",
              }}
            >
              <h4>{todo.title}</h4>
              <p>{todo.isDone ? "Done" : "Not Done"}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

테스트 환경(db.json 파일)

{
  "todos": [
    {
      "id": "1715926482394",
      "title": "리액트 공부하기",
      "isDone": true
    },
    {
      "id": "1715926492887",
      "title": "Node.js 공부하기",
      "isDone": true
    },
    {
      "id": "1715926495834",
      "title": "영화보기",
      "isDone": false
    }
  ]
}

◼ useMutation

useMutation은 생성(Create), 수정(Update), 삭제(Delete) 작업 전용 훅. CUD 비동기 작업을 처리할 수 있음. 성공 또는 실패 후 추가 작업을 실행할 수 있음. 작업 완료 후 관련 쿼리를 무효화할 수 있으며, 최신 데이터 유지에 필수적임.

기본 사용법

addTodo도 별도 파일 분리 권장. 현재는 학습 목적상 한 파일에서 진행.

import { useMutation, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";

const App = () => {
  const [todoItem, setTodoItem] = useState("");

  const fetchTodos = async () => {
    const response = await axios.get("http://localhost:4000/todos");
    return response.data;
  };

  const addTodo = async (newTodo) => {
    await axios.post("http://localhost:4000/todos", newTodo);
  };

  const {
    data: todos,
    isPending,
    isError,
  } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });

  const { mutate } = useMutation({
    mutationFn: addTodo,
  });

  if (isPending) {
    return <div>로딩중입니다...</div>;
  }

  if (isError) {
    return <div>데이터 조회 중 오류가 발생했습니다.</div>;
  }

  return (
    <div>
      <h3>TanStack Query</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();

          const newTodoObj = { title: todoItem, isDone: false };

          // useMutation 로직 필요
          mutate(newTodoObj);
        }}
      >
        <input
          type="text"
          value={todoItem}
          onChange={(e) => setTodoItem(e.target.value)}
        />
        <button>추가</button>
      </form>
      <ul>
        {todos.map((todo) => {
          return (
            <li
              key={todo.id}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                backgroundColor: "aliceblue",
              }}
            >
              <h4>{todo.title}</h4>
              <p>{todo.isDone ? "Done" : "Not Done"}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

◼ invalidateQueries

invalidateQueries는 특정 쿼리를 무효화하여 해당 데이터를 다시 패칭하도록 만드는 함수. 주로 useMutation과 함께 사용하며, 서버 데이터가 변경된 이후 관련 쿼리를 다시 가져오는 역할을 함. 이를 통해 화면에 표시되는 데이터가 항상 최신 상태로 유지될 수 있도록 도와줌. 예를 들어, 새로운 할 일을 추가한 뒤 invalidateQueries를 실행하면 기존의 할 일 목록을 다시 조회하게 되고, 추가된 항목이 포함된 최신 목록이 화면에 반영됨.

기본 사용법

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";

const App = () => {
  const queryClient = useQueryClient();

  const [todoItem, setTodoItem] = useState("");

  const fetchTodos = async () => {
    const response = await axios.get("http://localhost:4000/todos");
    return response.data;
  };

  const addTodo = async (newTodo) => {
    await axios.post("http://localhost:4000/todos", newTodo);
  };

  const {
    data: todos,
    isPending,
    isError,
  } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });

  const { mutate } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      // alert("데이터 삽입이 성공했습니다.");
      // ✅ invalidateQueries 추가
      queryClient.invalidateQueries(["todos"]);
    },
  });

  if (isPending) {
    return <div>로딩중입니다...</div>;
  }

  if (isError) {
    return <div>데이터 조회 중 오류가 발생했습니다.</div>;
  }

  return (
    <div>
      <h3>TanStack Query</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();

          const newTodoObj = { title: todoItem, isDone: false };

          // useMutation 로직 필요
          mutate(newTodoObj);
        }}
      >
        <input
          type="text"
          value={todoItem}
          onChange={(e) => setTodoItem(e.target.value)}
        />
        <button>추가</button>
      </form>
      <ul>
        {todos.map((todo) => {
          return (
            <li
              key={todo.id}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                backgroundColor: "aliceblue",
              }}
            >
              <h4>{todo.title}</h4>
              <p>{todo.isDone ? "Done" : "Not Done"}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

useMutation만 사용하면 “서버 변경”까지만 처리 가능(화면은 그대로). invalidateQueries까지 추가해야 “UI 동기화”까지 완료됨.

Custom Instance의 필요성

지금까지는 아래와 같이 데이터를 통신함.

const data = await axios.get("http://localhost:4000/");

별도의 설정 없이 기본 Axios 그대로 사용한 방식임. 하지만 애플리케이션 규모가 커질수록 동일한 설정을 반복 작성하게 됨. baseURL, 공통 헤더 등을 매 요청마다 작성해야 하는 비효율 발생.

이 문제를 해결하기 위해 Axios 인스턴스 사용 가능. 공통 설정을 한 곳에서 관리 가능.

Custom Instance 생성

Axios 인스턴스를 사용하면 설정 중앙 관리 가능. 예를 들어 baseURL 설정 시, 서버 주소가 변경되더라도 한 파일만 수정하면 전체 요청에 반영 가능.

// src/axios/api.js

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체.
// https://axios-http.com/docs/req_config 참고
const api = axios.create({
  baseURL: "http://localhost:4000",
});

export default api;

이제 생성한 instance 사용하여 HTTP 요청 전송 가능.

// App.jsx

import "./App.css";
import { useEffect } from "react";
import api from "./axios/api";

function App() {
  useEffect(() => {
    api
      .get("/cafe")
      .then((res) => {
        console.log("결과 => ", res.data);
      })
      .catch((err) => {
        console.log("오류가 발생하였습니다!");
      });
  }, []);

  return <div>axios 예제입니다.</div>;
}

export default App;

서버 주소 변경 시 api.js만 수정하면 전체 요청에 반영 가능. 유지보수 용이.

◼ Interceptor의 개념과 필요성

Interceptor의 필요성

Interceptor는 HTTP 요청과 응답을 가로채는 기능 제공. 요청 전, 응답 전 특정 로직 실행 가능.

동작 시점은 다음과 같음.

1. 요청(request) 전송 직전(요청을 보내기 전, 요청이 출발하기 전)
2. 응답(response) 처리 직전(then(성공), catch(실패) 실행 전)

즉, 요청/응답 흐름 중간에 개입 가능.

대표 활용 예시는 다음과 같음.

• 공통 요청 헤더 추가
• 인증 관리(인증 토큰 자동 삽입)
• 로그 처리(로그 관련 로직 삽입)
• 공통 에러 핸들링

공통 로직을 한 곳에서 관리 가능. 중복 코드 제거 가능.

Interceptor 적용

요청 및 응답 시 특정 로직 실행 예시.

// src/axios/api.js

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류.");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    // 정상 응답 시
    console.log("인터셉트 응답 성공!");
    return response;
  },
  function (error) {
      // 응답 에러 발생 시
    console.log("인터셉트 응답 실패.");
    return Promise.reject(error);
  }
);

export default instance;

브라우저 콘솔에서 요청/응답 중간에 인터셉터 실행 로그 확인 가능.

요청실패 상황 구성

// src/axios/api.js

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
  timeout: 1, // 1ms
});

export default instance;

타임아웃 설정을 통해 강제로 실패 상황 구성. 이렇게 설정하면 1ms의 짧은 시간 안에 서버 응답을 받지 못해 오류가 발생. 요청은 성공했지만 응답을 받지 못한 로그를 보면 타임아웃이 초과되었음을 알 수 있음.

요청 주소를 잘못 입력하거나 json-server를 종료한 뒤 테스트해볼 수도 있음.

axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트. 즉, http를 이용해 서버와 통신할 때 사용하는 패키지.

◼ 설치

npm install axios

◼ 설정

db.json 설정

프로젝트 root 경로에 db.json 파일 생성 후 아래 json 코드 삽입.

{
  "todos": [
    {
      "id": "1",
      "title": "react"
    }
  ]
}

.env 설정

민감 정보는 .env 파일로 관리.

Vite로 만든 프로젝트

// .env

VITE_원하는이름 = 123
VITE_EXAMPLE_SERVER_URL = http://localhost:4000
VITE_API_KEY = test1234
VITE_SECRET_KEY = abcdefg

// src/main.js 또는 src/App.jsx

const apiKey = import.meta.env.VITE_API_KEY;
console.log('API Key:', apiKey);

CRA로 만든 프로젝트

// .env

REACT_APP_원하는이름 = 123
REACT_APP_EXAMPLE_SERVER_URL = http://localhost:4000
REACT_APP_API_KEY = test123
REACT_APP_SECRET_KEY = abcdefg

// src/index.js 또는 src/App.jsx

const apiKey = process.env.REACT_APP_API_KEY;
console.log('API Key:', apiKey);

.gitignore 설정

원격 환경(github)에 보안 정보는 포함되지 않도록(git repository에 포함되지 않도록) 관리 필요. root 경로에 .gitignore 파일 생성 후 .env(환경 설정 파일) 추가.

파일경로

├json_folder
│├node_modules
│├public
│└src
├.eslintrc.cjs
├.gitignore
├index.html
├package.json
├README.md
└vite.config.js

.gitignore 파일

# Node.js 관련 파일
/node_modules

# 환경 설정 파일
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# 빌드 출력 파일
/build
/dist

# 기타
.DS_Store

◼ GET

서버 데이터 조회 시 사용.

// GET(url은 매개변수, 대괄호([]) 안의 값은 선택사항.
axios.get(url[, config]) 

url에는 서버의 url. config에는 설정추가 가능. 세부옵션은 axios 공식문서에서 확인.

🔗 Axios config 공식문서

json-server API 명세서 확인

Axios는 HTTP 요청을 도와주는 도구일 뿐임. 어떤 방식으로 요청해야 하는지는 API 명세서 기준으로 결정. 예를 들어 GET 요청을 할 때 path variable 방식일지 query 방식일지는 API를 설계한 사람이 정의한 규칙을 따름.

json-server의 공식문서를 보면 전체 정보나 상세 정보는 path variable로 url 작성.

GET /posts
GET /posts/1

filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 보내라고 명시.

GET /posts?title=json-server&author=typicode 
GET /posts?id=1&id=2
GET /comments?author.name=typicode

예시

json-server에 데이터를 axios로 fetching 후 useState로 관리하는 로직 작성.

// src/App.js

import React, { useEffect, useState } from "react";
import axios from "axios"; // axios import

const App = () => {
  const [todos, setTodos] = useState(null);

    // axios를 통해서 get 요청을 하는 함수를 생성.
    // 비동기처리를 해야하므로 async/await 구문을 통해서 처리.
  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set.
  };

    // 생성한 함수를 컴포넌트가 mount된 후 실행하기 위해 useEffect를 사용.
  useEffect(() => {
        // effect 구문에 생성한 함수를 넣어 실행.
    fetchTodos();
  }, []);

    // data fetching이 정상적으로 되었는지 콘솔을 통해 확인.
  console.log(todos);
  return <div>App</div>;
};

export default App;

콘솔

null
--------------------------------------------
▼ [{...}] 1
    ► 0: {id: '1', title: 'react'}
        Length: 1
    ► [[Prototype]]: Array(0)

useEffect에서 최초 1회 실행. axios로 데이터 요청. 데이터를 state에 저장. 콘솔에서 null → 배열 데이터 변화 확인 가능.

◼ POST

서버 데이터 추가 시 사용.

axios.post(url[, data[, config]])

POST 요청 로직은 BE 개발자가 구현하므로 데이터 추가 외의 용도로도 사용할 수 있음. 보통 body에 데이터를 담아 전송.

예시

GET 예시에 POST 코드 추가. input 값 입력 → 버튼 클릭 → onSubmitHandler 실행 → todo를 body에 담아 서버로 전송.

// src/App.jsx

import React, { useEffect, useState } from "react";
import axios from "axios"; // axios import

const App = () => {
    // ✅ S: 추가코드
  // 새롭게 생성하는 todo를 관리하는 state.
  const [todo, setTodo] = useState({
    title: "",
  });
    // ✅ E: 추가코드

  const [todos, setTodos] = useState(null);

  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);
  };

    // ✅ S: 추가코드
    // axios는 내부적으로 JSON.stringify 자동 처리.
  const onSubmitHandler = async(todo) => {
    await axios.post("http://localhost:4000/todos", todo);
  };

    // fetch 사용 시 직접 JSON.stringify 필요.
  // await fetch("http://localhost:4000/todos", {
  //   method: "POST",
  //   headers: {
  //     "Content-Type": "application/json",
  //   },
  //   body: JSON.stringify(todo),
  // });
     // ✅ E: 추가코드

  useEffect(() => {
    fetchTodos();
  }, []);

  return (
         {/* ✅ S: 추가코드 */}
    <>
      <form
        onSubmit={(e) => {
                    // submit했을 때 브라우저의 새로고침을 방지. 
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
        <input
          type="text"
          onChange={(ev) => {
            const { value } = ev.target;
            setTodo({
              ...todo,
              title: value,
            });
          }}
        />
        <button>추가하기</button>
      </form>
      <div>
        {todos?.map((todo) => (
          <div key={todo.id}>{todo.title}</div>
        ))}
      </div>
    </>
         {/* ✅ E: 추가코드 */}
  );
};

export default App;

새로고침 없이 화면 반영 방법

POST 요청을 마치면 새로고침 해야만 새로운 정보가 표시됨. POST 요청은 서버 데이터만 변경함. React 화면은 state가 변경되어야만 리렌더링 발생함. 현재 코드에서는 POST 요청 전송 → 서버 DB에는 데이터 저장 → 하지만 todos state는 그대로 유지. 즉, 클라이언트 state와 서버 데이터가 동기화되지 않은 상태.

// (...중략)
 const onSubmitHandler = async(todo) => {
   await axios.post("http://localhost:4000/todos", todo);

    setTodos([...todos, todo]);
 };

새로고침 없이 업데이트하려면 기존 배열 복사 → 새 todo 추가 → state 변경 발생 → 리렌더링 실행 → 화면 즉시 반영 가능.

네트워크 탭 확인

개발 시 Network 탭 확인 필요. 문제가 생겼을 때 이 정보를 통해 디버깅을 할 수 있음.

headers

• Request URL : 의도한 URL로 POST 요청을 보냈는지 확인.
• Request Method : POST 메서드 사용여부 확인.
• Status Code : 201이면 정상 생성. status code는 자동으로 생성되지 않음. BE 개발자가 정의. 만약 BE 개발자가 구현해 두지 않았으면 문맥과 다른 status code가 브라우저에 표시될 수 있음.

payload

• Payload : 전송한 body 확인 가능

response

• Response : 서버 응답 데이터 확인 가능. response는 자동으로 생성되지 않음. FE 개발자가 BE 개발자에게 요청한 내용을 BE에서 직접 구현해야 응답 값이 생김. json-server는 POST 요청 시 클라이언트가 보낸 body를 그대로 응답하도록 만들어진 패키지.

◼ DELETE

저장된 데이터 삭제 시 사용.

axios.delete(url[, config])

예시

GET, POST에 이어서 코드 추가. 삭제 버튼 추가 → onClickDeleteButtonHandler 구현 → 해당 id로 DELETE 요청 전송. 성공 후 새로고침 시 데이터 삭제 확인 가능.

// src/App.jsx

import React, { useEffect, useState } from "react";
import axios from "axios"; 

const App = () => {
  const [todo, setTodo] = useState({
    title: "",
  });

  const [todos, setTodos] = useState(null);

  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data); 
  };

  const onSubmitHandler = (todo) => {
    axios.post("http://localhost:4000/todos", todo);
  };

    // ✅ S: 추가코드
    // 새롭게 추가한 삭제 버튼 이벤트 핸들러 
  const onClickDeleteButtonHandler = (todoId) => {
    axios.delete(`http://localhost:4000/todos/${todoId}`);
  };
  // ✅ E: 추가코드

  useEffect(() => {
    fetchTodos();
  }, []);

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
        <input
          type="text"
          onChange={(ev) => {
            const { value } = ev.target;
            setTodo({
              ...todo,
              title: value,
            });
          }}
        />
        <button>추가하기</button>
      </form>
      <div>
        {todos?.map((todo) => (
          <div key={todo.id}>
            {todo.title}

                      {/* ✅ S: 추가코드 */}
            <button
              type="button"
              onClick={() => onClickDeleteButtonHandler(todo.id)}
            >
              삭제하기
            </button>
            {/* ✅ E: 추가코드 */}
          </div>
        ))}
      </div>
    </>
  );
};

export default App;

◼ PATCH

데이터 수정 시 사용.

axios.patch(url[, data[, config]])

HTTP 관례상 수정은 PATCH 또는 PUT 사용. 필수 규칙은 아니지만 관례적으로 사용.

예시

GET, POST, DELETE에 이어서 코드 추가. PUT은 PATCH와 원리가 같아 생략. Todo 수정에 필요한 데이터는 수정대상 id, 수정할 값.

보통 수정 기능을 만들 때 직접 id를 입력받아 처리하는 방식은 거의 없음. 이번 예시에서는 아주 간단한 코드로 기능을 구현하기 때문에 이와 같이 처리.

// src/App.jsx

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [todo, setTodo] = useState({
    title: "",
  });
  const [todos, setTodos] = useState(null);

  // patch에서 사용할 id, 수정값의 state를 추가.
  const [targetId, setTargetId] = useState(null);
  const [editTodo, setEditTodo] = useState({
    title: "",
  });

  const fetchTodos = async () => {
    const { data } = await axios.get("http://localhost:4000/todos");
    setTodos(data);
  };

  const onSubmitHandler = (todo) => {
    axios.post("http://localhost:4000/todos", todo);
  };

  const onClickDeleteButtonHandler = (todoId) => {
    axios.delete(`http://localhost:4000/todos/${todoId}`);
  };

    // ✅ S: 추가코드
  // 수정버튼 이벤트 핸들러 추가
  const onClickEditButtonHandler = (todoId, edit) => {
    axios.patch(`http://localhost:4000/todos/${todoId}`, edit);
  };
  // ✅ E: 추가코드

  useEffect(() => {
    fetchTodos();
  }, []);

  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          onSubmitHandler(todo);
        }}
      >
          {/* ✅ S: 추가코드 */}
        {/* 수정기능에 필요한 id, 수정값 input 2개와 수정하기 버튼을 추가 */}
        <div>
          <input
            type="text"
            placeholder="수정하고싶은 Todo ID"
            onChange={(ev) => {
              setTargetId(ev.target.value);
            }}
          />
          <input
            type="text"
            placeholder="수정값 입력"
            onChange={(ev) => {
              setEditTodo({
                ...editTodo,
                title: ev.target.value,
              });
            }}
          />
          <button
                        // type='button' 을 추가해야 form의 영향에서 벗어남
            type="button"
            onClick={() => onClickEditButtonHandler(targetId, editTodo)}
          >
            수정하기
          </button>
        </div>
        {/* ✅ E: 추가코드 */}
        <input
          type="text"
          onChange={(ev) => {
            const { value } = ev.target;
            setTodo({
              ...todo,
              title: value,
            });
          }}
        />
        <button>추가하기</button>
      </form>
      <div>
        {todos?.map((todo) => (
          <div key={todo.id}>
              {/* ✅ S: 추가코드 */}
                        {/* todo의 아이디를 화면에 표시 */}
            {todo.id} :{todo.title}
            {/* ✅ E: 추가코드 */}
            <button
              type="button"
              onClick={() => onClickDeleteButtonHandler(todo.id)}
            >
              삭제하기
            </button>
          </div>
        ))}
      </div>
    </>
  );
};

export default App;

◼ 장점

fetch와 axios는 모두 HTTP 요청(GET, POST…)을 처리하기 위한 JavaScript 라이브러리. React에서는 axios를 선호하는데 다음과 같은 장점 때문임.

1. 기본 설정 및 인터셉터 지원

기본 설정 : axios는 기본 설정을 정의해 모든 요청에 공통 설정을 적용할 수 있음.

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

인터셉터 : 요청, 응답을 가로채 전처리나 후처리를 할 수 있음. 이를 통해 인증 토큰을 자동으로 추가하거나 오류를 일괄 처리할 수 있음.

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
}, error => {
  return Promise.reject(error);
});

2. 오류 처리 방식

에러 핸들링 : axios는 4xx, 5xx 상태 코드를 자동으로 catch에서 처리할 수 있어 일관된 오류 처리가 가능. fetch는 네트워크 오류만 catch에서 처리되며, 4xx, 5xx 오류는 then에서 처리해야 함.

axios.get('/user/12345')
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      // 서버가 4xx, 5xx 응답을 반환
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 요청이 전송되었지만 응답이 없음
      console.log(error.request);
    } else {
      // 요청 설정 중에 발생한 오류
      console.log('Error', error.message);
    }
  });

3. 브라우저 호환성

구형 브라우저 지원 : axios는 구형 브라우저 대응 용이. fetch는 일부 환경에서 폴리필 필요.

4. 문법 간결성

간결한 문법: axios는 간결하고 직관적인 문법 사용. fetch 대비 코드 간결성 확보 가능.

axios.get('/user')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

json-server는 간단한 DB와 API 서버 생성 패키지. 백엔드에서 실제 DB와 API Server가 구축되기 전까지, 프론트엔드 개발에 임시로 사용할 mock data 생성 목적으로 사용. json-server 사용 시 BE(Backend) 작업을 기다리지 않고 FE(Frontend) 로직과 화면 구현 가능. 협업 효율 향상 가능.

Supabase, Firebase 쓰면 되는 것 아닌가?(feat. RESTful API)

• json-server는 RESTful API 기본 개념 학습 지원 도구. 빠른 실습 가능. API 설계 흐름 이해 가능. CRUD 구조 체험 가능.
• Supabase, Firebase는 실제 서비스 구축에 적합한 BaaS임. 백엔드 없이 운영 환경 구성 가능.
• 학습 목적, REST 구조 이해 목적이라면 json-server가 더 적합한 선택. 목적에 따라 json-server와 BaaS 선택 사용.

◼ 설치

npm install json-server
npm install json-server -D // 개발 환경인 경우, -D 옵션을 함께 입력.

◼ 사용

실행

json-server가 간단한 패키지이긴 하나, 간이 백엔드 서버임. 그래서 React와는 별개로 따로 실행 필요. 즉, React도 실행해야 하고 json-server도 실행해야 함. 그래야 React와 json-server가 서로 통신 할 수 있음.

db.json 파일 생성

프로젝트 루트 경로에 db.json파일 생성.

├json_folder
│├node_modules
│├public
│└src
├.gitignore
├db.json
├package.json
└README.md

아래와 같이 기본 데이터 작성.

{
  "todos": []
}

서버 실행

React 실행 터미널과 별도로 새 터미널 창에서 실행 필요.

yarn json-server db.json --port 4000

명령어의 뜻은 db.json을 데이터베이스로 사용하고, 4000번 포트에서 서버를 실행하겠다는 뜻.

db.json 수정 후 브라우저 확인

데스트용 데이터 추가.

{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

브라우저에서 아래 주소 입력.

http://localhost:4000/todos

터미널에서는 아래와 같이 로그 출력.

Resources
http://localhost:3001/todos

Home
http://localhost:3001

GET /todos 200 11.036ms - 101

브라우저 주소에 URL을 입력한다는 것은 GET 요청을 했다는 것. API 서버에 GET 요청을 한 셈. 서버의 터미널에서는 “누군가 GET을 했어” 라고 알려줌.

HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용. REST API는 이러한 HTTP 메서드를 사용해 CRUD 작업 수행 가능.

◼ GET

서버에 데이터 요청 시 사용. 요청 데이터는 URL에 포함되어 전송. 주로 데이터 조회에 사용.

REST API에서 사용 : 특정 리소스 조회 시 사용.

◼ POST

서버에 데이터 제출 시 사용. 요청 데이터는 요청 본문(body)에 포함되어 전송. 주로 새로운 데이터 생성 또는 제출에 사용.

REST API에서의 사용 : 새로운 리소스 생성 시 사용.

◼ PUT, PATCH

서버의 데이터 업데이트 시 사용. 요청 데이터는 요청 본문(body)에 포함되어 전송. 주로 기존 데이터 수정시 사용(PUT:리소스 전체 수정, PATCH:리소스 일부 수정)

REST API에서의 사용: 기존 리소스 수정 시 사용.

◼ DELETE

서버의 데이터 삭제 시 사용.

REST API에서의 사용: 특정 리소스 삭제 시 사용.

◼ RESTful 원칙 기반 API 명세서

기본 URL

https://api.example.com

엔드포인트

응답/요청

Content-Type: application/json란? Content-Type: application/json은 HTTP 요청 또는 응답 본문 데이터 형식을 명시하는 헤더. 본문 데이터가 JSON 형식임을 서버 또는 클라이언트에 알리는 역할 수행.

POST /posts

새로운 게시글 생성.

• URL: /posts

• Method: POST

• Headers:

  • Content-Type: application/json

• Request Body

    {
      "title": "string",
      "body": "string",
      "userId": "integer"
    }

• Response:

  • 201 Created: 생성 성공.

      {
        "id": "integer",
        "title": "string",
        "body": "string",
        "userId": "integer"
      }

  • 400 Bad Request: 요청 본문 오류.

GET /posts

모든 게시글 조회 요청.

• URL: /posts

• Method: GET

• Headers: 없음

• Response:

  • 200 OK: 조회 성공.

      [
        {
          "id": "integer",
          "title": "string",
          "body": "string",
          "userId": "integer"
        },
        ...
      ]

GET /posts/{id}

특정 게시글 조회.

• URL: /posts/{id}

• Method: GET

• Headers: 없음

• Response:

  • 200 OK: 조회 성공.

      {
        "id": "integer",
        "title": "string",
        "body": "string",
        "userId": "integer"
      }

  • 404 Not Found: 해당 ID 데이터(게시글) 없음.

PUT /posts/{id}

특정 게시글 전체 수정(전체 업데이트)

• URL: /posts/{id}

• Method: PUT

• Headers:

  • Content-Type: application/json

• Request Body:

    {
      "title": "string",
      "body": "string",
      "userId": "integer"
    }

• Response:

  • 200 OK: 수정 성공.

      {
        "id": "integer",
        "title": "string",
        "body": "string",
        "userId": "integer"
      }

  • 400 Bad Request: 요청 본문 오류.

  • 404 Not Found: 해당 ID 데이터(게시글) 없음.

PATCH /posts/{id}

특정 게시글 일부 수정.

• URL: /posts/{id}

• Method: PATCH

• Headers:

  • Content-Type: application/json

• Request Body (모든 필드가 선택 사항):

    {
      "title": "string",
      "body": "string",
      "userId": "integer"
    }

• Response:

  • 200 OK: 수정 성공.

      {
        "id": "integer",
        "title": "string",
        "body": "string",
        "userId": "integer"
      }

  • 400 Bad Request: 요청 본문 오류.

  • 404 Not Found: 해당 ID 데이터(게시글) 없음.

DELETE /posts/{id}

특정 게시글 삭제.

• URL: /posts/{id}
• Method: DELETE
• Headers: 없음
• Response:
  • 200 OK: 삭제 성공.
  • 404 Not Found: 해당 ID 데이터(게시글) 없음.

◼ React에서 HTTP 요청 예시

React에서 HTTP 요청을 보내는 대표적인 방법은 fetch API 또는 axios 라이브러리 사용하는 것. 아래는 fetch 사용 예시.

GET 요청 예시(데이터 요청)

import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // get 요청 시, fetch는 method를 명시하지 않아도 됨.
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts/1"
        );
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return <div>{data ? <div>{data.title}</div> : <div>Loading...</div>}</div>;
}

export default App;

method 미작성 시 기본값은 GET. response.json() 사용하여 JSON 데이터 파싱(문자열 → 객체 변환 과정 필요) 가능.

POST 요청 예시(데이터 생성)

import React, { useState } from "react";

function App() {
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");
  const [response, setResponse] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          title: title,
          body: body,
          userId: 1,
        }),
      });
      const result = await res.json();
      setResponse(result);
    } catch (error) {
      console.error("Error creating data:", error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Title"
        />
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder="Body"
        />
        <button type="submit">Create Post</button>
      </form>
      {response && <div>Created Post ID: {response.id}</div>}
    </div>
  );
}

export default App;

method 명시 필수. headers에 Content-Type 설정 필요. body는 JSON.stringify 사용하여 문자열 변환 후 전송.

HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받기 위한 프로토콜(데이터 통신을 원활하게 하기 위한 통신 규약) 클라이언트와 서버 간의 요청과 응답을 정의.

◼ 개념

HTTP는 클라이언트-서버 모델을 기반으로 동작. 클라이언트가 요청을 보내면 서버가 응답을 반환. 요청과 응답은 텍스트 기반 메시지로 구성됨.

◼ 특징

• 무상태성 HTTP는 상태 저장하지 않음. 각 요청은 독립적으로 처리. 이전 요청 정보 기억하지 않음. 이것을 무상태(stateless)라고 함.
• 확장성 HTTP는 다양한 확장 헤더를 추가하여 기능 확장 가능.
• 유연성 다양한 데이터 형식 전송 가능. 텍스트, 이미지, 비디오 등 다양한 형식 지원.

◼ 메시지 구조

HTTP 메시지는 요청(Request)과 응답(Response)으로 구성됨.

요청메시지

클라이언트가 서버에 데이터 요청 시 사용.

• 요청 라인 메서드(GET, POST, 등), URL, HTTP 버전
• 헤더(Header) 요청의 추가 정보(메타데이터)를 담고 있어요. 브라우저 정보, 인증 정보 등.
• 본문(Body) 선택적 요소. 주로 POST 요청에서 사용.

예시

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html

요청 헤더와 인증 정보

요청 헤더에 인증 정보 포함 이유

서버는 요청을 보낸 사용자가 누구인지 확인이 필요함. 이 과정을 인증(Authentication)이라고 함. 인증을 통해 사용자 식별을 하고 사용자에게 권한이 있는지 확인함.

요청 헤더에 인증 정보 포함 방법

요청 헤더는 요청에 대한 추가 정보 전달 용도. 헤더에 인증 정보를 포함해서 서버가 요청을 받았을 때 해당 정보를 통해 사용자 인증 처리.

GET /protected-resource HTTP/1.1
Host: example.com
**Authorization: Bearer <Access-Token>**

Access-Token은 로그인한 사용자임을 증명(로그인했음을 알려주는 정도)하는 키 역할 수행함.

응답 메시지

서버가 클라이언트 요청에 대한 결과 반환 시 사용.

• 상태 라인 HTTP 버전, 상태코드(200, 404, 등), 상태 메시지
• 헤더(Header) 응답에 대한 추가 정보 전달 역할 수행. 콘텐츠 타입, 데이터 길이 등 포함 가능.
• 본문(Body) 선택적 요소. 주로 응답 데이터.

예시

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1354

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

◼ 상태코드

HTTP 상태코드는 서버가 클라이언트 요청 처리 결과를 나타내는 값.세 자리 숫자로 구성. 첫 번째 자리 숫자를 기준으로 의미 구분 가능.

1xx : 정보

• 100 Continue

  요청 일부를 서버가 받았음. 나머지 계속 보내라는 의미.

2xx : 성공

• 200 OK

  요청 정상 처리 완료.

• 201 Created

  요청 성공 및 새로운 리소스 생성 완료.

3xx : 리다이렉션

• 301 Moved Permanently 요청 리소스가 새로운 URL로 영구 이동.

• 302 Found

  요청 리소스가 새로운 URL로 임시 이동.

4xx : 클라이언트 오류

• 400 Bad Request

  잘못된 요청.

• 401 Unauthorized

  인증 필요 상태.

• 404 Not Found

  요청한 리소스를 찾을 수 없음.

5xx : 서버 오류

• 500 Internal Server Error

  서버가 요청을 처리하는 동안 오류 발생.

• 502 Bad Gateway

  서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받음.

웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반 백엔드 서비스. BaaS를 사용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도 됨. 그 결과 프론트엔드 개발에 더 집중 가능함.

웹 애플리케이션의 필수 구성 요소

웹 애플리케이션은 크게 세 부분으로 구성.

• 프론트엔드 사용자가 상호작용하는 영역. 화면에 보이는 모든 시각적 요소를 담당.
• 백엔드 서버에서 데이터 처리, 사용자 관리, 로직 처리 담당. 사용자에게 직접 보이지 않는 영역.
• 데이터베이스 사용자 정보, 게시글 등 데이터를 저장하는 공간. 필요할 때 데이터를 조회하는 역할 수행.

BaaS 필요 이유

프론트엔드 개발에 집중하고 싶어도 서버 설정, 보안, 인증까지 직접 처리해야 한다면 부담 큼. 서버 구축 없이 필요한 기능을 클라우드에서 바로 사용 가능함.

인기 있는 BaaS 플랫폼

• Firebase Google에서 운영하는 BaaS 플랫폼 실시간 데이터베이스, 인증, 애널리틱스 기능 제공.
• Parse 오픈 소스 기반 BaaS. 커스터마이징 자유도가 높음.
• AWS Amplify AWS 인프라 기반 BaaS. 복잡한 백엔드 작업을 간편하게 처리 가능.

장단점

장점

• 개발 속도 향상 백엔드를 직접 구현하지 않아도 되고 이미 준비된 기능을 바로 사용 가능해 개발시간 단축가능.
• 유지보수 간편 서버 관리 부담이 감소해 운영과 유지보수 효율 증가.
• 자동 확장 사용자가 늘어나도 자동으로 스케일업 지원하니 서버 부하 걱정 없이 안정적인 서비스 제공 가능.

단점

• 유연성 부족 제공 기능 외 요구사항 대응 어려움.
• 비용 예측 어려움 사용량 증가 시 비용 상승 가능성 있음.
• 플랫폼 의존성 한 플랫폼에 의존하면 나중에 다른 서비스로의 이전이 어려울 수 있음.

◼ Supabase

Supabase는 PostgreSQL 기반의 오픈 소스 BaaS 플랫폼. 관계형 데이터를 기반으로 하면서 실시간 데이터 변경 감지 기능 제공. 관계형 데이터베이스 사용 시 데이터 간 관계 표현 용이함. 데이터 변경 시 UI가 자동으로 반영됨.

사용이유

1. 관계형 데이터 모델과 실무 역량

Supabase는 관계형 데이터베이스를 사용함. 실무에서는 데이터 일관성과 정확성이 중요하며 대부분의 기업 시스템은 관계형 데이터베이스 사용함.

-- 주문과 연관된 고객 정보를 함께 조회
SELECT orders.order_id, customers.name
FROM orders
JOIN customers ON orders.customer_id = customers.id
WHERE customers.region = 'Asia';

2. 실시간 기능의 실무적 활용

Firebase도 실시간 기능 제공하지만 Supabase는 관계형 데이터베이스의 장점과 결합하여 제공. 실시간 데이터 반영은 현대 웹 애플리케이션에서 필수 요소. 예를 들어 주식 거래, 실시간 대시보드, 협업 도구 등 실시간 데이터 처리가 중요한 어플리케이션 개발에 매우 유용.

// 제품 가격 변경을 실시간으로 구독하는 코드
import { supabase } from './supabaseClient';

function subscribeToPriceChanges() {
  supabase
    .from('products')
    .on('UPDATE', payload => {
      alert(`Price updated! New price: ${payload.new.price}`);
    })
    .subscribe();
}

◼ React에서 사용하기

설치 및 세팅

npm install @supabase/supabase-js

import { createClient } from "@supabase/supabase-js";

// project url
const SUPABASE_API_URL = "YOUR_SUPABASE_API_URL";

// anon public key
const SUPABASE_API_KEY = "YOUR_SUPABASE_API_KEY";

const supabase = createClient(SUPABASE_API_URL, SUPABASE_API_KEY);
export default supabase;

설치 후 Supabase 클라이언트 초기화하는 코드 작성. 이를 위해 Supabase 프로젝트의 URL과 API 키가 필요함.

데이터베이스 입력

Supabase 콘솔에서 직접 데이터베이스에 데이터 입력 가능. 웹사이트 프로젝트 대시보드에서 Table Editor를 사용해 행 추가 가능.

데이터베이스 읽기

useEffect와 useState를 사용하여 데이터 조회 처리. 조회된 데이터 화면에 출력.

// src/App.jsx

import "./App.css";
import FetchData from "./components/FetchData";

function App() {
  return (
    <>
      <h1>Supabase</h1>
      <FetchData />
    </>
  );
}

export default App;

// src/components/FetchData.jsx

import { useEffect, useState } from "react";
import supabase from "../supabaseClient";

const FetchData = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const { data, error } = await supabase.from("NACAMP_SAMPLE").select("*");
      if (error) {
        console.log("error => ", error);
      } else {
        console.log("data => ", data);
        setUsers(data);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h3>유저정보</h3>
      {users.map((user) => {
        return (
          <div
            key={user.id}
            style={{
              border: "1px solid black",
            }}
          >
            <h5>아이디 : {user.id}</h5>
            <h5>이름 : {user.name}</h5>
            <h5>나이 : {user.age}</h5>
            <h5>주소 : {user.address}</h5>
          </div>
        );
      })}
    </div>
  );
};

export default FetchData;

데이터베이스 쓰기

입력 폼을 통해 데이터 추가 가능. insert 메서드 사용.

// src/App.jsx

import "./App.css";
import AddData from "./components/AddData";
import FetchData from "./components/FetchData";

function App() {
  return (
    <>
      <h1>Supabase</h1>
      <FetchData />
      <AddData />
    </>
  );
}

export default App;

// src/components/AddData.jsx

import React, { useState } from "react";
import supabase from "../supabaseClient";

const AddData = () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState("");

  const handleAdd = async () => {
    const { data, error } = await supabase.from("NACAMP_SAMPLE").insert({
      name,
      age,
      address,
    });

    if (error) {
      console.log("error => ", error);
    } else {
      alert("데이터가 정상적으로 입력됐습니다.");
      console.log("data => ", data);
    }
  };

  return (
    <div
      style={{
        border: "1px solid red",
      }}
    >
      <h2>데이터 추가 로직</h2>
      <div>
        이름 :{" "}
        <input
          type="text"
          value={name}
          onChange={(e) => {
            setName(e.target.value);
          }}
        />
      </div>
      <div>
        나이 :{" "}
        <input
          type="number"
          value={age}
          onChange={(e) => {
            setAge(e.target.value);
          }}
        />
      </div>
      <div>
        주소 :{" "}
        <input
          type="text"
          value={address}
          onChange={(e) => {
            setAddress(e.target.value);
          }}
        />
      </div>
      <button onClick={handleAdd}>등록</button>
    </div>
  );
};

export default AddData;

데이터베이스 수정

특정 ID 기준 데이터 수정 가능. update와 eq 조건 사용.

// src/App.jsx

import "./App.css";
import AddData from "./components/AddData";
import FetchData from "./components/FetchData";
import UpdateData from "./components/UpdateData";

function App() {
  return (
    <>
      <h1>Supabase</h1>
      <FetchData />
      <UpdateData />
      <AddData />
    </>
  );
}

export default App;

// src/components/UpdateData.jsx

import React, { useState } from "react";
import supabase from "../supabaseClient";

const UpdateData = () => {
  const [targetId, setTargetId] = useState(0);
  const [address, setAddress] = useState("");

  const handleChange = async () => {
    const { error } = await supabase
      .from("NACAMP_SAMPLE")
      .update({
        address,
      })
      .eq("id", targetId);

    if (error) {
      console.log("error => ", error);
    }
  };

  return (
    <div
      style={{
        border: "1px solid blue",
      }}
    >
      <h2>데이터 수정 로직</h2>
      아이디 :{" "}
      <input
        type="number"
        value={targetId}
        onChange={(e) => setTargetId(e.target.value)}
      />
      <br />
      수정주소 :{" "}
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <button onClick={handleChange}>변경</button>
    </div>
  );
};

export default UpdateData;

데이터베이스 삭제

ID 기준 데이터 삭제 처리. delete 메서드 사용.

// src/App.jsx

import "./App.css";
import AddData from "./components/AddData";
import DeleteData from "./components/DeleteData";
import FetchData from "./components/FetchData";
import UpdateData from "./components/UpdateData";

function App() {
  return (
    <>
      <h1>Supabase</h1>
      <DeleteData />
      <FetchData />
      <UpdateData />
      <AddData />
    </>
  );
}

export default App;

// src/components/DeleteData.jsx

import React, { useState } from "react";
import supabase from "../supabaseClient";

const DeleteData = () => {
  const [targetId, setTargetId] = useState(0);

  const handleDelete = async () => {
    const { error } = await supabase
      .from("NACAMP_SAMPLE")
      .delete()
      .eq("id", targetId);

    if (error) {
      console.log("error => ", error);
    }
  };

  return (
    <div
      style={{
        border: "1px solid blue",
      }}
    >
      <h2>데이터 삭제 로직</h2>
      아이디 :{" "}
      <input
        type="number"
        value={targetId}
        onChange={(e) => setTargetId(e.target.value)}
      />
      <button onClick={handleDelete}>삭제</button>
    </div>
  );
};

export default DeleteData;

Dynamic Route는 동적 라우팅이라고도 부르며 path에 유동적인 값을 포함해 특정 페이지로 이동하도록 구현하는 방식임.

// ❌️
<Route path="/works/1" element={<Works />} />
<Route path="/works/2" element={<Works />} />
<Route path="/works/3" element={<Works />} />

예를 들어 works 페이지에 여러 개의 work가 있고, 각 work마다 독립적인 상세 페이지가 필요하다고 가정함. 이 경우 works/1, works/2, works/3처럼 모든 경로를 하나씩 직접 작성하는게 아니라. react-router-dom에서 제공하는 Dynamic Routes 기능을 사용해서 동적으로 변하는 경로를 간결하게 처리 가능함.

설정

// src/shared/Router.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";
import Work from "../pages/Work";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
                {/* path에 :id 사용 */}
        <Route path="works/:id" element={<Work />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Works 페이지에 여러 개의 Work가 있고, 클릭 시 각각의 상세 페이지로 이동하도록 구현.

기존과 달리 path에 :id 사용함. :id는 동적인 값을 받겠다는 의미임. 따라서 works/1, works/2 … works/100 모두 같은 <Work /> 컴포넌트로 이동함. 이때 id 값은 useParams 훅을 통해 조회 가능.

◼ useParams

Dynamic Routes를 사용하면 같은 페이지 컴포넌트(Work.js)를 모두 동일하게 렌더링하게 됨. 하지만 useParams를 사용하면 같은 컴포넌트를 렌더링 하더라도 각각 다른 id 값 조회 가능함.

useParams는 path의 있는 id 값을 조회할 수 있게 해주는 훅(path parameter 조회 목적). 예를 들어 works/100으로 이동하면 { id: "100" } 형태의 객체 반환함.

// src/pages/Works.js

import React from 'react';
import { Link } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Works() {
  return (
    <div>
      {data.map((work) => {
        return (
          <div key={work.id}>
            <div>할일: {work.id}</div>
            {/* 링크 목록추가 */}
            <Link to={`/works/${work.id}`}>
              <span style={{ cursor: 'pointer' }}>➡️ Go to: {work.todo}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export default Works;

// src/pages/Work.js

import React from 'react';
import { useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
    // useParams 사용
  const param = useParams();
  // param 객체에서 id 값 추출 가능. 
  // 해당 id를 기준으로 데이터 필터링 가능.
  const work = data.find(
      (work) => work.id === parseInt(param.id)
    );

  return <div>{work.todo}</div>;
}

export default Work;

◼ 중첩된 라우트

중첩 라우팅은 특정 라우트 내부에 추가로 라우트를 정의하는 방식. 여러 계층의 UI 구성 시 유용함.

예시로 대시보드 구조가 있음. /dashboard 하위에 여러 섹션 존재하는 구조임.

// src/shared/Router.js

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DashboardLayout from './DashboardLayout';
import Profile from './Profile';
import Settings from './Settings';
import Reports from './Reports';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<Profile />} />
          <Route path="settings" element={<Settings />} />
          <Route path="reports" element={<Reports />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

/dashboard는 공통 레이아웃(DashboardLayout)을 사용함. 하위 경로마다 서로 다른 페이지 렌더링함. 라우트 구조가 명확해지고 UX 개선에 도움 됨.

◼ Outlet

자식 라우트가 렌더링될 위치를 지정하는 컴포넌트. 복잡한 라우트 구조를 명확하게 관리 가능함.

// src/shared/Router.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Layout from './Layout';
import Home from "../pages/Home";
import About from "../pages/About";

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
              <Route path="/" element={<Layout />}>
                <Route index element={<Home />} />
                <Route path="about" element={<About />} />
              </Route>
            </Routes>
    </BrowserRouter>
  );
};

export default Router;

// src/shared/Layout.js

import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>Header Section</header>
      <main>
        <Outlet /> {/* 이 위치에 자식 라우트의 컴포넌트 렌더링. */}
      </main>
      <footer>Footer Section</footer>
    </div>
  );
}

◼ children

props와 chilren을 활용한 공통 Layout.

children은 어떤 자식 엘리먼트가 들어올지 모를 때 사용. Sidebar, Dialog 같은 범용 컴포넌트에서 자주 사용.

Layout 역할의 컴포넌트로 이해 가능. composition(합성) 개념 기반 구조. Header, Footer, Page를 조합하여 공통 레이아웃 구성.

// src/shared/Layout.js

import React from 'react';

const HeaderStyles = {
  width: '100%',
  background: 'black',
  height: '50px',
  display: 'flex',
  alignItems: 'center',
  paddingLeft: '20px',
  color: 'white',
  fontWeight: '600',
};
const FooterStyles = {
  width: '100%',
  height: '50px',
  display: 'flex',
  background: 'black',
  color: 'white',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '12px',
};

const layoutStyles = {
  display: 'flex',
    flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: '90vh',
}

function Header() {
  return (
    <div style={{ ...HeaderStyles }}>
      <span>Sparta Coding Club - Let's learn React</span>
    </div>
  );
}

function Footer() {
  return (
    <div style={{ ...FooterStyles }}>
      <span>copyright @SCC</span>
    </div>
  );
}

function Layout({ children }) {
  return (
    <div>
      <Header />
      <div style={{...layoutStyles}}>
        {children}
      </div>
      <Footer />
    </div>
  );
}

export default Layout;

// src/shared/Router.js

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Works from '../pages/Works';
import Layout from './Layout';

const Router = () => {
  return (
    <BrowserRouter>
        {/* Layout으로 Routes 감쌈 */}
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

공통 UI 유지하면서 페이지별 내용만 교체 가능. 레이아웃 재사용에 적합한 구조.

◼ 중첩라우팅 vs 공통 레이아웃

중첩 라우팅(Outlet)

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
  </Route>
</Routes>

라우트마다 다른 레이아웃 적용 가능. 동적이고 유연한 라우트 관리를 제공.

공통 레이아웃(children)

<Layout>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
  </Routes>
</Layout>

모든 페이지에 동일한 레이아웃 적용 시 적합. 구조가 단순해서 관리에 용이.

권장 방식 - 중첩 라우팅 + Outlet

이유1. 라우트(URL) 구조와 UI 구조 일치

• URL 구조와 컴포넌트 구조가 자연스럽게 매칭됨
• /dashboard, /dashboard/settings 같은 계층 표현에 적합함
• 라우트만 봐도 화면 구조 파악 가능함

이유2. 레이아웃 분기 처리 용이

• 페이지마다 서로 다른 레이아웃 적용 가능함 예시 - 로그인 페이지: 헤더 없음, 메인 페이지: 헤더 있음
• 조건 분기 코드 없이 라우트 단위로 처리 가능함

이유 3. 유지보수 및 확장성 우수

• 라우트 추가 시 구조 변경 최소화
• 대규모 서비스에서 구조 안정적임
• 팀 협업 시 역할 분리 명확함

공통 레이아웃 방식이 적합한 경우

• 모든 페이지가 동일한 레이아웃 사용
• 소규모 프로젝트
• 페이지 수 적음
• 구조 단순함

한계

• 페이지별 레이아웃 분기 어려움
• 조건부 렌더링 증가
• 라우트 구조와 UI 구조 분리됨