bookList - 독서록 저장 페이지
북커스는 책을 다 읽고 독서록을 작성하는 형식이 아니고 중간중간 내가 읽은 부분까지 해당하는 내용에 대한 독서록 작성 서비스를 제공한다. 이 페이지는 하나의 책에 대해 작성된 여러개의 독서록을 관리해주는 페이지이다.
검색 페이지에서 선택한 책에 대한 정보를 Link의 state로 핸들링하여 bookList페이지에 보내주었다.
그리고 보낸 데이터를 bookInfo에 저장해서 bookList 페이지에서 사용할 수 있게 하였다.
bookList 페이지를 통해 독서록 작성 페이지인 bookReport를 넘어가는 형식인데 bookReport페이지에서 독서록 정보를 서버로 post할때 서버에서 지정해준 개별 책에 대한 ID 즉 bookId가 필수 값으로 필요하다. 하지만 item에서 state로 받은 데이터인 bookInfo안에는 bookId값이 없다.
이를 해결하기 위해서 서버에서 저장된 모든 책의 정보를 불러온 후 내가 선택한 책(bookInfo)와 일치하는 정보를 선택해서 bookId를 추출할 생각이다.
코드를 보면 item에서 받아온 state값은 bookInfo에 저장하고 서버에서 정보를 get요청 한 후 내가 선택한 책의 제목과 서버의 정보를 비교하여 선택한 책의 제목과 같은 정보만 골라 bookData에 저장해 주었다.
결국엔 bookData에는 내가 선택한 책의 정보(bookId를 포함한)만이 남게 된다. 이는 어린왕자를 선택했을때 나타나는 bookData에 대한 예시이다.
author: ['생텍쥐페리']
bookId: 65
thumbnail: "https://search1.kakaocdn.net/thumb/R120x174.q85/?fname=http%3A%2F%2Ft1.daumcdn.net%2Flbook%2Fimage%2F507587%3Ftimestamp%3D20221107221402"
title: "어린 왕자"이제 독서록 작성 페이지로 넘어가기 위한 준비는 끝났다. bookData를 Link의 state로 넣어주고 같은 방법으로 bookReport 페이지에서 정보를 가져와서 화면에 뿌릴 예정이다.
다음 글에서는 독서록 작성 페이지에 대해 다뤄볼 예정이다.
