POST(생성), useHistory

1. POST 요청(생성)

POST 요청은 HTTP 메서드 중 하나로, 서버에 새로운 데이터를 생성할 때 사용됩니다. 주로 폼 제출이나 새로운 자원을 서버에 등록하는 상황에서 사용되며, REST API에서 POST 요청은 Create 작업에 해당합니다.

POST 요청의 주요 특징

• 새로운 데이터 생성: 서버에 데이터를 새롭게 추가하며, 서버가 데이터를 생성하고 고유 ID를 부여하는 방식입니다.
• 요청 본문(body) 포함: POST 요청은 전송할 데이터(예: JSON, 폼 데이터)를 요청 본문에 포함하여 서버에 전달합니다.
• URL에 변화 없음: GET 요청과 달리 POST 요청은 URL에 데이터를 추가하지 않고, 본문에 데이터를 포함하여 전송합니다.

예제: Axios를 사용한 POST 요청

React에서 Axios 또는 Fetch API를 사용해 POST 요청을 쉽게 보낼 수 있습니다. 다음은 사용자가 입력한 데이터를 서버에 전송하는 예제입니다.

import React, { useState } from 'react';
import axios from 'axios';

function CreateUser() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post('https://api.example.com/users', {
        name,
        email,
      });
      console.log('User created:', response.data);
    } catch (error) {
      console.error('Error creating user:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button type="submit">Create User</button>
    </form>
  );
}

export default CreateUser;

설명:

• 상태 관리: name과 email 상태를 사용하여 입력된 데이터를 관리합니다.
• handleSubmit 함수: 폼이 제출되면 preventDefault()로 기본 제출 동작을 막고, Axios로 POST 요청을 보냅니다.
• Axios의 POST 요청: axios.post(URL, 데이터 객체)를 통해 서버에 데이터 객체를 전송합니다. 서버에서 성공적으로 데이터를 생성하면 응답 데이터가 response.data에 저장됩니다.

---

2. useHistory (React Router v5)

React Router v5에서 useHistory 훅은 프로그래밍 방식으로 페이지 이동을 관리하기 위해 사용됩니다. useHistory는 이전 페이지로 돌아가기, 특정 페이지로 이동하기 등의 네비게이션 작업을 수행할 수 있습니다. 이 훅은 React Router v5에 속하는 기능으로, useNavigate가 도입된 v6 이전 버전에서 많이 사용되었습니다.

useHistory 기본 사용법

import React from 'react';
import { useHistory } from 'react-router-dom';

function HomePage() {
  const history = useHistory();

  const goToProfile = () => {
    history.push('/profile'); // /profile 경로로 이동
  };

  const goBack = () => {
    history.goBack(); // 이전 페이지로 이동
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToProfile}>Go to Profile</button>
      <button onClick={goBack}>Go Back</button>
    </div>
  );
}

export default HomePage;

설명:

• history.push('/profile'): 프로필 페이지로 이동합니다. push는 현재 페이지의 히스토리에 새로운 경로를 추가해 이동하는 방식입니다.
• history.goBack(): 사용자가 이전에 방문한 페이지로 돌아갑니다.
• 프로그래밍 방식의 네비게이션: 버튼 클릭 등 특정 이벤트 발생 시, 코드로 직접 페이지 이동을 제어할 수 있습니다.

---

3. useHistory와 POST 요청을 함께 사용하기

POST 요청으로 데이터를 생성한 후 사용자를 특정 페이지로 이동시키고 싶을 때 useHistory를 활용할 수 있습니다. 예를 들어, 사용자가 새로운 게시글을 작성한 후 게시글 목록 페이지로 자동 이동하는 기능을 구현할 수 있습니다.

예제: POST 요청 후 페이지 이동

import React, { useState } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

function CreatePost() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await axios.post('https://api.example.com/posts', {
        title,
        content,
      });
      history.push('/posts'); // 게시글 목록 페이지로 이동
    } catch (error) {
      console.error('Error creating post:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Content"
      />
      <button type="submit">Create Post</button>
    </form>
  );
}

export default CreatePost;

설명:

• 상태 관리: title과 content 상태를 사용하여 사용자가 입력한 데이터를 관리합니다.
• handleSubmit 함수: 폼이 제출되면 POST 요청을 통해 서버에 데이터를 전송합니다.
• POST 요청 성공 후 페이지 이동: 게시글 생성이 완료되면 history.push('/posts')로 게시글 목록 페이지로 이동합니다.

이렇게 하면 사용자가 게시글을 작성하고 제출할 때마다 자동으로 목록 페이지로 이동할 수 있습니다.

---

4. React Router v6에서 useNavigate로 대체

React Router v6에서는 useHistory가 useNavigate로 대체되었습니다. useNavigate는 useHistory와 유사한 기능을 제공하며, 프로그래밍 방식으로 네비게이션을 수행할 수 있습니다. useNavigate는 history.push()와 history.goBack() 같은 기능을 간단하게 구현할 수 있습니다.

useNavigate 예제

import React from 'react';
import { useNavigate } from 'react-router-dom';

function HomePage() {
  const navigate = useNavigate();

  const goToProfile = () => {
    navigate('/profile'); // /profile 경로로 이동
  };

  const goBack = () => {
    navigate(-1); // 이전 페이지로 이동
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToProfile}>Go to Profile</button>
      <button onClick={goBack}>Go Back</button>
    </div>
  );
}

export default HomePage;

설명:

• navigate('/profile'): 프로필 페이지로 이동합니다.
• navigate(-1): 이전 페이지로 돌아갑니다.

useNavigate를 사용하면 페이지 이동을 보다 간결하게 작성할 수 있습니다. useHistory 대신 useNavigate를 사용하는 것이 권장되며, 최신 버전의 React Router에서는 useNavigate를 기본으로 사용합니다.

---

정리

• POST 요청은 서버에 새로운 데이터를 생성할 때 사용하는 HTTP 메서드로, 주로 Axios나 Fetch API를 사용하여 데이터를 서버로 전송합니다.
• useHistory (React Router v5)는 프로그래밍 방식으로 페이지 이동을 제어하는 데 사용됩니다. push, goBack 등을 통해 페이지를 전환할 수 있습니다.
• useNavigate (React Router v6)는 useHistory의 대체 훅으로, 페이지 이동을 더 간결하게 제어할 수 있습니다.

React Router와 POST 요청을 결합해 데이터 생성 후 특정 페이지로 이동하는 로직을 구현하면, 사용자 경험을 더욱 자연스럽게 개선할 수 있습니다.