DAY 99 - wish 목록 뿌리기 코드 내용 이해하기(2024.11.26)

먼저 프론트인 mypage_wish.jsx를 보면

  // 찜 목록 가져오기
  useEffect(() => {
    const fetchWishlist = async () => {
      try {
        const response = await axios.get("http://localhost:8080/api/user/wish/list", {
          params: { userid }, //쿼리 파라미터로 userid 전달
        });
        const wishlist = response.data.wishlist || []; //서버에서 받은 데이터 저장
        
        // wishlist 안에서 product 정보를 추출하여 상태에 저장
        const formattedWishlist = wishlist.map(item => item.product);
        setWishlistItems(formattedWishlist);
      } catch (error) {
        console.error("Failed to fetch wishlist:", error);
      }
    };
    fetchWishlist();
  }, [userid]); //userid가 변경될 때마다 함수 호출
  console.log(wishlistItems);

 

이런식으로 찜 목록을 가져오는 코드가 되어있다.

흐름을 보면 userid가 변경될 때마다 useEffect 함수가 호출이 되는데

 

        const response = await axios.get("http://localhost:8080/api/user/wish/list", {
          params: { userid }, //쿼리 파라미터로 userid 전달
        });

여기서 axios로 호출을 하면

---

WishController.java로 오게된다.

    // 찜한거 출력 - 24.11.25 - yjy
    @GetMapping("/list")
    public ResponseEntity<?> printWish(@RequestParam(name = "userid") int userId) {
        Map<String, Object> map = wishService.printWish(userId);
        
        return ResponseEntity.ok(map);

    }

위에서 보낸 userid를 받고 그 받은 userid를 들고

printWish 함수를 호출한다.

---

WishService 인터페이스를 지나서

package com.example.demo.user.service;

import java.util.List;
import java.util.Map;

import com.example.demo.user.dto.WishDTO;

public interface WishService {

    public void addProduct(int productId, int userId);

    public Map<String, Object> printWish(int userId);

    public void deleteProduct(int productId, int userId);

}

---

대망의 WishServiceImpl.java로 오게되는데

    // 찜한거 출력 - 24.11.25 yjy
    @Override
    public Map<String, Object> printWish(int userId) {
        Map<String, Object> map = new HashMap<>();

        // userId에 해당하는 사용자의 WishEntity 찾기 
        WishEntity wishEntity = wishRepository.findById(userId).orElse(null);

        //유저의 찜 목록이 존재한다면
        if (wishEntity != null) {
            // UserWishEntity 리스트에서 각 상품 정보 가져오기
            List<ProductDTO> productList = wishEntity.getUserWishList().stream()
                // 각 UserWishEntity의 ProductEntity를 ProductDTO로 변환    
                .map(userWish -> ProductDTO.toGetProductDTO(userWish.getProductEntity())) // ProductEntity를 ProductDTO로 변환
                .collect(Collectors.toList());

            // 가져온 ProductDTO 리스트를 WishDTO 리스트로 변환
            List<WishDTO> wishDTOList = productList.stream()
                .map(product -> {
                    // WishDTO 객체 생성 및 설정
                    WishDTO wishDTO = new WishDTO();
                    wishDTO.setProduct(product); // ProductDTO를 WishDTO에 설정
                    return wishDTO; // 변환된 WishDTO 반환
                })
                .collect(Collectors.toList());

            // 최종적으로 'wishlist'라는 키에 WishDTO 리스트를 맵에 저장
            map.put("wishlist", wishDTOList); 
        } else {
            // 찜 목록이 없다면 'wishlist'에 빈 리스트를 저장
            map.put("wishlist", new ArrayList<>()); 
        }
        return map;
    }

전체적인 코드는 이러하다.

 

하나하나 뜯어서 보면

