리액트 기초 - 강의 정리 4 : fetch, 커스텀

1. 프론트엔드와 백엔드 통신의 기본 원칙

1.1. 보안 측면

프론트엔드를 DB에 직접 연결하면 인증정보가 클라이언트 코드에 노출되어 보안 취약점이 발생한다.

민감한 정보는 백엔드에 보관하고 프론트엔드에서 API를 통해 요청하는 방식이 표준 아키텍처이다.

이러한 분리는 보안뿐만 아니라 유지보수성과 확장성도 향상시킨다.

 

1.2. 클라이언트-서버 모델

프론트엔드는 UI 렌더링과 사용자 상호작용에 집중한다.

백엔드는 데이터 처리, 비즈니스 로직, 인증, 데이터베이스 작업을 담당한다.

API를 통해 두 계층이 통신하며, 각 계층은 독립적으로 개발 및 스케일링이 가능하다.

 

2. fetch API

2.1. 기본 개념

fetch API는 브라우저 내장 API로, 리액트 고유 기능이 아닌 웹 표준 API이다.

네트워크 요청을 보내고 응답을 처리하기 위한 현대적인 인터페이스이다.

Promise 기반으로 동작하여 비동기 작업을 처리하기 위해 Promise를 반환한다.

 

2.2. 주요 기능

GET, POST, PUT, DELETE, PATCH 등 모든 HTTP 메소드를 지원한다.

헤더, 본문, 모드, 캐시 정책 등 다양한 옵션 설정이 가능하다.

.json() 메소드를 통해 응답을 JSON 객체로 변환할 수 있다.

2.3. 기본 사용법

ex)

// 기본 GET 요청
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST 요청 예시
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

2.4. fetch 사용 시 주의사항

fetch는 HTTP 오류 상태(400, 500 등)에서도 Promise를 reject하지 않고, 단지 ok 속성이 false가 된다.
네트워크 오류 시에만 Promise를 reject한다.
따라서 응답의 ok 상태를 확인하는 추가 코드가 필요하다

.

ex)

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

 

3. fetch 사용 시 상태 관리

3.1. 필요한 상태

- 데이터 상태: API로부터 받은 데이터를 저장한다.

- 로딩 상태: 요청이 진행 중인지 표시한다 (사용자 피드백용).

- 에러 상태: 발생한 에러 정보를 저장한다.

3.2. 에러 처리 유형

- 네트워크 에러: 인터넷 연결 문제, CORS 오류 등의 전송 단계 에러가 발생할 수 있다.

- 서버 에러 응답: 요청은 성공했으나 서버가 오류 상태 코드(4xx, 5xx)를 반환할 수 있다.

- 데이터 처리 에러: 응답 파싱 중 발생하는 에러(예: JSON 형식 오류)가 있을 수 있다.

 

 

4. 커스텀 훅 (Custom Hooks)

4.1. 개념과 규칙

커스텀 훅은 상태 로직을 재사용 가능한 함수로 추출한 것이다.

규칙:

1. 반드시 'use'로 시작하는 이름을 사용해야 한다 (예: useFetch, useForm).
2. 리액트 컴포넌트나 다른 커스텀 훅 내에서만 호출 가능하다.
3. 최상위 레벨에서만 호출해야 한다 (조건문/반복문 내부에서 호출 불가).

 

4.2. 독립적인 상태 관리

각 컴포넌트에서 커스텀 훅을 사용할 때마다 독립적인 상태 인스턴스가 생성된다.

이는 리액트의 "독립적인 상태 스냅샷" 개념의 일부로, 상태 격리를 보장한다.

 

4.3. 커스텀 훅 사용의 장점

- 코드 재사용성: 동일한 로직을 여러 컴포넌트에서 반복 사용 가능하다.

- 관심사 분리: 데이터 페칭 로직과 UI 렌더링 로직을 분리할 수 있다.

- 가독성: 컴포넌트 코드가 간결해진다.