Conversation
| if (!getData) { | ||
| throw new Error("데이터를 불러오지 못했습니다."); | ||
| } | ||
| setData((data) => ({ ...data, getData })); |
There was a problem hiding this comment.
재사용성을 염두에 두고 직접 개발하신 hook같은데 혹시 맞을까요?
data가 어떻게 쓰일지 모르는 상황에서 이전 데이터를 전개구문을 이용해서 유지한채 새 데이터를 덮어씌우면 예상치 못하게 전 데이터가 남아있을 수 있겠다라는 생각이 드네요.
전개구문을 이용해서 ( { ... data } ) 이전 데이터를 유지하지말고, getData로 치환하는게 좋다고 생각합니다.
| function useAsync(asyncFunction, arg) { | ||
| // pending, error 상태값을 status: '대기중', '로딩중' , '완료', '에러'로 바꾸기 | ||
| const [fetchStatus, setFetchStatus] = useState(""); | ||
| const [data, setData] = useState({}); | ||
| const getFetchData = useCallback(async () => { | ||
| setFetchStatus("대기중"); | ||
|
|
||
| try { | ||
| const getData = await asyncFunction(arg); |
There was a problem hiding this comment.
파라미터로 args와 asyncFunction을 따로 받기보다 한번에 받아버리는건 어떨까요 ? 제 생각에는 함수를 리턴하는 함수를 이용해 할 수 있을 것 같습니다.
(arg) => () => asyncFunction 처럼 코드를 작성하시면되는데 혹시 이해가 가실까요?
| if (fetchStatus === "에러") { | ||
| alert("error"); | ||
| return; | ||
| } | ||
|
|
||
| if (fetchStatus !== "완료") { | ||
| return <Loading>loading중</Loading>; | ||
| } |
There was a problem hiding this comment.
fetchStatus로 데이터 요청의 상태를 관리하신 점 잘 하셨습니다 !
| <ProductContentLabel>상품 태그</ProductContentLabel> | ||
| <ProductTagsSection> | ||
| {tags.map((tag) => ( | ||
| <ProductTag key={uuidv4()}>#{tag}</ProductTag> |
There was a problem hiding this comment.
키를 유니크하게 가져가기 위해서 uuid를 사용해주셨네요 ! tag가 고유하다면 tag를 그대로 사용해도 되긴 합니다 ㅎㅎ
uuid를 사용해도되고 tag를 사용해도 됩니다. ~
| <ProductTag key={uuidv4()}>#{tag}</ProductTag> | |
| <ProductTag key={tag}>#{tag}</ProductTag> |
| {fetchStatus === "완료" && | ||
| (comments.list.length === 0 ? ( | ||
| <InquiryEmptyBox> | ||
| <InquiryEmptyImg src={inquiryEmptyImg} /> | ||
| <InquiryEmptyText>아직 문의가 없습니다.</InquiryEmptyText> | ||
| </InquiryEmptyBox> | ||
| ) : ( | ||
| comments.list.map((comment) => ( | ||
| <CommentCard key={comment.id} comment={comment} /> | ||
| )) | ||
| ))} |
There was a problem hiding this comment.
fetchStatus에 따라서 코멘트 UI를 잘 정리해주셨습니다 !
| <InquiryCommentLabel>문의하기</InquiryCommentLabel> | ||
| <InquiryCommentTextArea |
There was a problem hiding this comment.
label에 htmlFor 속성으로 어느 입력태그를 위한 것인지 나타내면 좋겠네요 ㅎㅎ
useAsync를 이용해서 만드신거죠? 제 생각에는 |
요구사항
기본
상품 상세
상품 상세 페이지 주소는 “/items/{productId}” 입니다.
response 로 받은 아래의 데이터로 화면을 구현합니다.
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
상품 문의 댓글
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
스크린샷
멘토에게
detail procut와 comments 가져오는 fetch함수 컴스텀훅으로 만들어볼려고했다가 오류가 왕창떠버려서 원래대로 돌아왔습니다주말에 다시 시도해보겠습니다.
배포
https://panda-market-sprint7.netlify.app/