소주제 : 페이지 이동과 Router
1. 다이나믹 라우팅 & 데이터 조회
폴더: /class_quiz/pages/05/boards/
안에 등록 화면과 다이나믹 라우팅을 이용한 상품 상세 화면을 구현해주세요. (수업 내용 참고)
- 판매자, 상품명, 상품내용, 상품가격을 입력할 수 있는 상품 등록 화면을 만들어 주세요.
- 상품 등록 버튼을 누르면 createProduct를 활용하여 상품등록 mutation을 요청해 주세요.
- mutation이 실패할 수도 있기 때문에, try ~ catch로 감싸 주세요.(이를 예외처리라고 합니다.)
- 상세보기 화면으로 동적 라우팅하여 이동해 주세요**(응답으로 받은 상품ID 활용)**
- 동적라우팅된 화면에서 주소에 있는 상품ID를 가져오고**(router.query 활용)**, 가져온 상품ID로 fetchProduct를 활용하여 상품 정보를 조회해 주세요.
- 조회한 상품 정보를 화면에 보여주세요.
- 비동기 방식으로 컴포넌트가 렌더링되기 때문에, 아직 받아오지 못한 상품 data가 없어서 에러가 발생하나요? 그렇다면, 조건부 렌더링의 && 연산자를 사용해 보세요.
- 위 7번의 &&연산자를 옵셔널 체이닝을 사용해서 변경해 보세요.
- data가 없을 때, 초기 상태를 loading... 으로 표기해 주세요.(삼항 연산자를 사용하면 되겠죠?)