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
const App = () => {
const [category,setCategory] = useState('all')
const onSelect = useCallback(category=>setCategory(category),[])
return (
<>
<Categories category={category} onSelect={onSelect}/>
<NewsList category={category}/>
</>
)
}
onSelect가 되면 category 바꿔주기
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
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]를 넣어줘야한다.