[리스렌즈] 메인페이지 (TypeScript, axios, Data) 데이터 연결

 

메인 페이지는 가전 구독 리뷰 커뮤니티인 만큼 렌탈 가능한 가전 제품과

해당 제품에 대한 리뷰를 한눈에 볼 수 있도록 Swiper 배너를 이용해 메인 화면을 구성했다.

 

 

리뷰 또한 swiper를 이용해 다양한 리뷰를 확인할 수 있도록 구현했다.

 

메인페이지에서 맡은 역할은 서버에서 데이터를 불러와 프론트 페이지와 연결하는 부분이었다.

 

---

 

가장 먼저 useEffect를 활용해 컴포넌트가 마운트 될 떄 axios 요청으로 서버에서 제품 데이터와 리뷰 데이터를 불러올 수 있도록 했다.

 

서버에서 가져온 데이터들은 useState를 이용해 배열로 저장해두었으며,

TypeScript를 활용하기 때문에 외부 ts파일에 활용할 데이터의 타입부터 먼저 정의해주었고, 정의해둔 타입을 불러와 배열의 타입도 지정해주었다.

 const [products, setProducts] = useState<ProddbProps[]>([]);

 const [reviews, setReviews] = useState<RevdbProps[]>([]);

 

 

이렇게 해서 서버에서 정상적으로 axios 요청이 작동해 데이터를 프론트로 받아오게 되면 useState로 모든 데이터들의 상태를 관리할 수 있게 되었다.

 

728x90

 

 

axios 처리에 대해서 조금 더 자세히 작성해보자면,

 

useEffect 내부에 GET 요청으로 url을 지정해준 후 then 구문을 이용해 요청 성공시 동작할 기능을 작성했다.

먼저 불러온 제품 데이터들을 setProducts를 이용해 products 배열에 저장해주었고,

setReviews를 이용해 reviews 배열에는 리뷰 데이터들을 저장해주었다.

 

배열에 저장된 데이터들을 활용해 화면 상에 보여질 수 있도록 map 메소드로 필요한 각 데이터들을 불러올 수 있었다.

ex. {product.prod_img}, const filteredReviews = reviews.filter((review) => review.prod_idx === product.prod_idx);

 

 

또한, axios 요청에서 에러가 발생 시 catch 구문을 통해 콘솔 창에 에러메세지를 표시하도록 구현했다.

 

useEffect(() => {

    axios

      .get(`${BACKHOST}/main`)

      .then((response) => {

        setProducts(response.data.data.products);

        setReviews(response.data.data.reviews);

      })

      .catch((error) => {

        console.error("Error fetching products:", error);

      });

  }, []);

 

 

 

아래는 구현한 메인페이지 화면이다.

 

메인 페이지