프론트엔드 11.11 세션

1. 라우팅? 라우터?

라우팅(routing)은 쉽게 말해서 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미합니다. 리액트는 싱글 페이지 어플리케이션(SPA)으로 하나의 html 페이지를 사용하고, 그 외에 필요한 많은 데이터들은 자바스크립트를 사용해 받아와 화면에 업데이트 해주게 됩니다. 따라서 마치 다수의 html페이지가 있는 것 같지만 사실은 하나의 페이지에 여러 개의 데이터들이 컴포넌트로 연결되어 있는 구조를 갖게 됩니다.

그리고 리액트 라우터(React Router)는 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공해주는 역할을 수행하고, 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있습니다.

2. 리액트 라우터 사용법

그럼 이제 라우터의 사용법을 간단히 알아볼까요?

먼저 라우터를 적용할 프로젝트를 생성한 후, 해당 디렉토리로 이동해 리액트 라우터 라이브러리를 설치해줍시다.

$ npx create-react-app router-practice

$ cd router-practice
$ yarn add react-router-dom

자 프로젝트 생성과 라우터 라이브러리의 설치가 끝났으면 이제 프로젝트에 라우터를 적용시켜봅시다!프로젝트에 라우터를 적용할 때는 index.js 파일에서 BrowserRouter(react-router-dom에 내장되어 있음)로 연결시킬 각 컴포넌트들을 감싸주면 됩니다.

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

//App을 BrowserRouter로 감싸줍니다
ReactDom.render(
	<BrowserRouter>
		<App />
	</BrowserRouter>,
	document.getElementById('root')
);

그리고 원하는 컴포넌트를 보여주기 위해서는 Route라는 컴포넌트를 사용합니다. Route 컴포넌트 사용시의 규칙은 다음과 같습니다.

<Route path="주소규칙" element={원하는 컴포넌트}/>

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home'; //예시 컴포넌트

const App = () => {
	return (
		<Router>
			<Routes>
				<Route Path="/" element={<Home />} /></Route>
			</Routes>
		</Router>
	);
};

export default App;

자 이제 yarn start 를 터미널에 입력해 개발 서버를 시작하면 원하는 컴포넌트가 보이게 됩니다!

그리고 Link 컴포넌트를 사용해 다른 페이지로 이동하는 방법도 있는데요, 리액트 라우터를 사용할 때 우리가 흔히 아는 a태그를 바로 사용하면 안됩니다. a태그를 사용하게 되면 새로운 페이지를 불러오게 되기 때문입니다.

Link 컴포넌트는 새로운 페이지를 불러오는 것을 막고 History API로 브라우저 주소 경로를 바꾸는 기능이 내장되어 있습니다!

Link 컴포넌트는 다음과 같이 사용할 수 있습니다.

<Link to="경로">link 이름</Link>

import { Link ] from 'react-router-dom';

const link = () => {
	return (
		<div>
			<p>링크 컴포넌트 배우기</P>
			<Link to="/this is example">예시</Link>
		</div>
	);
};

export default Link;

3. 실습을 위한 open API 받아오기

1) 개인 key 받기

: OpenWeatherMap(https://openweathermap.org/)에 접속해 회원가입과 로그인을 한 후 오른쪽 상단 개인 정보 탭의 ‘My API keys’에 들어가 개인 key를 받아옵니다.

2) 필요한 API 불러오기

: 다음으로 상단의 API 탭에 들어가 필요한 API를 API doc을 참고해 선택해봅시다! 우리가 만들고자 하는 서비스는 현재 날씨 정보를 불러오는 간단한 웹페이지이기 때문에 ‘Current Weather Data’ API의 doc을 선택해 불러오겠습니다.

문서를 확인하면 아래와 같은 형태의 API call을 확인할 수 있어요! API call에서 사용하는 parameter에 관한 설명과 사용 에시는 doc에 자세히 설명되어있어 참고해 사용하면 웹페이지에 더 다양한 기능을 추가할 수 있어요. API를 호출하면 JSON 형태로 data를 받을 수 있어요.

이제 open API를 사용할 준비가 끝났어요! 그렇다면 어떻게 사용하는지 알아봐야겠죠?

리액트에서 api 호출을 요청할때 사용하는 방식 중 하나인 ‘axios’에 대해 간단히 알아볼거에요 🙂

*axios란?

axios는 웹 통신 기능을 제공하는 라이브러리로 프론트엔드와 백엔드의 통신을 쉽게 하기 위해 사용하기 위해 사용해요. Fetch와 달리 자바스크립트 내장 라이브러리가 아니기 때문에 별도로 설치와 import가 필요하지만, Axios가 Fetch보다 브라우저 호환성이 뛰어나 Axios를 사용해보려고 해요!

npm install axios -> 터미널에 입력해 axios 설치
import axios from 'axios' -> axios import

Axios는 ‘Post, Get, Delete, Put’이라는 메소드를 통해 CRUD를 지원하는데, 오늘 우리가 만들 웹페이지는 API에서 날씨 정보를 불러오는 기능만을 필요로 하기 때문에 axios로 get요청을 보내는 방법만 살펴보도록 할게요!

