React 김준석 sprint7

[junhub98]

기본 요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React를 사용합니다

체크리스트 [기본]

상품 상세

• 상품 상세 페이지 주소는 "/items/{productId}" 입니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다.

=> favoriteCount : 하트 개수
=> images : 상품 이미지
=> tags : 상품태그
=> name : 상품 이름
=> description : 상품 설명

• 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다

상품 문의 댓글

• 문의하기에 내용을 입력하면 등록 버튼의 색상은 "3692FF"로 변합니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다

=> image : 작성자 이미지
=> nickname : 작성자 닉네임
=> content : 작성자가 남긴 문구
=> description : 상품 설명
=> updatedAt : 문의글 마지막 업데이트 시간

체크리스트 [심화]

• 모든 버튼에 자유롭게 Hover효과를 적용하세요.

이전 피드백 반영##

• 스프린트 미션 5,6 피드백 반영
• 의미있는 스타일태그 네이밍 변경
• 불필요하게 긴 코드 단축
• state 초기값 지정
• 하나에 폼에서 다루는 state값 object로 관리

추가구현사항##

• 브라우저 크기별 pageSize 변경 logic => matchMedia 변경 및 불필요한 리렌더링 제거
• 상품검색창 디바운싱 적용
• 상품 댓글 더불러오기 기능

질문사항##

• 최근 릴리즈 된 리액트 컴파일러(자동 메모이제이션)을 사용해서 메모화를 시켜봤는데, 자식 컴포넌트들에 console.log를 추가해 콘솔창에서 리렌더링을 추적할땐 콘솔로그가 출력 되지 않아 불필요한 리렌더링이 없어진것같은데, 리액트개발자 도구로 찍어보면 리렌더링 레이아웃이 떠서 뭐가 맞는건지 모르겠습니다.
  EX) pagination에서 페이지 전환 시 관계없는 다른 자식컴포넌트(BestProductsList)에 console.log를 집어 넣었을때 위와 같은 상황이 발생 됩니다.

• 개별상품 댓글을 입력하는 textarea에 불필요한 리렌더링을 제거하기위해 비제어 인풋 로직을 작성해봤는데, 맞게 한건지 잘모르겠습니다. 관련하여 디자인패턴이 있다면 알려주시면 감사하겠습니다.

배포링크##

• https://elaborate-conkies-9a8ccb.netlify.app/?page=1