Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

React 애플리케이션에서 데이터 불러오기

by
Difficulty:IntermediateLength:ShortLanguages:

Korean (한국어) translation by Jin Ah Chon (you can also view the original English article)

React는 인터랙티브한 웹 애플리케이션을 개발하는데 인기가 가장 높은 라이브러리임이 틀림없습니다. 그러나 React는 아직 완벽히 갖춘 웹 프레임워크가 아닙니다. 오래된 MVC 모델에서 뷰(view)에 중점을 두고 있습니다.

다른 측면들을 도입하는 전체적인 React 생태계가 있습니다. 여러분은 이 튜토리얼에서 모든 웹 애플리케이션의 가장 기초적인 요소 중 하나, 즉 화면에 보여줄 데이터를 불러오는 방법을 학습할 것입니다. 쉽지 않습니다. React 컴포넌트의 계층구조에는 데이터를 불러오는 몇 개의 지점이 있습니다. 데이터를 불러오는 시점은 다른 문제입니다. 또한, 어떤 기술을 이용해서 데이터를 불러오고 어디에 그 데이터를 저장할지도 생각해 봐야 합니다.

이 튜토리얼의 마무리 하는 부분에서 여러분은 React에서 데이터를 어떻게 불러와야 잘 되는지, 다양한 접근 방법들에 관한 찬반양론과 여기서 알게 된 것을 React 애플리케이션에 어떻게 적용할지 명확히 알게 될 것입니다.

시작하기

create-react-app으로 React app의 뼈대를 만들어 봅시다.

> create-react-app react-data-fetcher

그 결과는 꽤 정교한 디렉토리 구조입니다. 여러분이 create-react-app을 잘 알지 못하면 아주 훌륭한 README 파일을 읽어 보세요.

간단한 서버 만들기

저는 인용문(quote)을 저장하고 제공할 목적으로 간단한 서버를 만들었습니다. 이는 튜토리얼에서 주요한 사항은 아니고, React로 데이터를 불러오는 방법을 시범으로 보여주고자 원격 API를 제공해 줄 역할입니다. 여러분의 궁금증을 해소하는 차원에서 얘기하건대, hug 프레임워크를 기반으로 한 Python 3 애플리케이션이고 영구 저장소(persistent storage)로써 Redis를 사용합니다.

API는 엄청 단순합니다. /quotes라는 하나의 endpoint가 있습니다. HTTP GET request에 대한 반응으로 저장된 인용문들을 모두 반환합니다. 그리고 나서 HTTP POST request를 보내서 새 인용문을 추가하면 됩니다.

GitHub에서 소스 코드를 전부 이용할 수 있습니다.

데모용 앱 개요

데모용 앱은 인용문 서비스로 정보를 전달하고, 모든 인용문을 화면에서 보여주며, 새 인용문를 추가할 수 있는 React 애플리케이션입니다.

다음은 스크린숏입니다.

A screenshot of the demo application

앱의 구조는 매우 단순합니다. 저는 create-react-app으로 뼈대를 만드는 것부터 시작해서 src의 서브 디렉토리에 두 개의 컴포넌트, QuoteList와 AddQuoteForm을 추가해습니다. 다음은 디렉토리 구조(node_modules 제외)입니다.

GitHub에서 소스 코드를 전부 이용할 수 있습니다.

인용문 보여주기

기능성 컴포넌트인 QuoteList는 불릿 목록처럼 인용문 목록을 보여줍니다. string 배열로 생각합니다.

주된 App 컴포넌트의 자식 컴포넌트입니다.

Fetch API로 데이터 불러오기

패치 API는 promise 기반의 API로 response 객체를 반환합니다. 실제 JSON 콘텐츠를 받기 위해서는 response 객체의 json() 메서드를 적용해야 합니다.

Data-Fetching 코드 배치하기

당연하게도 React는 컴포넌트가 대부분입니다. data-fetching 코드를 어디에 적용하느냐가 중요합니다. 여러분이 코드를 잘 분배했다면, 다수의 일반적인 컴포넌트들과 몇몇 애플리케이션에 특화된 컴포넌트들이 있을 것입니다. 보통 React와 JavaScript는 융통성이 높아서 어디에서나 로직을 주입할 수 있습니다.

제가 늘 최신 인용글이 보여지길 바라므로 REST API에서 인용문을 불러오는 데 여론조사용 폼(form)이 필요합니다. 초기 페치도 중요합니다. React 컴포넌트에는 특정 시점에 수행할 로직을 실행할 수 있는 라이프사이클 메서드가 있습니다.  componentDidMount() 메서드는 컴포넌트가 접속되고 state가 수정될 때 작동됩니다. 데이터를 불러올 완벽한 지점이지요.

