api 연결 후 카테고리 목록 띄우기

1. axios(서비스 기반 비동기 처리) 설치

 - Terminal 에서 npm i axios 설치

 

---

 

2. 연결 경로 지정

- src > api > video.js (api 관리하는 파일 별도로 생성하여 지정)

 - 위에서 basURL로 지정한 경로는 카테고리 목록 select로 가지고오는 경로임

 - 경로 관리하는 파일을 따로 만들어 export 했기 때문에 전역에서 사용 가능

 - 카테고리 목록 받아올 component에서 import 후 사용하면 됨

 

---

 

3. Controller에서 CrossOrigin 추가

 

---

 

 

4. Home.js 에서 목록와서 보여주기

const [categories, setCategories] = useState([]);

const categoryAPI = async () => {
	const result = await getCategories();
    setCategories(result.data);
};
  
useEffect(() => {
    categoryAPI();
}, []);

- useState와 useEffect를 이용하여 목록 받아오기

- useEffect로 배열부분을 비우면 처음 한 번만 호출하게 할 수 있음

 

return

 

{categories.map((category) => (
	<a href="#" key={category.categoryCode}>
		{category.categoryName}
	</a>
))}

 

 

이렇게 하면 db에 저장되어있는 카테고리 목록이

이런식으로 받아와짐