home.js

import React, { useEffect, useState } from 'react';
import { Container } from "react-bootstrap";
import BookItem from './../../components/BookItem';

const Home = () => {

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

    //함수 실행시 최초 한법 실행되는 것 + 상태값이 변경될때마다 실행
    useEffect(() => {
        fetch("http://localhost:8080/book").then(res => res.json()).then(
            res => {
                // console.log(res)
                setBooks(res);
            }
        ); //비동기 함수
    }, [])

    return (
        <div>
            <Container >
                <h1 className='mb-5'>책 리스트 보기</h1>
                {books.map(book => <BookItem key={book.id} book={book} />)}
            </Container>
        </div>
    );
};

export default Home;

 

 

BookItem.js

import React from 'react';
import { Card } from "react-bootstrap";
import { Link } from 'react-router-dom';

const BookItem = (props) => {

    console.log(props);
    const { id, title, author } = props.book;

    return (

        <Card className='mb-5'>
            <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Link to={"/post/1" + id} className="btn btn-primary" variant="primary">상세보기</Link>
            </Card.Body>
        </Card>

    );
};

export default BookItem;

 

 

 

https://github.com/braverokmc79/React-SpringBoot-1/commits?author=braverokmc79