카테고리 기능 구현

import React from "react";
import styled from "styled-components";

const categories = [
  { name: "all", text: "전체보기" },
  { name: "business", text: "비즈니스" },
  { name: "entertainment", text: "엔터테인먼트" },
  { name: "health", text: "건강" },
  { name: "science", text: "과학" },
  { name: "sports", 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%auto;
    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;
  }

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

const Categories = () => {
  return (
    <CategoriesBlock>
      {categories.map((c) => (
        <Category key={c.name}>{c.text}</Category>
      ))}
    </CategoriesBlock>
  );
};

export default Categories;

categories 배열 안에 name과 text 값이 들어간 객체들을 넣어 한글로 된 카테고리와 실제 값을 연결시켰다. name은 실제 카테고리 값, text는 렌더링할때 사용하는 한글 카테고리이다.

App.js에 렌더링하자.

import React from ‘react‘;
import NewsList from ‘./components/NewsList‘;
import Categories from ‘./components/Categories‘;


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



export default App;

상태관리

import React, { useState, useCallback } from ‘react‘;
import NewsList from ‘./components/NewsList‘;
import Categories from ‘./components/Categories‘;


const App = () => {
  const [category, setCategory] = useState(‘all‘);
  const onSelect = useCallback(category => setCategory(category), []);



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



export default App;

onSelect: category값을 업데이트하는 함수
그리고 category와 onSelect함수를 props로 전달해주자.
Categories.js에서 onSelect함수를 onClick으로 설정해주자.

import React from 'react';
import styled, { css } from 'styled-components';
 
const categories = [
  (...)
];
 
const CategoriesBlock = styled.div`
  (...)
`;
 
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(c => (
        <Category
          key={c.name}
          active={category === c.name}
          onClick={() => onSelect(c.name)}
        >
          {c.text}
        </Category>
      ))}
    </CategoriesBlock>
  );
};
 
export default Categories;