1월 15일-리액트에서 API 사용

리액트에서 API 사용하기

API 호출 방법:

• Fetch API 사용: 자바스크립트 내장 fetch 함수를 사용해 서버에서 데이터를 가져온다. fetch는 Promise 기반으로 작동하며, 비동기적으로 데이터를 처리한다.

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

• Axios 사용: Axios는 HTTP 클라이언트 라이브러리로, 더 간결하고 구성이 풍부하다. 에러 처리가 더 쉽고, 요청 취소, 업로드 진행 상태 등의 기능을 제공한다.

import axios from 'axios';

axios.get('https://example.com/data')
  .then(response => console.log(response.data));

리액트 컴포넌트 내에서의 사용:

• 컴포넌트 마운트 시 API 호출: useEffect 훅을 사용하여 컴포넌트가 마운트될 때 API 호출을 한다.

useEffect(() => {
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

• 사용자 이벤트에 따른 API 호출: 버튼 클릭 등 사용자 이벤트에 API 호출을 연결할 수 있다.

const handleClick = () => {
  axios.get('https://example.com/data')
    .then(response => setData(response.data));
};

장단점 및 주의사항

• 장점:
  - 실시간 데이터 처리: 서버에서 최신 데이터를 실시간으로 가져올 수 있다.
  - 분리된 관심사: 프론트엔드와 백엔드 로직이 분리되어, 각각 독립적으로 개발 및 유지보수할 수 있다.

• 단점:
  - 네트워크 지연: 네트워크 지연으로 인한 성능 문제가 발생할 수 있다.
  - 보안 문제: CORS(Cross-Origin Resource Sharing) 문제가 발생할 수 있으며, API 키와 같은 중요 정보 노출에 주의해야 한다.

주의사항:

• 에러 처리: API 호출 시 에러 처리를 적절히 해야 한다.
• 로딩 상태 관리: 데이터가 로드될 때까지 사용자에게 로딩 상태를 알려야 한다.
• 캐시 및 최적화: 불필요한 API 호출을 줄이기 위해 캐시 전략을 고려해야 한다.

API를 통해 할 수 있는 작업들

• 데이터 CRUD(Create, Read, Update, Delete): 서버의 데이터를 생성, 조회, 수정, 삭제한다.

• 인증 및 권한 관리: 사용자 인증 및 권한에 따른 데이터 접근을 관리한다.

• 외부 서비스 통합: 날씨 정보, 지도 서비스, 결제 시스템 등 외부 API와의 통합을 통해 다양한 기능을
  제공한다.

• 리얼타임 통신: 웹소켓 등을 사용하여 실시간으로 데이터를 교환하고 상호작용한다.

예제: 간단한 데이터 조회 및 표시

1.API 서버 준비: 먼저 백엔드에서 API 서버를 구성한다. 이 서버는 JSON 형식의 데이터를 반환한다고 가정한다.

2.리액트에서 API 호출: 리액트 컴포넌트에서 API를 호출하여 데이터를 가져온 후, 상태에 저장한다.

const [data, setData] = useState([]);

useEffect(() => {
  fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

3.데이터 표시: 가져온 데이터를 컴포넌트에서 표시한다.

return (
  <div>
    {data.map(item => (
      <div key={item.id}>{item.name}</div>
    ))}
  </div>
);