React fetch를 이용하여 submit 이벤트 구현하기

내가 참고한 블로그는 여기다

그중에서도 마지막에 있는 POST request using fetch with set HTTP headers 부분을 참고했다.

포기하고 수업을 들을까 했는데 포기하지 않았던 나를 칭찬한다. 구현하고나니까 너무너무너무 뿌듯하다 ㅎㅎ

📌 코드

const handleSubmit = (e) => {
    e.preventDefault();
    /* 등록 버튼을 누르면 게시물이 등록이 되며 home으로 리다이렉트 되어야 합니다. */
    /* 작성한 내용과 useNavigate를 이용하여 작성해보세요. */
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer my-token",
        "My-Custom-Header": "foobar",
      },
      body: JSON.stringify({
        title: title,
        body: body,
        author: author,
        likes: 0,
      }),
    };
    fetch("http://localhost:3001/blogs", requestOptions)
      .then((response) => response.json())
      .then((data) => this.setState({ postId: data.id }));

    navigate("/");
    window.location.reload();
  };

💡 약간의 설명

• 작성한 form을 서버에 추가하기 위하여 method는 POST로 했다.
• body 부분은 서버의 데이터 형식에 맞게 조금 수정했다.
• fetch의 첫번째 인자로 서버의 url을 넣어줬다.
• 버튼을 누르면 home페이지로 돌아갈 수 있도록 useNavigate를 사용했다.
• window.location.reload(): form을 작성하고 등록을 눌러준 이후 게시글 페이지로 가면 게시글이 추가되어있지 않은 상태다. 새로고침을 해줘야 게시글이 추가된다. 자동으로 새로고침되도록 해당 코드를 추가해줬다.

💡 아쉬운 점

• headers 부분을 잘 이해하지 못해서 그대로 복사해왔다. 저렇게까진 안해줘도 될 것 같다.

• {
      "id": 1,
      "title": "안녕하세요?",
      "body": "반갑습니다",
      "author": "ichenny",
      "likes": 0
    },

  원래 서버의 형식은 위와 같다. id가 제일 위에 온다. 하지만 위의 코드대로하면 다음과 같이 id가 제일 마지막에 위치한다.

  {
    "title": "새로고침",
    "body": "새로고침",
    "author": "김코딩",
    "likes": 0,
    "id": 10
  }

  이건 어떻게 수정해야할지 감도 안잡힌다.

리액트 페이지 이동 시 스크롤이 제일 위에 오게 하는 방법 : 참고블로그 구현해야함!