[TIL] 20210514_clone coding

BANSEOK SUH·2021년 5월 14일

TIL clone coding

TIL

목록 보기

15/22

노마드 코더의 React 클론 코딩을 하면서 새롭게 배운 몇 가지를 정리해보고자 합니다.

axios API 호출

axios 공식 github에 따르면, Axios란 Promise 기반의 HTTP client입니다.

사람들은 fetch 함수보다 axios를 선호한다고 하는데, 이유가 무엇일까요?
다음의 표가 그 답이 될 수 있을지 모르겠네요.

JSON을 자동으로 변환해주기도 하는군요!
또한 axios는 Promise 기반이기 때문에 우리에게 async/await 코드를 매우 쉽게 구현할 수 있게 해준다고 합니다. 장점이 여럿 있네요.

다음과 같은 특징이 있다고 합니다. 참고하시죠.

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용

Promise(ES6) API 사용

요청과 응답 데이터의 변형

HTTP 요청 취소

HTTP 요청과 응답을 JSON 형태로 자동 변경

이번 클론 코딩에서는 axios를 사용하여 api를 요청했는데, 동기적으로 처리해주기 위해 다음과 같이 작업했습니다.
왜냐하면 api 요청이 끝나지 않았는데도 불구하고 그 다음 작업을 향해 달려나가면 안 되기 때문이죠.

wrapper 함수 앞에 async 키워드를 써주고, 기다림의 대상이 되는 함수 앞에 await을 써줍니다. 그 대상은 axios 함수가 되겠지요.

다음과 같습니다.

// Home 컴포넌트
class Home extends React.Component {
  ...
  // 비동기를 동기적으로 처리하는 꿀팁
  getMovies = async () => {
    const { data: { data: { movies } } } = await axios.get('url')
    // api 호출이 완료되면 상태를 변경해줍니다.
    this.setState({ movies, isLoading: false })
  }
  ...
}

react-router-dom

리액트의 SPA(Single Page Application) 구현에 가장 많이 쓰이는 라우터 중 하나라고 합니다.

리액트로 SPA를 구현한다는 것은 요청에 해당하는 컴포넌트만 라우팅해서 부분적으로 렌더링을 한다는 것을 의미합니다. 그것을 도와주는 것이 react-router-dom입니다.

먼저 패키지를 사용하기 위해 터미널에서 아래와 같은 명령어로 패키지를 다운받습니다.

npm install react-router-dom

그 중에서 HashRouter와 Route를 알아보겠습니다.

HashRouter

라우터는 BrowserRouter와 HashRouter 두 가지가 있습니다.

어느 블로거에 따르면, BrowserRouter는 HTML5의 history location 활용하여 UI를 업데이트하고,
HashRouter는 URL의 hash를 활용한 라우터입니다. 정적인(static)페이지에 적합하다고 합니다.
이 차이에 대해서는 따로 블로깅을 해야겠습니다.

보통 request와 response로 이루어지는 동적인 페이지를 제작하므로 BrowserRouter가 보편적으로 쓰인다고 하네요.

클론 코딩에서는 HashRouter를 사용했습니다.

Route

요청받은 pathname에 해당하는 컴포넌트를 렌더링합니다.
한 번에 모든 컴포넌트를 렌더링하지 않네요. 매우 흥미롭습니다.

사용 예시

Home 컴포넌트에 exact={true}를 써준 이유는, 리액트가 컴포넌트를 읽을 때 해당 url에 포함된 모든 컴포넌트를 읽어오기 때문입니다. 아래와 같은 경우에 exact={true}를 써주지 않고 '/about'에 해당하는 컴포넌트를 호출한다면, '/about'에 해당하는 '/'와 '/about'을 포함한 컴포넌트를 불러올 것입니다.

import { HashRouter, Route } from "react-router-dom";

function App() {
  return <HashRouter>
    <Navigation />
    <Route path='/' exact={true} component={Home}/> // 각 path에 해당하는 컴포넌트를 불러옵니다.
    <Route path='/about' component={About}/>
    <Route path='/movie/:id' component={Datail}/>
  </HashRouter>
}

Link

Link 태그는 html의 a 태그와 매우 흡사합니다. 하지만 SPA를 구현하기에 a 태그는 적절하지 않습니다. 왜냐하면 a 태그는 그 특성상 페이지 이동 시 화면이 reloading이 되기 때문인데요.

하지만 Link 태그는 화면의 reloading 없이 url에만 변화를 주면서 페이지 이동을 가능하게 합니다.

사용법은 a 링크와는 약간 다릅니다. a 링크에서는 이동하고자 하는 url을 href에 지정했습니다. 하지만 Link 태그는 to 객체의 pathname의 값으로 url을 지정합니다.

// a 링크
<a href="서울특별시 url">서울특별시</a>

// Link 태그
<Link to={pathname: "여수시 url"}>여수시</Link>

또한 해당 url로 이동할 때 state를 전달할 수도 있는데요, to 객체의 인자로 state를 전달할 수 있네요. 다음의 코드는 그것의 사용 예제입니다.

function Movie({id, year, title, summary, poster, genres}) {
  return (
    <Link to={{
      pathname: `/movie/${id}`,
      state: {
        year,
        title,
        summary,
        poster,
        genres
      }
    }}>
  ...
  </Link>
  )