리액트 강좌

8-1.입출력

데이터 입출력

SPA 웹앱은 한 페이지내에서도 업데이트가 계속 발생한다. 포털 사이트의 뉴스, 날씨, 주가 정보는 실시간으로 바뀐다. 이런 동작이 가능하려면 배경에서 데이터를 계속 받아와 채워 넣어야 한다. 현재 온도를 표시하는 컴포넌트는 변화 무쌍한 현재 날씨를 실시간으로 반영한다.

데이터를 제공하는 서버와 통신을 수행하려면 프로토콜이 필요하다. HTTP를 바로 쓸 수도 있지만 너무 저수준이라 편의성이 떨어진다. 요즘은 더 고수준의 REST를 사용하며 우리나라 기상청도 REST로 날씨 정보를 제공한다. 이 서비스를 사용하려면 개발자 등록을 하고 복잡한 사용법을 익혀야 하는 곤란함이 있다.

다행히 공개된 REST API 테스트 사이트가 많은데 jsonplaceholder.typicode.com는 users, todos, albums 등의 샘플 데이터를 제공한다. 사진 데이터의 789번 사진 정보에서 앨범 번호를 온도값이라고 가정하고 가져와 보자. 샘플인만큼 값은 16으로 정해져 있지만 실제값이 무엇이든 통신으로 읽었다는게 중요하다.

온도는 랜더링 대상이므로 temp 상태로 정의하되 초기값은 아직 조사하기 전이라는 0으로 설정한다. 버튼을 클릭하면 현재 온도를 조사해 temp 상태를 갱신한다. 데이터 통신의 원조격인 XMLHttpRequest 함수로 HTTP 통신의 수행해 보자.

function Weather() {

const [temp, setTemp] = useState(0);

function handleClick() {

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/photos/789', false);

xhr.send();

for (const now = Date.now();Date.now() - now < 2000;) {}

const data = JSON.parse(xhr.responseText);

setTemp(data['albumId'])

}

return (

</>

)

}

function App() {

return (

</>

);

}

해외 서버에 접속해 이 값을 읽어 오는데는 꽤 시간이 걸려야 하는데 요즘 인터넷이 너무 빨라 순식간이다. 진짜 오래 시간이 걸리는 상황을 가정하기 위해 2초간 멍하니 대기하는 코드를 넣었다. 반응이 느리지만 통신은 잘 수행한다.

원격지 서버에서 데이터를 받아와야 하니 느린 것은 어쩔 수 없지만 데이터를 받는동안 기다려야 한다는 것은 심각하다. 새로고침하여 0도로 리셋하고 버튼을 다시 눌러 보자. 통신을 하는 동안에는 문자열을 드래그해도 선택되지 않고 얼어 버린 상태이다.

다행히 브라우저는 멀티 스레드로 돌고 있어 창을 이동하거나 크기를 바꾸는 동작은 가능하다. 하지만 싱글 스레드 구조의 리액트는 통신에 매진하고 있어 창의 크기를 바꾸어도 정렬을 조정하지 못한다. 사실 XMLHttpRequest 함수도 비동기 입출력을 수행할 수 있지만 open 함수의 마지막 인수를 false로 지정하여 강제로 동기적으로 동작하도록 했다.

이 예제는 웹에서 동기적인 처리가 얼마나 위험한지 보여준다. 과거 컴퓨터가 느릴 때는 사용자가 인내심을 발휘하여 기다려 줬지만 요즘은 단 1초도 참지 않는다. 시간이 좀 오래 걸리는 작업이라도 사용자의 요구에는 즉시 응답해야 한다. 통신이 느린 상황을 가정하기 위해 2초간 멍때리는 코드는 절대 사용하면 안되는 금기 사항이다.

비동기 입출력

앞 예제에서 봤다시피 웹에서의 통신은 무조건 비동기적이어야 한다. 단 0.1초가 걸리더라도 특정 상황에서는 대기 시간이 얼마나 늘어날지 알 수 없으며 브라우저가 마치 얼어 버린 것처럼 보이기 때문이다. 어떤 브라우저는 아예 동기적인 통신을 에러로 취급하여 금지해 버리기도 한다.

