서버와 통신하기 - 책

검색을 통해 선택한 책에 대한 정보를 서버와 통신하는 방법에 대해 알아보려고 한다. 우선 책 검색 페이지를 살펴보자.

Search.jsx

 const [books, setBooks] = useState([]);

 const bookSearchHttpHandler = async (query, reset) => {
        // paramter 설정
        const params = {
            query: query,
            sort: 'accuracy', // accuracy | recency 정확도 or 최신
            page: page, // 페이지번호
            size: 3, // 한 페이지에 보여 질 문서의 개수
        };

        const { data } = await bookSearch(params);
        if (reset) {
            setBooks(data.documents);
        } else {
            setBooks(books.concat(data.documents));
        } // api 호출
        console.log(data);
    };

{books?.map((book, index) => (
                                    <Item
                                        key={index}
                                        title={book.title}
                                        contents={book.contents}
                                        isbn={book.isbn}
                                        publisher={book.publisher}
                                        thumbnail={book.thumbnail}
                                        authors={book.authors[0]}
                                        url={book.url}
                                    />
                                ))}

검색 기능을 활용해서 얻은 책들의 정보를 setBooks를 이용하여 books에 담아주고 이 data 를 하위 컴포넌트인 Item.jsx로 전달해준다. Item.jsx는 위의 빨간 박스 내부 값이다.

이제 서버로 정보를 전송할 차례이다. 서버와의 통신으로 axios 를 사용할 것이다. 서버는 정해진 정보 형태를 요구한다. 또한 헤더값으로 accessToken값을 담아주어야 한다. props를 전달받은 Item.jsx는 이를 이용하여 리스트 값을 클릭시 해당 독서에 대한 정보를 서버로 post하는 형태로 onClick 이벤트를 걸어줄 것이다.

우선 헤더에 담아줄 localStorage에 저장되어 있는 accessToken을 변수로 지정해준다.

const accessTokenHeader = localStorage.getItem('accessToken');

const headers = {
            'Access-token': `${accessTokenHeader}`,
        };

그 이후에 서버에서 요구하는 데이터 형태에 맞게 맞추어서 정보를 data안에 저장한다.

const data = {
            title: `${props.title}`,
            contents: `${props.contents}`,
            isbn: `${props.isbn}`,
            publisher: `${props.publisher}`,
            thumbnail: `${props.thumbnail}`,
            authors: [`${props.authors}`],
            url: `${props.url}`,
        };

그리고 axios를 사용하여 서버로 정보를 post 한다.
post를 사용할때에는 괄호 안 첫 값으론 API 주소를 두번째 값으론 보낼 data 값을 세번째 값은 {}처리한 header값을 담아주면 된다.

        axios
            .post(`${DEFAULT_SERVER_URL}/api/v1/book`, data, { headers })
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

전체적인 코드를 보면

const Item = (props) => {
    const handleSubmit = () => {
        const accessTokenHeader = localStorage.getItem('accessToken');

        const data = {
            title: `${props.title}`,
            contents: `${props.contents}`,
            isbn: `${props.isbn}`,
            publisher: `${props.publisher}`,
            thumbnail: `${props.thumbnail}`,
            authors: [`${props.authors}`],
            url: `${props.url}`,
        };

        const headers = {
            'Access-token': `${accessTokenHeader}`,
        };

        axios
            .post(`${DEFAULT_SERVER_URL}/api/v1/book`, data, { headers })
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });
    };

    return (
        <ㅣi onClick={handleSubmit}>
          . . . . . .
        </ㅣi>
    );
};

li 하나에 클릭 이벤트를 걸어줘서 원하는 책을 누르면 해당 책 정보가 서버로 post 되게 만들었다. 그리고 해당 책에 대한 정보를 state처리하여 bookList 페이지로 보내준다. 그러면 내가 방금 선택한 책에 대한 독서록 목록과 독서록 작성이 가능해진다.

예를 들어 어린 왕자를 검색한 후 선택했을때 아래처럼 나타나진다.

여기서 첫번째 어린 왕자 책을 선택하면 아래와 같은 페이지로 이동한다. 아직 해당 페이지에 독서록 list 구현 전 단계이다.

해당 페이지에 대한 내용은 다음 글에서 자세히 다룰 예정이다.