입문 #09 - 도서 목록 만들기

저번 게시글에서는 NAVER API에서 데이터를 받아와서 News 목록을 표시하는 부분까지 작성해 보았습니다. 이번에는 거의 유사한 형태에서 Layout만 변경하는 도서 목록을 만들어 보겠습니다.

먼저 book API에서 응답으로 전달해주는 데이터는 아래와 같습니다.

author: '김윤정'
description: '서로에게 지기 싫은 두 친구 ‘강나라’와 ‘이상한’이 <b>올림픽</b>을 주제로 대결을 펼칩니다....'
discount: '10800'
image: 'https://bookthumb-phinf.pstatic.net/cover/....'
isbn: '1189239760 9791189239763'
link: 'http://book.naver.com/bookdb/book_detail.php?bid=21406289'
price: '12000'
pubdate: '20220117'
publisher: '고래가숨쉬는도서관'
title: '<b>올림픽</b>, 어디까지 아니? (세계인의 축제 <b>올림픽</b>의 역사 속으로!)'

데이터가 긴 부분은 잘라서 표시했습니다.

우리는 위 데이터에서 author(저자), description(요약), image(썸네일), title(제목) 항목을 이용해서 Layout을 구성해 보겠습니다.

BookRow

ListView.jsx의 NewsRow 아래 부분에 추가 코딩합니다.

const BookRow = (props) => {

    const image = props.row.image;
    const title = props.row.title;
    const author = props.row.author;
    const desc = props.row.description;

    return (
        <li>
            <a href="#" className="bookRow">
                <div className="bookImg">
                    <img src={image} />
                </div>
                <div className="bookDesc">
                    <div className="title" dangerouslySetInnerHTML={{__html: title}} />
                    <div className="cont">
                        <span className="author">{author}</span>
                        <span dangerouslySetInnerHTML={{__html: desc}} />
                    </div>
                </div>
            </a>
        </li>
    );
};

NewsRow와 유사한 내용입니다. Mark-up을 제외하고는 달라진 부분이 없습니다. 도서라는 주제에 맞에 도서의 이미지를 왼쪽에 배치하고 오른쪽에 제목과 저자, 요약내용을 순서대로 배치한 형태입니다.

ListView 수정

아직 Tab Menu의 click event를 구현하지 않았기 때문에 일단 Layout 확인을 위해 NewsRow 대신 BookRow를 Rendering 하도록 변경해서 확인합니다.

아래와 같이 일단 변경합니다.

return (
    <ul className='listView'>
    {
        articles &&
        articles.map((v, inx) => {
            return <BookRow key={inx} row={v} />
        })
    }
    </ul>
);

API 변경

API도 일단 news API 대신 book API를 호출하도록 변경하기 위해 API URL을 아래와 같이 변경합니다.

let apiUrl = 'https://openapi.naver.com/v1/search/book?query=올림픽';

css 추가

아래 css를 main.css 하단에 추가합니다.

.listView li a.bookRow{padding:0px 10px 0px 100px;display:block;height:auto;}
.listView li a.bookRow .bookImg{margin-left:-100px;margin-top:10px;}
.listView li a.bookRow .cont span.author{margin-bottom:8px;color:darkblue;}

여기까지 코딩한 후 실행시켜 보면 아래와 같이 화면이 표시됩니다.

영화 Layout은 별도로 만들어보지 않겠습니다. 어차피 Mark-up과 css만 변경하는 것이므로 단순 작업입니다.

다음 게시물에서는 Tab Menu를 click 하면 상태를 변경하고, 여기서 변경된 상태를 받아 API를 호출하는 부분을 만들어 보겠습니다.

수고하셨습니다.