프로그래머가 되는 꿈

4. 쇼핑몰 웹사이트 만들기 (9) 본문

프론트엔드 (Front-end)/React 프로젝트

4. 쇼핑몰 웹사이트 만들기 (9)

AI박사 2026. 1. 29. 12:31

api를 불러서 보여주기만 하면 된다!

 

ProductAll.js 페이지에서 api호출을 할 것이다!!

api호출은 어디서 해야한다? useEffect() - LifeCycle 함수 중 하나~!!!

 

 

useEffect() 는 2개의 파라미터(매개변수)를 가진다 - () 함수(function) & [ ] 배열(array)

 

getProducts()함수를 호출해줄 것이다. 아직 안만들었으니 const~해준다.

 

모든 제품의 정보를 가져오고 싶은것!(목표) = 

http://localhost:5000/products

url을 fetch해주세요

data는 response의 json에서 뽑아와주세요

data를 프린트(출력)해주세요

 

async 잊지 말기!!

 

<실행>

npm start 입력!

 

New Terminal을 선택해서.... 

입력!

다음으로...

http://localhost:3000 으로 들어간다.

 

상단 일부분

<결과>

 

이제 데이터를 UI에 보여주는 일만 남았다!