위 코드에서는 categories라는 배열 안에 name과 text 값이 들어가 있는 객체들을 넣어 주어서 한글로 된 카테고리와 실제 카테고리 값을 연결시켜 주었습니다. 여기서 name은 실제 카테고리 값을 가리키고, text 값은 렌더링할 때 사용할 한글 카테고리를 가리킵니다.

다 만든 컴포넌트는 App에서 NewsList 컴포넌트 상단에 렌더링하세요.

App.js

import React from 'react';
import NewsList from './components/NewsList';
import Categories from './components/Categories';
 
const App = () => {
  return (
    <>
      <Categories />
      <NewsList />
    </>
  );
};
 
export default App;

---