[프론트엔드] 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 ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'  

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

- NewsPage.js

 

 

src 디렉토리에 pages/NewsPage 를 추가한다.

 

 

match 에서 parms 접근 시 undefined 에러가 발생하여 useParms hook으로 대체사용

 

import React from "react";
import Categories from "../components/Categories";
import NewsList from "../components/NewsList";
import { useParams } from 'react-router-dom'

const NewsPage = () => {
    // 카테고리가 선택되지 않았을 경우 기본값 'all'
    // match undefined 오류로  useParams hook 사용
    const parms = useParams() 
    const category = parms.category || 'all'

    return (
        <> 
            <Categories/>
            <NewsList category={category}/>
        </>
    );
};

export default NewsPage;

 

 

- App.js

 

 

이제 Route path 경로를 설정해주고 새로 생성한 컴포넌트를 보여줄 컴포넌트로 지정한다.

 

path에서 ?의 의미는 category 값이 선택적으로 들어간다는 의미이다. 있을수도 없을수도 있는 or 같은 방식의 문법이다. 

 

따라서 값이 없으면 전체 카테고리를 기준으로 한다.

 

import React from 'react';
import { Route } from 'react-router-dom'
import NewsPage from './pages/NewsPage';

const App = () => {

  // // 기본 카테고리 state 선언
  // const [category, setCategory] = useState('all')
  // // 콜백으로 사용 할 카테고리 함수
  // const onSelect = useCallback(Category => setCategory(Category), [])

  return <Route path="/:category?" component={NewsPage} />;
};

export default App

 

 

- Category.js

 

 

이제 props가 없어졌으니 선택한 카테고리에 css를 적용 가능하도록  NavLink로 대체한다.

 

 

import React from "react";
import styled from "styled-components";
import { NavLink } from 'react-router-dom';

// 카테고리 배열생성
const categories = [
    {
        name: 'all',
        text: '전체보기'
    },
    {
        name: 'business',
        text: '비즈니스'
    },
    {
        name: 'science',
        text: '과학'
    },
    {
        name: 'entertainment',
        text: '연예'
    },
    {
        name: 'sports',
        text: '스포츠'
    },
    {
        name: 'health',
        text: '건강'
    },
    {
        name: 'technology',
        text: '기술'
    }
]

const CategoriesBlock = styled.div`
    display: flex;
    padding: 1rem;
    width: 768px;
    margin: 0 auto;
    @media screen and (max-width: 768px) {
        width: 100%;
        overflow-x: auto;
    }
`;

const Category = styled(NavLink)`
    font-size: 1.125rem;
    cursor: pointer;
    white-space: pre;
    text-decoration: none;
    color: inherit;
    padding-bottom: 0.25rem;

    &:hover {
        color: #495057;
    }

    &.active {
        font-weight: 600;
        border-bottom: 2px solid #22b8cf;
        color; #22b8cf;
        &:hover {
            color: #3bc9db;
        }
    }

    & + & {
        margin-left: 1rem;
    }
`;

const Categories = () => {
    return (
        <CategoriesBlock>
            {categories.map(v => (

                <Category 
                    key={v.name}
                    activeClassName="active"
                    exact={v.name === 'all'}
                    to={v.name === 'all' ? '/' : `${v.name}`}
                >
                    {v.text}
                </Category>
            ))}
        </CategoriesBlock>
    );
};

export default Categories;

 

2. 화면 결과

 

프로젝트에서 url이 변경되어 있는것을  확인해보자.