[ React Toy Project ] News Viewer | 뉴스 뷰어 실습 프로젝트

Da-hye·2021년 6월 24일
0

React

목록 보기
8/8
post-thumbnail

News Viewer Project

외부 API를 이용하여 최신 뉴스 기사 불러오는 실습 프로젝트

✨ 공부한 기술

React, axios, Sass (+ styled-components), React router


📚 TIL

Axios

원하는 뉴스 기사 데이터를 불러오기 위해 비동기 통신 기술인 axiosGET 통신을 이용하였다.


async/await

서버의 API를 사용할 때에는 네트워크 송수신 과정에서 시간이 소요되기 때문에 작업이 즉시 처리되게 하지 않고, 응답이 수신될 때 까지 기다렸다가 전달받은 응답 데이터를 처리하게 된다. 이를 '비동기적 처리' 라고 한다.

💡 동기적 처리 : 해당 요청 작업이 끝날 때 까지 중지 상태가 되어 다른 작업을 수행할 수 없게 하는 것

다음 코드에서는 렌더링 시 작업을 즉시 처리하기 때문에, 응답 받은 response 데이터를 찾을 수 없어 오류가 발생할 수 있다.

이는 아래 첨부 사진과 같이 async, await을 이용하여 비동기적으로 처리해준다.

💡 useEffect 함수에는 async를 붙힐 수 없기 때문에, 내부 async 함수를 따로 만들어야 한다!


useEffect

사용자가 선택한 카테고리 값에 따라 API URL의 query string이 달라지기 때문에 useEffect의 배열 안에 category 를 넣어주었다. category 값이 변경될 때마다 해당 URL을 통해 데이터를 다시 불러오도록 한다.


Styled-Components

Styled-Components 는 npm 패키지를 이용해 쉽게 다음 명령어로 설치 가능하다.

npm i styled-components

실제로 사용하기 위해 Styled-Components에서 Styled를 import를 해준다.

import styled from "styled-components"

위 코드에서는 React 컴포넌트인 NavLink에 대한 스타일링을 Category에 정의하여 사용하도록 하였다.

profile
🌱 차근차근, 오래 즐겁게!

0개의 댓글