Conversation
| const handleLoad = useCallback (async () => { | ||
| const result = await getProductByIdAsync(itemId); | ||
|
|
||
| setItem(result); | ||
| }, [getProductByIdAsync, itemId]) |
There was a problem hiding this comment.
여기서 useCallback을 사용한 의도가 무엇일까요? ㅎㅎ
아마 당연히 최적화겠죠? 어떤 부분을 최적화하려고 하셨을까요?
|
|
||
| const { itemId } = useParams(); | ||
| const [item, setItem] = useState(INITIAL_ITEM_VALUE); | ||
| const [isLoading, error, getProductByIdAsync] = useAsync(getProductById); |
There was a problem hiding this comment.
useAsync 활용을 잘 하시고 계시네요 ~ 커스텀 훅에 친숙해진다면 리액트 실력도 상승할꺼에요 !
| <> | ||
| <Header /> | ||
| <Container> | ||
| {(isLoading || error) |
There was a problem hiding this comment.
isLoading , error 상태들을 이용해 로딩, 에러를 구현해주신 점 좋은 것 같습니다 !
There was a problem hiding this comment.
컴포넌트를 한 파일에 작성하기보다, 컴포넌트의 크기가 작더라도 따로 파일을 만들어서 관리를 해주세요.
|
|
||
| const [comments, setComments] = useState([]); | ||
| const [cursor, setCursor] = useState(null); | ||
| const [isLoading, error, getCommentsAsync] = useAsync(getComments); |
There was a problem hiding this comment.
useAsync를 이용해 loading, error, data를 다루는 패턴이 보여지네요 ㅎㅎ 좋은 패턴인 것 같습니다 ! 이렇게 유사한 요구사항들을 패턴화 시켜놓으면 코드 이해도가 올라갑니다.
There was a problem hiding this comment.
추가적으로 React suspense 와 ErrroBoundary에 대해서 학습해보세요.
- suspense: https://www.daleseo.com/react-suspense/
- errorBoundary: https://fe-developers.kakaoent.com/2022/221110-error-boundary/
| return( | ||
| <> | ||
| <Header /> | ||
| <Container> |
There was a problem hiding this comment.
이 부분이 styled-component로 되어있던데, 아무리 작은 컴포넌트라도 styled-component와 module css가 혼재되어있다면 좋지 않은 코드로 발전 할 가능성이 높습니다. 하나의 CSS체계를 갖추어주세요.
해당 컴포넌트에서 사용하는 state는 |
요구사항
기본
상품 상세
상품 상세 페이지 주소는 “/items/{productId}” 입니다.
response 로 받은 아래의 데이터로 화면을 구현합니다.
=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명
목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 “/items” 으로 이동합니다
상품 문의 댓글
=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간
심화
주요 변경사항
멘토에게