React API 호출 - Fetch & Axios

YEZI🎐·2022년 7월 15일
APIFetchReactaxiosuseEffectuseState
1

React

목록 보기
20/46

Fetch API를 이용한 API 호출

Step.01 mount 된 직후에 한 번만 API 호출( useEffect() )

  1. useEffect() import 후 useEffect() 코드 작성

    /* 이 부분 */
import React, { useEffect } from 'react';

export default function ReactPage() {
   /* 이 부분 */
 	useEffect(() => {}, []);
  
	return (
		<div>ReactPage</div>
	);
}

  2. 비동기 통신을 위한 async 함수 작성

    export default function ReactPage() {
	useEffect(() => {
       /* 이 부분 */
		async function fetchData() {}
		fetchData();
	}, []);
 
	return (
		<div>ReactPage</div>
	);
}

  3. fetch API를 사용하여 Response 객체 반환 후 JSON 추출을 위한 json() 메서드를 호출

    export default function ReactPage() {
	useEffect(() => {
		async function fetchData() {
           /* 이 부분 */
			const res = await fetch('API URL');
			const result = await res.json();
		}
       fetchData();
	}, []);
 
	return (
		<div>ReactPage</div>
	);
}

Step.02 렌더링 시 데이터 유지를 위한 상태 값 설정( useState() )

  1. useState() import 후 state 변수 선언 및 빈 배열로 초기 값 설정

    /* 이 부분 */
import React, { useEffect, useState } from 'react';

export default function ReactPage() {
 	/* 이 부분 */
 	const [docs, setDocs] = useState([]);
  
	useEffect(() => {
		async function fetchData() {
			const res = await fetch('API URL');
			const result = await res.json();
		}
       fetchData();
	}, []);
	return (
		<div>ReactPage</div>
	);
}

  2. setDocs() 함수에 데이터(result) 전달

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

export default function ReactPage() {
 	const [docs, setDocs] = useState([]);
  
	useEffect(() => {
		async function fetchData() {
			const res = await fetch('API URL');
			const result = await res.json();
			/* 이 부분 */
			setDocs(result);
		}
       fetchData();
	}, []);
	return (
		<div>ReactPage</div>
	);
}

    ++ 작성한 함수가 아닌 곳에서 데이터를 필요하는 경우

    useEffect(() => {
   async function fetchData() {
       const res = await fetch('API URL');
       const result = await res.json();
       /* 1. 데이터를 return 하고 */
       return result;
   }
   /* 2. then을 통해 response를 넘긴다. */
   fetchData().then(res => setDocs(res));
}, []);

Axios를 이용한 API 호출

Step.01 mount 된 직후에 한 번만 API 호출( useEffect() )

  1. axios 설치 후 import

    # with npm
npm install axios

# with yarn
yarn add axios
    import axios from 'axios';

  2. 비동기 통신을 위한 async 함수 작성

    export default function ReactPage() {
	useEffect(() => {
       /* 이 부분 */
		async function fetchData() {}
		fetchData();
	}, []);
 
	return (
		<div>ReactPage</div>
	);
}

  3. axios.get()을 사용하여 Response 객체 반환 후 data 값을 result 변수에 할당

    export default function ReactPage() {
	useEffect(() => {
		async function fetchData() {
           /* 이 부분 */
			const res = await axios.get('API URL');
			const result = res.data;
		}
       fetchData();
	}, []);
 
	return (
		<div>ReactPage</div>
	);
}

Step.02 렌더링 시 데이터 유지를 위한 상태 값 설정( useState() )

  1. useState() import 후 state 변수 선언 및 빈 배열로 초기 값 설정

    /* 이 부분 */
import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function ReactPage() {
 	/* 이 부분 */
 	const [docs, setDocs] = useState([]);
  
	useEffect(() => {
		async function fetchData() {
			const res = await axios.get('API URL');
			const result = res.data;
		}
       fetchData();
	}, []);
	return (
		<div>ReactPage</div>
	);
}

  2. setDocs() 함수에 데이터(result) 전달

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

export default function ReactPage() {
 	const [docs, setDocs] = useState([]);
  
	useEffect(() => {
		async function fetchData() {
			const res = await axios.get('API URL');
			const result = res.data;
			/* 이 부분 */
			setDocs(result);
		}
       fetchData();
	}, []);
	return (
		<div>ReactPage</div>
	);
}

    ++ 작성한 함수가 아닌 곳에서 데이터를 필요하는 경우

    useEffect(() => {
   async function fetchData() {
       const res = await axios.get('API URL');
       const result = res.data;
       /* 1. 데이터를 return 하고 */
       return result;
   }
   /* 2. then을 통해 response를 넘긴다. */
   fetchData().then(res => setDocs(res));
}, []);
profile
YEZI🎐
까먹지마도토도토잠보🐘
이전 포스트

SPA와 React Router

다음 포스트

React Custom Hook

0개의 댓글