자바스크립트와 리액트 등의 개발측에서도 효율적인 비동기 통신을 지원하고 편의성을 높이기 위한 업그레이드를 꾸준히 해 왔다. 그러다 보니 너무 많은 방법이 있어 헷갈리는 면이 있다. 요즘 잘 안 쓰는 기법이라도 역사적인 발전 과정을 살펴 볼 필요는 있으니 하나씩 구경해 보자.

원조격인 XMLHttpRequest 함수는 콜백 기반이어서 함수를 너무 많이 만들어야 하는 불편함이 있었다. ES6에서 비동기 동작을 위해 Promise를 도입하고 이 기법을 사용한 fetch 함수를 추가하였다. 인수로 URL과 옵션을 전달하면 비동기 처리 결과인 프라미스를 즉시 리턴하고 이어지는 then, catch 메서드에서 성공, 실패시의 처리를 수행한다.

function Weather() {

const [temp, setTemp] = useState(0);

function handleClick() {

fetch('https://jsonplaceholder.typicode.com/photos/789')

.then(response => response.json())

.then(data => setTemp(data['albumId']))

}

return (

</>

)

}

function App() {

return (

</>

);

}

코드가 굉장히 짧아졌다. fetch로 요청을 보내고 즉시 리턴하되 성공시 실행할 함수를 then에 등록해 둔다. 즉시 리턴한다는 것은 기다리지 않고 비동기적으로 실행한다는 뜻이다. 응답을 받으면 결과를 json 객체로 바꾸고 이 객체의 albumId를 읽어 정수값을 빼낸다. 이 값을 temp 상태에 대입하면 현재 온도가 출력된다. 별도의 지연 시간을 주지는 않았지만 진짜 외국 서버까지 갔다오니 반응이 약간 굼뜨는 것은 느낄 수 있다.

Promise는 비동기 동작을 훌륭히 처리하지만 then이 이어지면 코드를 한눈에 파악하기 어렵다. 편의성을 향상시킨 제너레이터라는걸 도입했지만 난해애서 별 인기가 없었다. ES18에서는 Promise 대신 더 직관적인 async, await 키워드를 도입하여 마치 동기적인 코드를 작성하듯 위에서 아래로 순서대로 읽으며 흐름을 파악할 수 있다.

다음 예제는 async, await로 작성하고 추가 기능을 몇 개 더 넣었다. 화면에 혼자 있다 보니 통신중에 다른 동작이 가능한지 확인하기 어려워 카운트를 증가하는 기능을 넣었다. 비동기 특성을 충분히 확인할 수 있도록 2초의 대기 시간을 넣어 통신이 오래 걸리는 상황을 가정했다.

function Weather() {

const [temp, setTemp] = useState(0);

const [count, setCount] = useState(10);

async function handleClick() {

const response = await fetch('https://jsonplaceholder.typicode.com/photos/789');

await new Promise(resolve => setTimeout(resolve, 2000));

const data = await response.json();

setTemp(data['albumId']);

}

return (

<p>카운트 : {count} <button onClick={() => setCount(count + 1)}>증가</button></p>

</>

)

}

function App() {

return (

</>

);

}

현재 온도 조사 버튼을 클릭하면 약 2초간 통신을 수행하되 모든 동작은 비동기적이며 통신 시작만 해 두고 즉시 리턴한다. 그래서 대기 중에도 카운트 증가 버튼을 누르면 잘 동작하며 창의 이동이나 크기 변경에도 즉시 반응한다.

고작 4줄짜리 코드이지만 굉장히 어렵게 느끼는 사람도 있다. 이 코드가 어려워 보인다면 Promise, async, await 같은 자바스크립트 문법에 아직 익숙하지 않아서이다. 비동기 처리는 자바스크립트의 과목이므로 필요하다면 문법부터 공부해야 한다. 이 문법을 이해하지 못하면 이후의 예제를 이해하는 것도 쉽지 않다.