다음과 같이 작성합니다.

첫 뷰를 보여줄 시점을 단축하려면, 비동기적 페치를 시작하는데 compomentWillMount()를 사용해 볼 것을 생각할 수 있습니다. 그러나 컴포넌트가 마운트(mount)되기 전에 페치를 완료하는 것은 위험합니다.

자세한 내용을 알고 싶다면 React 라이프사이클 메서드 마스터하기 글을 읽어보세요.

데이터 불러올 횟수 선택하기

초기 페치를 componentDidMount()에서 하는 게 좋지만, 저는 인용문들이 자주 업데이트되면 좋겠습니다. REST 기반의 API에서 단 하나의 해결방법은 서버를 주기적으로 폴링하는것입니다. 인용문 서비스는 기본이고 늘 인용문 전체를 반환합니다.

더 규모가 큰 서비스는 나중에 업데이트나 HTTP if-modify-since, 혹은 eTag를 사용해 확인하는 방법을 제공할 것입니다. 여기 데모용 애플리케이션에서는 단순히 componentDidMount()에서 타이머를 돌리기 시작해서 5초마다 데이터를 전부 페치하고 componentWillUnmount()에서 데이터 정제를 하겠습니다.

폴링하는 시간은 app에 특화시켜 결정합니다. 실시간 업데이트가 필요하다거나 폴린이 백엔드에 과부하를 준다면 REST 말고 WebSocket을 사용해 볼 것을 고려해 보세요.

장기간 계속 될 데이터 패치 처리하기

가끔 데이터 페치 작업에 시간이 오래 걸릴 수 있습니다. 그럴 경우에 사용자가 어떤 상황인지 알도록 프로그래스 바(progress bar)나 잘 만든 애니메이션을 보여주는 것이 사용자 경험에 많이 도움 됩니다. 이는 사용자가 (가령 검색 버튼을 클릭해서) 데이터 페칭를 시작할 때 특히 중요합니다.

저는 데모 앱에서 페치 작업이 진행 중인 동안에 "인용문을 페치하는 중..."이라는 메시지를 간단하게 보여줍니다. 그리고 메인 App 컴포넌트에 있는 render() 메서드에서 state.isFetching 멤버를 체크하는 방식으로 조건부 렌더링을 이용합니다.

fetchQuotes() 메서드는 시작할 때 true로 초기값을 설정하고, 인용문 데이터를 받을 때 false로 되돌려 놓는 방식으로 state.isFetching의 업데이트를 처리합니다.

에러 처리하기

저는 로그(log)를 사용해 콘솔(console)에서 에러를 잡는 방식으로 에러 처리를 최소화 합니다. 애플리케이션에 따라 일부 재시행 로직을 적용하거나 폴백(fallback) 콘텐츠를 보여주기도 합니다.

Fetch API 대 Axios

fetch API에는 두어 가지의 gotcha가 있습니다. response로부터 JSON을 추출하는 별도의 단계가 있어야 합니다. 에러를 모두 잡지도 못합니다. 예를 들어, 404는 일반 response로써 반환될 것입니다. 여러분은 response 코드를 확인해야 하고, 앞으로 포착될 네트워크 에러를 처리해야 합니다.

그러니까 두 군데에서 에러를 처리해야 합니다. 하지만 여러분은 이러한 이슈를 다루는 데 axios.js 라이브러리를 이용하고, 외부 dependency를 추가하는 값으로 좀 더 정교한 코드를 손에 넣을 수 있습니다.

양이 많지 않아 보이지만 유용합니다. 새 인용문을 추가하는 코드는 axios로 훨씬 정밀해집니다. 아래는 fetch 버전입니다.

아래는 axios 버전입니다.

결론

이 튜토리얼에서 여러분은 React 애플리케이션에서 비동기적으로 데이터를 페치하는 방법을 배웠습니다. 적절한 라이프사이클 메서드와 폴링(polling), 진행상황 보고(reporting), 에러 처리를 얘기했습니다. 

promise 기반의 라이브러리인 fetch API와 axios.js, 두 가지를 보았습니다. 이제 여기를 벗어나 원격 API에접속하는 멋진 React 애플리케이션을 제작해 보세요.

몇 년의 시간이 흘러 React의 인기가 상승하고 있습니다. 실은 구매와 검토, 실행 등이 가능한 수많은 상품들이 마켓플레이스에 있습니다. React와 관련한 추가 자료를 찾고 있으면, 망설이지 말고 그 상품들을 구매해 보세요.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.