[프론트엔드] 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';
import NewsList from './components/NewsList';

const App = () => {

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

  return (
    <>
      {/* props로 카테고리 state와 함수를 넘겨줌 */}
      <Categories  category={category} onSelect={onSelect} />
      <NewsList category={category}/>
    </>
  );
};

export default App

 

 

 

 

- Categories.js

 

components 폴더 안에 다음 파일을 작성해준다.

 

카테고리 데이터는 배열로 만들어서 선언한다.

선언한 카테고리 데이터를 map을 배열로 만들어서 아래와 같이 뿌려주도록 한다..:

 

props로 위에서 넘겨받은 함수와 state를 사용해서 카테고리 클릭 시 active로 컴포넌트를 변경해주도록 한다.

 

styled 컴포넌트에서 props로 active 시킨 카테고리를 구분할 수 있도록 css를 적용하도록 한다. 

 

import React from "react";
import styled, {css} from "styled-components";

// 카테고리 배열생성
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.div`
    font-size: 1.125rem;
    cursor: pointer;
    white-space: pre;
    text-decoration: none;
    color: inherit;
    padding-bottom: 0.25rem;

    &:hover {
        color: #495057;
    }

    ${props => 
        props.active && css`
            font-weight: 600;
            border-bottom: 2px solid #22b8cf;
            color; #22b8cf;
            &:hover {
                color: #3bc9db;
            }
        `}

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

const Categories = ({ onSelect, category}) => {
    return (
        <CategoriesBlock>
            {categories.map(v => (

                <Category 
                    key={v.name}
                    active={category === v.name}
                    onClick={() => onSelect(v.name)}
                >
                    {v.text}
                </Category>
            ))}
        </CategoriesBlock>
    );
};

export default Categories;

 

 

2. 화면 결과

 

이제 프로젝트에서 마우스를 올려서 클릭한 카테고리가 활성화된 것을 확인해보자.