Conversation
|
주요 변경사항을 잘 적어주셔서 제가 파악하기가 쉬웠습니다 ! |
| const paramsString = JSON.stringify(requestParams); | ||
|
|
||
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| try { | ||
| const parsedParams = JSON.parse(paramsString); |
There was a problem hiding this comment.
여기서 paramString을 stringfy했다가 parse하는 이유가 무엇일까요?
There was a problem hiding this comment.
const { data: productData = INITIAL_PRODUCTID } = useFetch(
// getProductId(),
getProductApiCall(id),
{
productId,
},
INITIAL_PRODUCTID
);
const fetchData = async () => {
try {
const parsedParams = JSON.parse(paramsString);
// const result = await apiCall(parsedParams);
const result = await apiCall();
setData(result);
} catch (error) {
console.error("데이터 패칭 실패:", error);
}
};
// 함수를 리턴하는 함수
export const getProductApiCall = (id) => () => getProductId({ productId: id });useFetch 커스텀훅을 작성하신 점 너무 잘하셨습니다 !
함수를 리턴하는 함수를 이용하시면 useFetch 내부에서 파라미터를 신경 쓸 필요없이 apiCall()만 해주면 될 것 같은 생각이 드는데, 혹시 함수를 리턴하는 함수 이해가 가실까요? ㅎㅎ
참고해보시면 좋을 것 같아요 !
There was a problem hiding this comment.
여기서 paramString을 stringfy했다가 parse하는 이유가 무엇일까요?
원래는 객체 requestParams를 그대로 받아 패치했었는데 items 페이지를 확인해보니 무수히 많은 리퀘스트를 보내고 있었습니다. 객체를 참조할 때마다 리퀘스트를 보내는 문제라고 생각했고, 객체가 아닌 문자열을 의존성 배열에 넣어서 해결해야겠다고 생각했습니다. 그래서 저 방식대로 해봤더니 문제가 해결돼서 그렇게 했었습니다..!
그런데 지금 보니 parse 를 다시 해줄 필요는 없고 apiCall 함수에 객체 requestParams를 주면 됐을 것 같네요..?
There was a problem hiding this comment.
영주님 말이 맞아요 ~! 제가 간과했었네요. 무한요청을 보내고 있어서 영주님이 하신대로 놔두면 되겠습니다 ..!!
| <ul className="tags"> | ||
| {productData.tags.map((tag, index) => ( | ||
| <li key={index} className="tag-info"> | ||
| #{tag} | ||
| </li> | ||
| ))} | ||
| </ul> |
There was a problem hiding this comment.
순서가 없는 리스트를 ul태그로 쓰신 점 너무 좋습니다 !
| </div> | ||
| </div> | ||
| </section> | ||
| <InquiryInput productId={productId} /> |
There was a problem hiding this comment.
InquaryInput에 필요한 props인 productId만 전달 해주신 점 잘 하셨습니다.
컴포넌트에서 필요없는 데이터(props)는 웬만하면 받지 않는게 유지보수하기 쉬운 코드가 되더라구요 !
| <textarea | ||
| className="item-detail-input inquiry-input" | ||
| type="text" | ||
| id="inquiry-input" | ||
| value={inquiryInput} | ||
| placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." | ||
| onChange={handleInputChange} | ||
| /> |
There was a problem hiding this comment.
코멘트 UI에 input이 아니라 textarea를 써주신 점 잘 하셨습니다 !
| const { data: commentsData } = useFetch( | ||
| getProductComments, | ||
| { productId, limit }, | ||
| { list: [INITIAL_COMMENTS] } | ||
| ); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const comments = commentsData.list; |
There was a problem hiding this comment.
해당 컴포넌트 내부에서 해결 못하는 부분( productId )를 props로 받고
데이터가 필요한 컴포넌트에서 데이터를 호출한 점이 관심사의 분리를 잘 지켜주신 점 같습니다.
comments fetch 로직을 알 필요없는 다른 컴포넌트는 comments 데이터의 존재를 알 수 없기 때문에 의존성도 약해지고 응집도는 높아진 좋은 코드라고 생각합니다 !
|
comments의 데이터 Fetch부분을 comment 컴포넌트 내부에서 하고 필요한 props ( product id) 만 외부에서 받아온 점이 관심사의 분리를 잘 이해하고 적용하신거라고 생각이 들어요 ! 스프린트 미션 수고 하셨습니다 ! |
요구사항
상품 상세
images : 상품 이미지
tags : 상품 태그
name : 상품 이름
description : 상품 설명
상품 문의 댓글
image : 작성자 이미지
nickname : 작성자 닉네임
content : 작성자가 남긴 문구
description : 상품 설명
updatedAt : 문의글 마지막 업데이트 시간
주요 변경사항
스크린샷
멘토에게