axios.get(url).then(response=>console.log(response)

get 요청을 다음과 같이 보낸후 response를 확인해보면 api 호출 결과를 확인할 수 있어요. 자세한 사용 방법은 실습을 통해 알아보도록 합시다~

4. 날씨 사이트 만들기

먼저 vscode의 터미널을 열고 create react app을 통해 리액트 폴더를 생성한 후, 만든 폴더로 이동해 리액트 앱을 실행시켜 봅시다!

npm create react-app '폴더명' -> 리액트 폴더 생성
cd '폴더명' -> 폴더로 이동
npm start -> 리액트 실행

그 후 생성된 폴더 내에 불필요한 파일들을 정리해봅시다! public폴더의 index.html 파일과 src 폴더의 App.js 파일, index.js 파일만 남기고 모두 삭제한 후, 위 파일들을 아래 사진과 같이 정리합니다.

그럼 이제 날씨 앱을 만들 준비가 끝났어요! 본격적으로 시작해 봅시다 😎

메인 홈 화면을 만들기 위한 Home.js 파일과 세부 페이지를 위한 detail.js파일을 src 폴더 내에 만든 후 App.js 파일에 날씨를 알아보고 싶은 도시를 검색하기 위한 검색 기능을 만들어볼게요! 위에서 설명한 것처럼 router를 사용하기 위해 import를 먼저 진행한 후 시작해볼거에요.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

우선 도시 값을 저장하는 city 변수와, 검색창에 입력된 값을 임시로 저장하는 cityTemp 변수의 상태 변화를 관리하기 위해 useState를 사용할거에요. useState에 관한 자세한 설명은 '0916 react-hooks'세션 db자료를 참고해주세요!

input태그로 받아온 값을 setCityTemp를 이용해 최종 검색 단어를 저장하고, 그 값을 setCity로 넘겨 검색하고자 하는 도시를 저장해요. 그리고 city 값을 Home 컴포넌트의 props로 전달합니다. 이때 Home 컴포넌트는 라우터를 통해 라우팅해야 하니 Router, Routes, Route로 감싸줘요!

<Router>
      <Routes>
          <Route path="/" element={<Home city={city} />}></Route>
      </Routes>
</Router>

그럼 지금부터 city값을 활용해 Home 컴포넌트로 메인 홈 페이지를 만들어볼게요!
Home.js 파일에서는 App.js에서 넘겨준 props를 활용해 기본적인 html 코드를 작성했어요. 메인 페이지에는 간단한 정보만 나타내기 위해 도시 이름과 현재 기온, 날씨 키워드 정도만 출력해볼게요. 세부 페이지로 넘어가기 위한 버튼도 만들어줬어요!그럼 이제 날씨 정보를 받아와야겠죠? 위에서 공부한 API와 Axios를 실습해볼 시간이에요!axios를 import한 후 getWeather라는 함수가 호출될 때 마다 날씨 정보를 받아오는 형태로 작성해볼게요!

axios.get(`API call`)

axios의 url 부분에 날씨 API 콜을 입력하고, API문서를 참고해 옵션과 개인 api 키를 입력해 url을 완성해요. 우리가 이용할 API콜에는 도시 이름을 작성해주면 되기 때문에 props로 받아온 city값을 중간에 넣어줘요. 이제 response를 확인해 보면 지정한 도시의 날씨 정보들을 얻을 수 있어요! 메인 페이지에서는 그 중 main에 해당하는 현재 기온 정보와, weather에 해당하는 날씨 키워드 정보만 이용할 예정이라 useState를 활용해 이 두 값을 저장해줄게요!

도시 이름이 변할때만 axios를 통해 날씨 정보를 불러오기 위해서 getWeather함수를 useEffect로 감싸주고, deps값에 [props.city]를 넣어줬어요. useEffect에 대한 자세한 설명 역시 '0916 react-hooks'세션 db자료를 참고해주세요!
실행해보면 다음과 같이 검색값이 바뀔때마다 날씨 정보를 잘 불러오는 것을 확인할 수 있어요!!!!

이와 비슷한 방식으로 detail.js페이지도 빠르게 완성해볼게요!main페이지와 유사하게 만들었지만 이번에는 더 자세한 정보를 담고있어요!
detail.js 파일도 App.js 파일에 라우터를 이용해 라우팅이 가능하도록 연결해주면 화면에 잘 나타나는 걸 확인할 수 있어요!

<Router>
      <Routes>
          <Route path="/" element={<Home city={city} />}>
          <Route path="/detail" element={<Detail city={city} />}></Route>
      </Routes>
</Router>

그럼 마지막으로 이 두 페이지를 버튼을 통해 이동할 수 있도록 라우터로 연결해야겠죠?

 	  <Link to={`/detail`}>
        <button>more info</button>
      </Link>

리액트에서는 a태그가 아닌 Link태그를 이용해 링크를 걸어주기 때문에 다음과 같이 버튼 클릭시 '/detail' 링크로 넘어가게 만들어줘요!

---

지금까지 간단한 api를 이용해 날씨 정보를 받아오고, 라우터를 통해 페이지가 두개 이상일때 어떻게 관리하는지 실습해보았는데요! 여기까지 따라오시느라 모두 수고 많으셨어요!!

아직 css도 없고 한번에 하나의 도시의 날씨 정보만 받아오는 간단한 웹서비스이니 모두 스스로 복습해 보면서 더 멋진 나만의 날씨 알리미 서비스로 발전시켜보시길 바랄게요😊