이중클릭 방지

온도 조사를 비동기적으로 처리하여 통신중에도 UI를 사용할 수 있다. 증가 버튼은 언제든지 잘 동작한다. 문제는 모든 UI를 다 사용할 수 있다 보니 온도 조사중에도 온도 조사 버튼을 또 누를 수 있다는 점이다. 잠시 후 결과를 받을 수 있는데 똑같은 통신을 다시 시작하는 것은 불필요할 뿐만 아니라 때로는 위험하기도 하다.

사용자는 성미가 급해 같은 버튼을 여러 번 누르는 경향이 있다. 온도 조사는 두 번 해도 상관없지만 계좌 이체, 장바구니 담기 등은 여러번 수행해서는 안되는 명령이다. 조사중에는 통신이 진행중임을 알리고 그 동안에는 이 버튼을 누를 수 없도록 해야 한다. 뭔가 실행중이라는 것도 상태이므로 isLoading 상태를 정의하고 이 상태에 따라 UI를 조작한다.

function Weather() {

const [temp, setTemp] = useState(0);

const [count, setCount] = useState(10);

const [isLoading, setIsLoading] = useState(false);

async function handleClick() {

if (isLoading) return;

setIsLoading(true);

try {

const response = await fetch('https://jsonplaceholder.typicode.com/photos/789');

await new Promise(resolve => setTimeout(resolve, 2000));

const data = await response.json();

setTemp(data['albumId']);

} catch (error) {

console.error('에러 발생:', error);

} finally {

setIsLoading(false);

}

return (

<h2>현재 온도 : {isLoading ? "조사중" : temp}</h2>

<p>카운트 : {count} <button onClick={() => setCount(count + 1)}>증가</button></p>

</>

)

}

function App() {

return (

</>

);

}

온도 조사 버튼을 누르면 <h2>의 현재 온도는 '조사중'으로 바뀌며 버튼은 사용 금지 상태가 된다. 조사가 끝나면 현재값을 출력하고 버튼을 다시 활성화한다.

isLoading 상태는 곳곳에서 참조한다. <h2>의 캡션에 조건 연산자를 적용했고 <button>의 disabled 속성에 대입하여 조사중일 때는 사용 금지이다. 온도 조사 함수는 isLoading이 참일 때 실행을 거부한다. 그렇지 않을 때는 조사중으로 상태를 바꾸고 모든 조사가 끝나면 조사 완료 상태로 변경한다.

통신은 언제나 에러가 발생할 수 있으므로 예외 처리 구문으로 감쌌다. 예외 발생시 예외 사실을 콘솔에 출력했는데 실무에서는 이보다 더 정교한 에러 처리가 필요하다. finally 블록에 isLoading을 false로 바꾸는 처리를 작성하여 어떤 경우라도 조사는 끝내도록 했다.

로딩중 표시

사용자가 일일이 버튼을 눌러 정보를 확인하는 것보다는 앱이 실행 직후나 또는 주기적으로 조사하는 방식이 보편적이다. 초기화 시에 조사하려면 useEffect 훅에 코드를 작성한다. 이 정보가 앱 동작에 필수적이라면 읽기 전에는 아무 것도 할 수 없다. 이럴 때는 화면에 로딩중이라는 안내 메시지를 출력한다.

function Weather() {

const [temp, setTemp] = useState(0);

const [count, setCount] = useState(10);

const [isLoading, setIsLoading] = useState(false);

useEffect(() => {

async function fetchData() {

let isMounting = true;

setIsLoading(true);

try {

const response = await fetch('https://jsonplaceholder.typicode.com/photos/789');

await new Promise(resolve => setTimeout(resolve, 2000));

if (isMounting) {

const data = await response.json();

setTemp(data['albumId']);

}

} catch (error) {

console.error('에러 발생:', error);

} finally {

setIsLoading(false);

}

return () => {

isMounting = false;

}

fetchData();

}, []);

return (

{isLoading && <p>로딩 중...</p>}

{isLoading === false && (

<p>카운트 : {count} <button onClick={() => setCount(count + 1)}>증가</button></p>

</>

)}

</>

)

}

function App() {

return (

</>

);

}

useEffect 함수의 리턴값은 정리 함수로 정해져 있어 Promise를 리턴할 수 없으며 따라서 useEffect의 콜백 함수를 async로 정의할 수는 없다. 다음 코드는 문법적으로는 가능하지만 리턴 타입이 달라 실행중 에러가 발생한다.

useEffect(async () => { await .... }, [])

그래서 콜백 함수 내에 함수 fetchData를 정의하고 이 함수를 비동기로 호출하는 식으로 작성했다. 마운트 시점에는 아무 것도 보여줄게 없으므로 로딩중이라는 메시지만 표시하고 마운트가 완료되면 데이터를 보여 준다. 대개의 경우 이 시간은 극히 짧아 사용자가 미처 보지 못할 가능성도 있지만 네트워크 입출력 시간을 장담할 수 없으니 이 처리를 생략할 수는 없다.

이 예제에서 또 한가지 눈여겨 볼 것은 isMounting 지역 변수이다. 통신 직전에 true로 설정하고 정리 함수에서 false로 변경하며 데이터를 사용하기 전에 한번 더 확인한다. 서버의 반응이 느려 사용자가 뒤로가기 버튼을 눌렀을 때를 위한 에러 처리이다. 마운트중에 언마운트가 발생하더라도 비동기로 진행중인 통신은 어쨌거나 결과를 리턴한다.

이때 결과를 출력할 상태가 이미 사라져 버렸다면 대입할 곳도 없고 화면에 표시할 필요도 없다. 이 처리가 없어도 대개의 경우는 큰 문제가 없지만 메모리 누수가 발생할 가능성이 있다. 별도의 변수 대신 isLoading 상태를 참조할 수도 있을거 같지만 그건 안된다. 언마운트 상황에서는 모든 상태값을 신뢰할 수 없다.

8-2.Axios

소개

fetch만 해도 충분히 쓸만하지만 기본 통신 기능에만 치중할 뿐 편의성은 높지 않다. 더 편리한 라이브러리가 많이 공개되어 있는데 리액트 환경에서는 Axios가 대표적인 HTTP 클라이언트 라이브러이다. fetch와 마찬가지로 Promise 기반이며 async, await 문법과 함께 사용한다. fetch에 비해 많은 편의 기능을 제공한다.

▶ 인터셉터로 요청을 보내기 전이나 응답을 받기 전에 특정 로직을 실행할 수 있다.

▶ JSON 데이터를 객체로 자동 변환한다.

▶ 요청을 취소하거나 타임아웃을 설정할 수 있고 진행률을 추적할 수 있다.

▶ 클라이언트측의 브라우저와 서버측의 Node.js에서 모두 사용할 수 있다.

▶ 구형 브라우저까지 지원한다.

추가 라이브러리이므로 별도 설치가 필요하다. 프로젝트가 실행중이라면 잠시 멈추고 다음 명령으로 설치한다.

C:\reactStudy\study>npm install axios

added 23 packages, and audited 204 packages in 2s

52 packages are looking for funding

run `npm fund` for details

found 0 vulnerabilities

Axios의 모든 기능을 제공하는 함수는 axios(config)이다. 호출 형식은 단순하지만 인수인 config 객체에 멤버가 많아 옵션을 세밀하게 지정할 수 있다.

속성	설명
url	요청 주소이다. get, post 등의 첫 번째 인수로도 전달된다.
method	HTTP 메서드를 지정한다. get, post 메서드는 자신의 메서드로 설정한다. 디폴트는 get이다.
headers	HTTP 헤더를 객체 형태로 지정한다. Authorization, Content-Type 등의 멤버가 있다.
params	쿼리 문자열로 전달할 옵션 객체이다. apiKey 등을 붙일 때 유용하다. 디폴트는 {}로 비어 있다.
data	post, put 등의 메서드에서 요청 본문으로 전달할 객체이다.
timeout	타임아웃을 ms 단위로 지정하며 이 시간동안 응답을 받지 못하면 에러 처리된다. 디폴트는 0이며 제한이 없다.
auth	HTTP 기본 인증 정보이며 username, password 속성을 지정한다.
responseType	응답 데이터의 포맷이다. 'json'이 디폴트이며 'text', 'blob', 'document', 'arraybuffer', 'stream' 등이 있다.
baseURL	요청의 기본 URL이다. 모든 상대 경로 요청앞에 붙여진다. 디폴트는 undefined이다.
transformRequest	요청을 보내기 전에 변환할 함수
transformResponse	응답을 받아 처리하는 함수
interceptors	인터셉터 설정
responseEncoding	응답 데이터 인코딩이며 디폴트는 'utf8'이다.
parameterSerializer	쿼리 스트링을 직렬화는 방식을 정의하며 (params) => { } 형식의 함수이다. 디폴트가 무난하지만 배열을 전달하는 방식이 약간 다른 경우가 있어 서버의 방식과 맞출 때 필요하다. qs.stringify(params, { arrayFormat: 'comma' } 배열을 콤마로 구분하여 나열한다.

옵션중에 꼭 필요한 것은 url 뿐이며 나머지는 무난한 디폴트가 설정되어 있다. 특정 옵션을 자주 사용한다면 axios.create 메서드로 config 인수를 지정하여 기본 설정으로 지정한 객체를 생성하고 이 객체로 요청을 보내면 생성할 때의 설정을 우선적으로 사용한다.

axios 함수 하나로 모든 동작을 다 처리할 수 있지만 무난한 옵션으로 호출할 때는 HTTP 메서드별로 get, post, put, patch, delete 등의 함수를 사용한다.

▶get(url, config) : GET 요청을 보내며 url 인수로 요청 주소를 전달한다. config는 요청 설정이며 생략시 디폴트 설정을 사용한다. delete, head, options 등도 원형은 같다.

▶post(url, data, config) : POST 요청을 보내며 url에 요청 주소를 전달하고 data에 요청 본문 데이터를 전달한다. 값을 읽는 get에 비해 쓰는 동작이므로 대상을 전달해야 한다. put, patch도 원형은 같다.

응답 데이터는 response로 받으며 이 객체안에 성공 여부와 실제 읽은 데이터 등의 요청 처리 결과가 모두 들어 있다.

속성	설명
data	서버로부터 받은 응답 본문(body)이다. JSON 포맷이면 객체로 자동 변환해 놓는다.
status	HTTP 상태 코드이다.
statusText	상태 코드에 대한 설명 문자열이다.
headers	데이터의 타입(content-type), 날짜, 서버 정보 등이 포함된 응답 헤더
config	요청할 때 보낸 옵션을 그대로 다시 돌려 준다. 실패시 재시도할 때는 이 옵션을 참고한다.
request	요청을 보낸 객체이다. 브라우저 환경에서는 XMLHttpRequest, Node.js 환경에서는 ClientRequest 객체이며 저수준 정보를 확인할 때 사용한다.

입력과 출력이 워낙 상세해 각 멤버를 잘 사용하면 정밀한 제어가 가능하고 다양한 환경에 두루 활용할 수 있다.

사용자 목록 읽기

다음 예제는 axios를 활용하어 테스트 서버의 샘플 API를 호출하여 사용자 목록을 읽어 출력한다. 샘플 데이터에는 10명의 사용자가 등록되어 있다. fetch에 비해 어떤 점이 다른지 잘 살펴보자.

import axios from 'axios';

function App() {

const [users, setUsers] = useState([]);

const [IsLoading, setIsLoading] = useState(true);

const [IsError, setIsError] = useState(null);

useEffect(() => {

async function fetchUsers() {

try {

const response = await axios.get('https://jsonplaceholder.typicode.com/users');

setUsers(response.data);

} catch (e) {

setIsError(e);

} finally {

setIsLoading(false);

}

};

fetchUsers();

}, []);

if (IsLoading) {

return <div>Loading users...</div>;

}

if (IsError) {

return <div>Error fetching users: {IsError.message}</div>;

}

return (

<div>

<ul>

{users.map(user => (

<li key={user.id}>{user.name} - {user.email}</li>

))}

</ul>

</div>

);

}

사용자 정보의 목록을 표시하기 위해 users 상태를 정의했으며 초기값은 빈 배열이다. 원격지의 서버로 요청을 보내 응답을 받는데 시간이 걸리며 에러가 발생할 수도 있다. 두 상태를 표시하기 위해 IsLoading, IsError상태를 정의했다. 로딩의 초기값은 true이고 에러는 없는 상태로 초기화한다.

useEffect 훅에서 마운트 직후 axios.get 함수를 호출하여 비동기 요청을 보낸다. url만 인수로 보냈는데 메서드까지 지정해서 axios 함수를 호출해도 된다. 이 원론적인 호출에서 method를 'get'으로 고정한 편의 함수가 바로 get이다. 웬만하면 get, post로 대부분의 통신을 수행할 수 있어 axios 함수를 직접 호출할 일은 거의 없다.

const response = await axios.axios({

url:'https://jsonplaceholder.typicode.com/users',

method:'get'

});

전체적으로는 try, catch로 감싸 에러를 처리한다. 예외가 발생하지 않으면 response.data를 읽는데 이는 파싱까지 완료한 객체 또는 객체 배열이다. Axios는 수신 데이터를 분석한 후 JSON이면 알아서 JSON.parse를 호출하여 객체로 바꿔 놓으므로 setUsers 함수로 바로 대입할 수 있다. 요청후 상태는 굳이 점검할 필요 없다.

if (response.status === 200) { ... }

Axios는 상태 코드가 200번대가 아니면 기본적으로 에러로 처리해 버리므로 get 다음 줄로 무사히 내려왔다는 것은 이미 에러가 아니라는 뜻이다. fetch에서는 상태를 확인해야 하지만 axios에서는 그럴 필요 없다. 단, 200번대라도 성공 코드에 따라 처리를 다르게 할 때는 status를 읽어야 한다.

예외가 발생하면 catch 블록에서 에러 처리하고 최종적으로 로딩중은 종료한다. 비동기 HTTP 요청의 가장 일반적인 형태이다. JSX는 로딩중이거나 에러 발생시의 메시지를 출력하고 즉시 리턴한다. 응답을 잘 받았으면 users 상태의 배열을 순회하며 화면에 출력한다. 잠시 로딩 메시지가 보이다가 응답을 받은 직후에 사용자 목록을 표시한다.

여기까지만 보면 데이터 변환이 자동이라는 점과 에러 처리 방식이 좀 다르다는 것 외에는 fetch와 큰 차이는 없고 소스 길이도 비슷하다.

인터셉터

인터셉터(Interceptors)는 요청, 응답 중간에 끼어 들어 공통적인 로직을 실행하는 기능이다. 모든 호출시마다 반드시 해야할 작업이 있다면 인터셉터에서 중앙 집중적으로 처리한다. 예를 들어 유료 서비스는 인증 토큰을 보내야 하는데 이런 처리를 인터셉터에서 하면 개별 호출은 인증에 대해 더 신경쓰지 않아도 된다.

여러 인터셉터를 등록할 수 있으며 등록 순서대로 실행한다. Axios를 사용하는 가장 큰 이유가 바로 인터셉터이다. 인터셉터는 요청과 응답 두 가지 종류가 있다. 요청 인터셉터는 보내기 전에 실행한다. use 메서드는 성공시와 에러시에 호출할 두 개의 콜백을 인수로 받는다. 성공 콜백에서 config을 수정할 수 있는데 프로젝트 전역적으로 사용하는 설정이 있다면 여기서 적용한다.

응답 인터셉터는 응답을 받은 후에 실행한다. 응답 데이터를 변환하거나 특정 상태에 대한 에러 처리를 수행한다. 앞 예제에서 요청을 보내기전에 인터셉터를 설치하는 코드를 추가한다. 요청시 로그를 남기고 응답 데이터의 사용자 이름을 모두 대문자로 바꾼다.

useEffect(() => {

async function fetchUsers() {

try {

// 요청 인터셉터

axios.interceptors.request.use(

(config) => {

console.log('요청 보냄' + config.url)

// config를 점검하고 수정하여 리턴한다.

return config;

// 또는 Promise를 리턴하여 요청을 지연한다.

(error) => {

console.log('에러 발생')

// Promise를 거부하여 다음 에러 핸들러로 전달

return Promise.reject(error);

}

)

// 응답 인터셉터

axios.interceptors.response.use(

(response) => {

console.log('응답 받음' + response.data)

// 응답을 수정하여 리턴한다.

response.data = response.data.map(user => ({

...user,

name:user.name.toUpperCase()

}))

return response;

// 또는 Promise를 리턴하여 요청을 지연한다.

(error) => {

console.log('에러 발생')

// Promise를 거부하여 다음 에러 핸들러로 전달

return Promise.reject(error);

}

)

const response = await axios.get('https://jsonplaceholder.typicode.com/users');

....

응답 객체의 data는 user의 배열이며 map으로 순회하며 name만 대문자로 바꾼다. 응답 결과를 일괄 포맷팅하거나 특정 정보를 필터링하는 등의 후속 처리도 가능하다.

요청을 보내기 전이나 받기 전에 원하는 모든 것을 처리할 수 있어 통신을 원하는대로 조작할 수 있다.

전체 대기

웹 페이지는 여러 개의 컴포넌트로 구성된다. 컴포넌트끼리는 독립적이라 개별적으로 비동기 통신을 수행해도 되지만 모든 데이터가 완전히 들어와야 시작할 수 있는 경우도 있다. 이럴 때는 각 데이터를 받는 함수를 비동기로 작성하고 Promise.all 메서드로 전체 대기한다. 다음 에제는 샘플에서 사용자, 할일목록, 게시글 등의 데이터를 한꺼번에 읽어 들인다.

import axios from 'axios';

function App() {

const [users, setUsers] = useState(0);

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

const [posts, setPosts] = useState(0);

const [IsLoading, setIsLoading] = useState(true);

useEffect(() => {

async function fetchUsers() {

return await axios.get('https://jsonplaceholder.typicode.com/users');

};

async function fetchTodos() {

return await axios.get('https://jsonplaceholder.typicode.com/todos');

};

async function fetchPosts() {

return await axios.get('https://jsonplaceholder.typicode.com/posts');

};

async function init() {

Promise.all([

fetchUsers(),

fetchTodos(),

fetchPosts()

])

.then(res => {

setUsers(res[0].data.length);

setTodos(res[1].data.length);

setPosts(res[2].data.length);

setIsLoading(false);

})

}

init();

}, []);

if (IsLoading) {

return <div>로딩 중...</div>;

}

return (

<div>

<p>User : {users}, Todo : {todos}, Post : {posts}</p>

</div>

);

}

각 요청을 비동기 함수로 작성하고 init에서 모든 요청이 성공할 때까지 기다린다. 이 때는 isLoading이 true이므로 화면에 로딩중... 메시지만 출력된다. 모든 요청이 다 성공했을 때 then에서 응답 객체 배열의 값을 추출하여 각 상태에 대입한다. 모든 데이터를 다 받았지만 편의상 데이터 개수만 출력하여 확인만 했다.

F5를 눌러 새로고침하면 잠시 로딩중이 보였다가 데이터가 들어온다. 요즘 인터넷 속도가 워낙 빨라 순식간이다. 그러나 아무리 빨라도 어느 정도의 시간은 걸리므로 로딩중 표시를 생략해서는 안된다.