axios.post 활용

react에서 axios를 활용하여 데이터를 추출 및 출력해보았다.

준비
npm i axios (axios 설치)

import axios from "axios";
import { useEffect, useState } from "react";
import UserList from "./userlist"

const Signup = () => {
    const [user, setUser] = useState([])

    useEffect(() => {
        axios.post('URL', {
            'params'  //파라미터 입력//
            
        })
            .then(response => {
                const {data} = response.data //data값만 추출하여 배열화//
                setUser(data)
            })
            .catch(error => {
                console.log(error); // error 발생 시 나올 문구 //
            })
    }, []);

    return (
        <>
            <div> Hi </div> 
            <UserList user = { user } />
        </>
    )
};

export default Signup;

const UserList = ({ user }: any) => {
    return (
        <div>
            {user.map((res: { username: any; result: any}) => {
                const { username, result } = res; //변수 이름을 중복하지 않기 위해//
                return (
                    <ul key = { 'list' }>
                        <li>{ username }</li>
                        <li>{ result }</li>
                    </ul>
                )
                
            })}
        </div>
    );
};

export default UserList;

신경쓸 것
1. .then을 이용하여 연동 성공 시 할 행동을 정하기
2. .catch를 이용하여 연동 실패 시 할 행동을 정하기
3. typescript는 타입을 꼭 입력해야한다.
4. 서버와 연동할 때 성공 시 code: 200 / 실패 시 code: 404

공부할 것
1. useEffect의 정확한 이해
2. axios.get과 axios.post의 차이
3. 변수 지정에 대한 정확한 이해