[리액트] 날씨 API 가져오기

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

오늘의 수업 주제는 리액트로 서버에서 API를 사용하여 데이터를 불러와 웹에 띄워보는 작업이에요

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용

 

리액트로 서버에서 API를 사용하여 데이터를 불러와 웹에 띄우기

 

API란 ?

내가 만들어 놓은 것을 상대방도 쓸 수 있도록 가공해 놓은 것입니다. 

즉, html을 편리하게 가져올 수 있고, 우리가 사용할 수 있도록 가공해 놓은 것이라 생각하면 된답니다.

 

 

오늘은 날씨 API를 가져와 볼거에요. 

 

우선, 

https://openweathermap.org/current 페이지에서 날씨 정보 서버를 가져오는데 API를 사용할 거에요. 

회원가입을 하고 본인의 KEY를 꼭 가지고 있어야 합니다.

이 때 KEY는 본인이 웹 사이트에 가입했다는 것을 증명해줍니다.

 

아래의 링크 페이지에서 Bu city name으로 날씨 정보를 가져올 거에요.

 

Current weather data - OpenWeatherMap

---

 

이 때 Examples of API calls를 클릭해보면 London의 날씨 정보가 정리된 JSON 파일을 확인할 수 있고

우리는 이 JSON 파일을 가져오는 것이에요.

 

여기서 잠깐,

JASON이란 무엇일까요?

 

우리는 object 즉, 객체를 쓰면서 괄호를 열고 닫기하며 그 문법 형태로 주고받을 수 있도록 가공된 포맷

data를 가지고 오면서 여러가지 작업을 해야하는데

그러려면 미리 사람들이 만들어 놓은 모듈을 사용할 것이죠.

이렇게 미리 만들어 놓은 모듈의 파일이랍니다. 

 

자 이제 시작해 볼까요? 

 

• git bash에서 npm create-react-app을 작성하여 리액트 프로젝트를 만듭니다. 
• src 폴더에 components와 pages 폴더를 생성하고 pages 폴더 안에 Home 컴포넌트를 생성합니다. 
•  axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다.
  → 즉, axios를 이용하여 우리가 사용할 도시의 날씨 데이터를 HTTP 데이터로 가져옵니다. 

 

이 axios를 가져오기 위해 Home 컴포넌트에 다음과 같이 작성해준다. 

import axios from 'axios'

Home 컴포넌트는 Class 컴포넌트를 작성하는데 Class 컴포넌트를 사용하는 이유는

Home에 npm install-- save axios를 작성하여 axios를 받아와야하는데

이를 위해 상태가 필요하기 때문이에요. 

 

---

라이프사이클(lifecycle)이란? (생명주기)

 

React의 컴포너트는 생명주기(Life cycle)을 가집니다.

생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말합니다.
이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 합니다.

 

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 

컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생합니다. 

컴포넌트가 사용되고 소멸될 때 까지의 과정으로 렌더링 전 준비과정에서부터 페이지에 사라질 때 끝나기 때문에

웹을 끄면 컴포넌트도 꺼지게 됩니다. 

렌더링 직전에 똔느 컴포넌트 업데이트 전후에 해야할 작업이 있을 때 사용하면 좋습니다. 

 

라이프 사이클 이벤트 

 

1. componentDidMount() { }

 

Mount = 그림이 그려지고 나서, 즉 html이 실제 웹에 삽입되고 나서

component가 삽입되고 난 후에 함수 내부의 코드를 실행시킨다. 

 

2. componentDidUpdate() { }

 

Update= 상태가 변경될 때 실행이 된다. 변화를 시켜주는 행위를 update라 한다. 

즉, component가 업데이트 되고 나서 함수 내부의 코드를 실행시킨다. 

 

3. componentWillMount() { }

 

will mount = 삽입할 예정이다. 즉 html이 실제 웹에 삽입되기 전에(실제 웹이 그려지기전에_rendering)

함수내부의 코드를 실행시킨다. 

 

4. componentWillUpdate() { }

 

will update = 상태가 변경되기 전에

실제 component가 업데이트 되기 전에 함수 내부의 코드를 실행시킨다. 

 

5. componentWillReceiveProps() { }

 

props = 부모에서 자식으로 넘겨주는 데이터

will receive props = 부모가 자식에게 데이터를 넘겨주기 전에 함수 내부의 코드를 실행시킨다. 

 

 

라이프 사이클 이벤트 호출 순서

 

각 이벤트마다 console.log()를 작성하여 메소드 실행순서를 알아볼까요?

순서는,

will mount > render > did mount로 

1. 웹이 그려지기전에 함수 실행 (will mount)

2. 웹 그리기 (render) 

3. 웹이 그려지고 난 후에 함수 실행 (did mount)

 

 

 

 

 

 

상태가 바뀌었을 때 라이프 사이클 이벤트 호출 순서 

 

순서는, 

will update > render > did update로

1. 상태가 변경되기 전에(실제 component가 업데이트 되기 전에) 전에 함수 실행 (will update)

2. 웹 그리기 (render)

3. component가 업데이트 되고 난 수에 함수 실행 (did update)

 

 

어려워요ㅜ.ㅜ