[React + Spring Boot 연동 (3/3)] - API를 사용하여 정보 주고받기

! 이 포스팅은 유튜버 "메타코딩" 님의 강의를 활용해 만들었습니다.

react & springboot

 

1편 - 프론트엔드 설정과 화면그리기 - https://junikang.tistory.com/274

2편 - 백엔드 설정과 API 만들기 - https://junikang.tistory.com/275

3편 - API를 사용하여 정보 주고받기 - https://junikang.tistory.com/276

 

 

---

🕺 프론트엔드 & 백엔드 연동하기

전 시간에, 스프링을 실행하고, //localhost:8080/post 로 get요청을 하면, findAll 함수를 호출해서, 빈 배열이 표시되는 것을 보았습니다.

 

프론트 엔드와 백엔드가 연동된다는 건, 프론트엔드에서 요청을 통해 스프링이 연결된 DB에 값을 넣을 수 있다는 거겠죠.

 

아래 배열을 프론트엔드를 통해 채워보겠습니다.

---

Write.js 글쓰기 기능 만들기

(1) - 폼에 입력한 값을 자바스크립트 객체로 만들기

 

1. 입력받을 객체 만들기

제목과 내용을 동적으로 입력받기 위해 post 객체를 만들겠습니다.

리액트에서 동적으로 입력받기 위해서는 useState() 라는 함수를 사용해야 합니다.

 

 

2. 값을 입력 받기 위해 Form.Control에 "onChange & name" 을 추가합니다.

그리고 제목과 내용을 입력하는 <Form.control> 태그에 name 속성과 onChange속성을 입력해줍니다.

이제, 입력값이 변경되면 {changeValue} 라는 임의의 함수를 실행해주게됩니다.

 

 

3. changeValue 함수 구현

값이 변경되면 <Form.Control .... /> 을 자바스크립트 객체로 e라는 변수에 담아 갖게 됩니다.

그 객체에서 name과 value를 꺼내서 post에 넣어줍니다.

 

 

4. console.log를 추가하고, 실행해서 테스트해봅니다.

테스트를 위해 console.log를 추가하고, 입력이 잘 되는지 확인해봅니다.

 

 

(2) - 자바스크립트 객체를 백엔드로 보내기

이제 만들어진 post를 백엔드로 쏘겠습니다.

 

1. submit 버튼 만들기.

 버튼이 submit버튼이라는 걸 명시해주고, Form에 onSubmit 속성을 추가해서, 버튼을 눌렀을 때 submitPost 함수가 실행되도록 작성해주세요. 페이지가 넘어가지 않도록 e.preventDefault() 를 추가해줍니다.

 

 

2. fetch 함수

 요청을 쏘아주는 fetch함수를 구현합니다. fetch함수는 첫 번째 파라미터에서 요청 할 url 받고,

두 번째 파라미터에서 요청을 초기화 해줍니다. 요청의 응답이 오면 then() 함수로 받아서 처리할 수 있습니다.

 

 

3. 백엔드로 자바스크립트 객체 보내기

 아래 핸들러로 post를 보내겠습니다. 

 

 

4. fetch함수 구현

• http://localhost:8080/post로 요청을 보냅니다.
• 요청은 method, headers, body로 구성됩니다.
• 요청의 응답이 오면 then으로 응답을 꺼낼 수 있습니다.
• json으로 변환해서
• log에 찍어보겠습니다.

 

 

5. 요청이 정상적으로 처리되면 응답을 받아 log에 나타내게 됩니다.

 

 

 

6. 글쓰기 후 화면이동.

props의 history 속성을 사용해서 "/" 디렉토리로 보내겠습니다.

 

Write.js 완성코드

import React, { useState } from 'react';
import { Button, Form } from 'react-bootstrap';

const Write = (props) => {
  const [post, setPost] = useState();

  const changeValue = (e) => {
    setPost({
      ...post,
      [e.target.name]: e.target.value,
    });
  };

  const submitPost = (e) => {
    e.preventDefault();
    fetch('http://localhost:8080/post', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset-utf-8',
      },
      body: JSON.stringify(post),
    })
      .then((res) => res.json())
      .then((res) => console.log(res), props.history.push('/'));
  };

  return (
    <Form onSubmit={submitPost}>
      <Form.Group className="mb-3">
        <Form.Label>제목</Form.Label>
        <Form.Control name="title" onChange={changeValue} />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>내용</Form.Label>
        <Form.Control
          as="textarea"
          rows={3}
          name="contents"
          onChange={changeValue}
        />
      </Form.Group>
      <Button type="submit">글쓰기</Button>
    </Form>
  );
};

export default Write;

---

List.js 리스트 기능 만들기

List.js 화면이 실행될 때, 백엔드의 아래 핸들러를 맵핑하겠습니다.

 

 

1. useState로 posts 만들기

 post를 배열로 받을 수 있게 준비합니다.

 

 

2. useEffect 사용하기

 useEffect를 사용합니다. 두번째 배열에 들어있는 posts의 상태가 변경될 때 마다 "실행코드" 부분이 실행됩니다.

 

 

3. posts가 변경될 때마다 백엔드에 요청하고 응답받기.

• posts가 변경될 때마다
• http://localhost:8080/post 로 get요청을 보내고
• 응답을 받아 자바스크립트객체(json) 타입으로 변환하고
• 그 객체를 posts에 담습니다.

 

 

4. post 갯수만큼 화면에 나타내기

posts의 갯수만큼 map으로 반복해 화면에 나타내고, postItem에  post의 값들을 넘겨줍니다.

 

 

5. 실행하여 확인

이제, 글을 쓰면 생성된 글 갯수만큼 홈화면에 나타나게 됩니다.

 

 

List.js 완성 코드

import React, { useEffect, useState } from 'react';
import PostItem from '../components/PostItem';

const List = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('http://localhost:8080/post')
      .then((res) => res.json())
      .then((res) => {
        setPosts(res);
      });
  }, [posts]);

  return (
    <div>
      {posts.map((post) => (
        <PostItem key={post.id} post={post} />
      ))}
    </div>
  );
};

export default List;

 

 

 

---

PostItem.js 로 넘겨받은 post 객체 표현하기

 

PostItem에서 받은 post객체를 사용해서 정보를 표시합니다.

 

 

 

---

🎉 완성 !!