1. 먼저 map으로 반환할거기에 선언을 해준다.

    @Override
    public Map<String, Object> printWish(int userId) {
        Map<String, Object> map = new HashMap<>();

 

2. 유저의 찜 목록이 존재하는지 확인 후

        //유저의 찜 목록이 존재한다면
        if (wishEntity != null) {

 

3. UserWishEntity 리스트에서 상품 정보만 가져온다.

 // UserWishEntity 리스트에서 각 상품 정보 가져오기
            List<ProductDTO> productList = wishEntity.getUserWishList().stream()

 

내가 여기서 어려웠던 부분을 추가로 설명해보면

wishEntity.getUserWishList()의 의미

• wishEntity에는 사용자 한 명의 찜 목록과 관련된 정보가 담겨 있다.
• getUserWishList()는 WishEntity에 연결된 모든 UserWishEntity 리스트를 반환한다.
• 각 UserWishEntity는 개별적으로 **찜한 상품 정보(ProductEntity)**를 참조하고 있다.

4. .map을 통해서 각 UserWishEntity의 ProductEntity를 ProductDTO로 변환을 한다.

    .map(userWish -> ProductDTO.toGetProductDTO(userWish.getProductEntity())) // ProductEntity를 ProductDTO로 변환

이 때 부르는 ProductDTO의 toGetProductDTO 메서드는

package com.example.demo.store.dto;

import com.example.demo.store.entity.ProductEntity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class ProductDTO { // 상품
    private Integer id;
    private String name;
    private String img;
    private String content;
    private int price;

    // entity => dto 변환

    // 상품 데이터 출력
    public static ProductDTO toGetProductDTO(ProductEntity entity) {
        ProductDTO dto = new ProductDTO();
        dto.setId(entity.getId());
        dto.setName(entity.getName());
        dto.setImg(entity.getImg());
        dto.setContent(entity.getContent());
        dto.setPrice(entity.getPrice());

        return dto;
    }
}

이런식으로 되어있다.

 

이러한 과정들을 통해서 각 UserWishEntity의 ProductEntity를 ProductDTO로 변환되는 것이다.

 

5. .collect(Collectors.toList())로 리스트 생성

    .collect(Collectors.toList());

 

6. 가져온 ProductDTO 리스트를 WishDTO 리스트로 변환을 해준다.

        // 가져온 ProductDTO 리스트를 WishDTO 리스트로 변환
        List<WishDTO> wishDTOList = productList.stream() // 찜한 상품의 정보가 담김
            .map(product -> {
                // WishDTO 객체 생성 및 설정
                WishDTO wishDTO = new WishDTO();
                wishDTO.setProduct(product); // ProductDTO를 WishDTO에 설정
                return wishDTO; // 변환된 WishDTO 반환
            })
            .collect(Collectors.toList());

먼저 productList에는 찜한 상품의 정보가 담겨있다.

그걸 map을 돌려가면서 그 정보를 wishDTO에 넣고 그 wishDTO를 반환한 것을 collect를 통해서 List로 모으고

그 모은 List를 wishDTOList에 넣는다.

 

7. map에 wishlist를 담아서 return한다.

            // 최종적으로 'wishlist'라는 키에 WishDTO 리스트를 맵에 저장
            map.put("wishlist", wishDTOList); 
        } else {
            // 찜 목록이 없다면 'wishlist'에 빈 리스트를 저장
            map.put("wishlist", new ArrayList<>()); 
        }
        return map;

 

---

그러고 다시 프론트인 mypage_wish.jsx로 온다.

const wishlist = response.data.wishlist || []; //서버에서 받은 데이터 저장

서버에서 받은 데이터를 wishlist에 저장을 한다.

 

그 wishlist에서 이제 product 정보만 필요하므로

        // wishlist 안에서 product 정보를 추출하여 상태에 저장
        const formattedWishlist = wishlist.map(item => item.product);
        setWishlistItems(formattedWishlist);

product 정보만 담은 formateedWishlist를 wishlistItems에 넣는다.

 

useEffect(() => {
  fetchWishlist(); // 컴포넌트가 렌더링되거나 `userid`가 변경될 때 호출
}, [userid]);

useEffect는 React에서 특정 이벤트(예: 컴포넌트 렌더링) 또는

값의 변화(userid)에 따라 fetchWishlist를 호출한다는 의미이다.

---

그리고 이제 여기서 item을 돌려가며 출력하면 끝 !!

            {wishlistItems.map((item) => (
              <div key={item.id} className={styles.wishlistItem}>
                <div className={styles.itemImage}>
                  <img src={item.image} alt={item.name} />
                </div>
                <div className={styles.itemInfo}>
                  <div className={styles.itemName}>{item.name}</div>
                  <div className={styles.itemPrice}>{item.price}원</div>
                  <button
                    className={styles.removeButton}
                    onClick={() => handleRemove(item.id)}
                  >
                    Remove
                  </button>
                </div>
              </div>
            ))}