카테고리 기능

1. UI만들기

Categories.js

import styled from "styled-components";

const categories =[
  {
    name:'all',
    text:'전체보기'
  },
  ...
  {
    name:'technology',
    text:'technology'
  },  
]

const CategoriesBlock =styled.div`
  display:flex;
  ...
  overflow-x:auto
`
const Category = styled.div`
  font-size:1.125rem
  cursor:pointer;
  ...
`;

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

Category 상태 관리하기

App.js

const App = () => {
  const [category,setCategory] = useState('all')
  const onSelect = useCallback(category=>setCategory(category),[])
  return (
    <>
      <Categories category={category} onSelect={onSelect}/>
      <NewsList category={category}/>
    </>
  )  
}

onSelect가 되면 category 바꿔주기

Categories에서 Category를 onClick으로 설정

import styled,{css} from "styled-components";
...
const Category = styled.div`
  ...
  
  &:hover{
    color:#495057;
  }
  ${props=>
  props.active && css`
    font-weight:1000;
    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

API를 호출할 때 카테고리 지정하기

NewsList.js

const NewsList = ({category})=>{
  const [articles,setArticles]= useState(null);
  const [loading,setLoading] = useState(false)

  useEffect(()=>{
    const fetchData = async()=>{
      setLoading(true);
      try{
        const query = category ==='all' ? '': `&category=${category}`;
        const response = await axios.get(
          `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=755b48e892b34cab8c2f6f7be92d8944`
        )
        setArticles(response.data.articles)
      }catch(e){
        console.log(e)
      }
      setLoading(false)
    }
    fetchData();
  },[category])

현재 category 값이 무엇인지에 따라

all 이면 query 값을 공백으로 설정하고 all 이 아니라면 "&=category=카테고리" 형태의 문자열로

그리고 그 값을 주소에 포함시켜 준다 .

category 값이 바뀔 때마다 뉴스를 불러와야 하기 때문에 useEffect 마지막의 의존배열(두번째 파라미터에 [category]를 넣어줘야한다.