router

[프론트엔드] REACT 뉴스 뷰어 만들기 [8]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [7] 1. 리엑트 라우터 적용 이번에는 state로 관리했던 카테고리 값을 라우터로 변경해볼 예정이다. 먼저 라우터 라이브러리를 프로젝트에 설치한다. **주의사항 router 설치 시에 6.x.x 이상 버전을 설치하면 기존 라우터 사용 방식이 달라져서 오류가 발생하여 5.x.x 버전을 설치하고 진행한다. 관련 글은 아래애 있으니 참고 2022.03.15 - [프론트엔드/React] - [프론트엔드] React Router v6 업데이트 yarn add react-router-dom - index.js 해당 파일에 라우터를 적용한다. import React from 'react'; import Reac..

[프론트엔드] REACT 뉴스 뷰어 만들기 [7]

이전 글 2022.03.26 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [6] 1. 활성화된 카테고리 API 지정하기 이번에는 지정한 카테고리로 변경될때 뉴스 API도 변경되도록 연동할 생각이다. 이전에 App.js "NewsList" 컴포넌트에 props로 category state를 넘겨준 적이 있다. props로 넘겨준 state로 APi만 호출하면 이제 NewsList가 API 변경시 자동으로 랜더링 된다. - NewsList.js NewsList 컴포넌트에 먼저 props로 전달해준 category state를 선언한다. 선언한 props 값에 따라 API를 호출할 수 있도록 query파라미터를 만들어서 API에 넣어준다. 기본 값이 'all'이면 빈값을 주어서 ..

[프론트엔드] REACT 뉴스 뷰어 만들기 [6]

이전 글 2022.03.25 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [5] 1. 카테고리 기능 구현 뉴스 카테고리는 아래와 같이 여섯개의 카테고리를 사용한다. business(비즈니스) science(과학) entertainment(연예) sports(스포츠) health(건강) technology(기술) - App.js App.js 파일을 아래와 같이 수정한다. 선택한 카테고리를 관리할 state 컴포넌트에 넘겨줌으로써 클릭한 카테고리를 활성화 시켜줄 함수 두개를 props로 넘겨준다. import React, { useCallback, useState } from 'react'; import Categories from './components/Categories'..