글목록을 구현해보자
요 booklist또한 여러번 재사용할 것을 생각하여 components에 만들었고 상세보기를 Link로 연결하였다.
그리고 스프링부트 서버 켜서 DB에 몇건의 데이터를 넣고 리스트의 크기만큼 이걸 반복 시키겠다.
postman으로 데이터 5건을 집어 넣었고 데이터를 다운받고 연동 시켜서 이제 화면에 띄울것이다.
Home.js로 가서
const [books, setBooks] = useState([]);초기 길이는 모르기에 빈 배열로 useState안에 넣는다. 이제 books의 길이만큼 데이터를 뿌리면 된다.
그리고 최초 함수 실행시 한번 실행되는 useEffect를 사용하고 그안에 fetch함수로 데이터를 가져 올 것이다.
fetch('http://localhost:8080/book').then().then();
fetch는 비동기 함수인데 요청을 하면 저 첫번째 then에 promise를 받는다. 어떤 통장을 받는다고 생각을하면되는데 일단 통장을 받고 나중에 데이터를 받게 되면 이 통장에 데이터를 넣어 주겠다 라는 뜻으로 생각하면 된다. 그리고 그 데이터는 두번째 then으로 들어오게 된다.
그리고 나서
fetch('http://localhost:8080/book').then(res=>res.json()).then();
첫번째 then에 res=>res.json()이걸 적는데 이건 ajax로 치면 accept에 json이라고 쓰는거랑 비슷하다. 서버에서 응답는 json데이터를 자바스크립트 오브젝트로 바꿔준다.
두번째 then에 결과값을 받고 이걸 콘솔에 출력해보자.
CORS에러가 뜨는데 이건 외부에서 자바스크립트 요청이 오는것을 막아버리는거다...
서버쪽에서 이거 풀러 가자
일단 findAll함수 위에 @CrossOrigin이 어노를 붙이면 CORS를 풀 수 있다.
그리고 setBooks에 받은 데이터를 넣어 상태를 변화 시키고 아래 return부분에 map으로 books의 크기만큼 BookItem을 반복시켰다.
그 다음엔 무슨 key가 있어야한다고 오류가 나오는데 이 키는 보통 배열에 쓰는데 만약 내가 배열의 순서를 바꾼다던지 배열의 두번째 내용을 지워버리면 그림이 다시 그려지게 된다.
근데 이렇게 다시 그려질때 이 키를 보면서 다시 그린다. 키가 만약에 없으면 두번째껄 지운다고 치면, 우리는 두번째껄 지운거지만 이 프로그램은 두번째껄 지운건지 세번째껄 지운건지 알 수 없다 그래서 전부 다시그리게 되는건데 이렇게하면 효율성이 떨어지게 된다. 그래서 우리가 만든 데이터의 id값을 이 키값으로 지정할거다.
이렇게 BookItem에 key라는 키워드를 넣어 book.id값을 입력하여 오류를 해결 할 수있다.
그리고 props를 book으로 넘길거다. 이렇게하면 하나 그릴때마다 book데이터가 넘어갈거다
그리고 bookItem에서 구조분할 할당으로 변수 나누고 title과 id를 자리에 맞게 넣어 준다.
출력이 잘 되는것을 볼 수 있다.
이번 게시글은 여기까지
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
