[클론 코딩] 뉴스 뷰어 만들기

이번에 가져온 클론 코딩은 뉴스 뷰어입니다. 이 프로젝트는 VELOPERT 님의 '리액트를 다루는 기술 개정판' 14장의 내용을 클론 코딩하였습니다.

TODO-LIST의 리액트 기초 기술들을 다시 되돌아보고, 외부 API 연동까지 한 번에 챙겨가는 프로젝트가 되었으면 좋겠습니다.

---

1. 비동기 처리

외부에서 데이터를 받아서 우리 홈페이지에 보여줄 것이기 때문에 비동기처리가 필수적입니다. 그렇지 않으면 정보가 로딩되는 동안 기다려야하죠. 비동기와 그에 대한 자바스크립트 구문 설명은 아래 링크들을 참조해주세요.

2021.05.24 - [Programming/Javascript] - [Javascript] 프로미스(promise) 객체

2021.05.24 - [Programming/Javascript] - [Javascript] async/await

 

 

 

2. 프로젝트 생성

create react-app으로 프로젝트를 생성해주세요.

yarn create react-app news-viewer

생성한 다음 axios를 설치하려고 합니다. axios는 자바스크립트 HTTP 클라이언트로 HTTP 요청을 Promise 기반으로 처리하도록 만들어 주는 패키지입니다.

yarn add axios

 

 

 

3. 초기 상태 작성

App.js의 내용을 다음과 같이 작성해줍니다.

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

const App = () => {
    const [data, setData] = useState(null);
    const onClick = async () => {
        try {
            const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');

            setData(res.data);
        }
        catch (err) {
            console.log(err);
        }
    }

    return (
        <div>
            <div>
                <button onClick={onClick}>불러오기</button>
            </div>
            {data && <textarea rows={7} value={JSON.stringify(data, null, 2)} readOnly={true}/>}
        </div>
    );
};

export default App;

이 코드의 결과는 불러오기 버튼을 클릭하면 'https://jsonplaceholder.typicode.com/todos/1'에서 지원하는 가짜 API를 호출하고 응답하면 textarea에서 보여주는 일을 합니다. 이 코드의 동작이 성공했다면 요청과 응답이 제대로 작동되어 이상이 없음을 확인할 수 있습니다.

 

    const onClick = async () => {
        try {
            const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1');

            setData(res.data);
        }
        catch (err) {
            console.log(err);
        }
    }

이 부분이 비동기처리를 하는 부분입니다. onClick 함수는 async를 통해 비동기적으로 작동하여 axios.get()으로 요청을 받습니다. 만약 요청에 대한 응답이 실패하면 catch를 실행하고 성공하면 try에 대한 블록을 실행합니다.

이렇게 되면 뉴스 뷰어를 만들기 위한 기본적인 프로젝트 세팅이 완료됩니다.