[React] json 파일 axios 연결

오늘 구현해보고자 하는 axios의 CRUD 기능은 총 3가지이다.

데이터를 읽어오는 get
데이터를 추가하는 post
데이터를 삭제하는 delete

차근차근 하나씩 적용한 코드를 보면서 리뷰해보려고 한다.

[0] AxiosAPI.js

시작하기에 앞서 'AxiosAPI'라는 js 파일을 하나 생성해준다.

이 파일에 axios로 생성한 api 코드를 작성하여 모듈화를 진행한다.

[1] Get

// AxiosAPI.js
export const getUserData = async () => {
    // getUserData 함수 정의 - 비동기로 데이터를 가져오는 역할
    try {
        // axios를 사용하여 '/data.json' 엔드포인트에서 데이터를 가져오기
        const response = await axios.get('http://localhost:3001/users');

        // 가져온 데이터를 콘솔에 출력 console.log("user get data", response); 가져온 데이터를 반환
        return response;
    } catch (error) {

        // 에러가 발생한 경우 콘솔에 에러 메시지 출력
        console.error("Error fetching user data:", error);

        // 에러를 다시 throw하여 호출한 측에서 처리할 수 있도록 함
        throw error;
    }
}

이전 글이었던 json-server 게시글에서 확인했던 json-server의 주소를 바탕으로 데이터를 get한다.

그리고 get한 데이터를 return해주는 방식으로 구현했다.

// App.js
// 유저 정보를 저장하는 변수
const [userData, setUserData] = useState([]);
// 전체 데이터 불러오기
useEffect(() => {
    const fetchData = async () => {
        try {
            const response = await getUserData();
            setUserData(response.data);
        } catch (error) {
            handleApiError(error, 'Error fetching data:');
        }
    };
    fetchData();
}, []);

userData라는 배열 변수를 선언을 해주고
useEffect를 통해서 최초 렌더링이 되었을 때, 데이터를 불러오는 방식으로 getUserData API를 사용한다.
이후 get한 데이터를 setUserData 핸들러로 저장한다. (이때 reponse.data를 유의한다.)

[2] Post

// AxiosAPI.js
export const updateUserData = async (data) => {
    try {
        const response = await axios.post('http://localhost:3001/users', data);
        // console.log('Data updated successfully:', response.data);
        return response;
    } catch (error) {
        // Log the error and throw it again for the caller to handle
        console.error('Error updating user data:', error);
        throw error;
    }
};

parameter로 넘어온 데이터를 바탕으로 post하여 데이터를 추가한다.

데이터가 추가가 되면 useEffect로 인해 의존성 배열이 변경되었기에 데이터가 추가된 것을 볼 수 있다.

// App.js
 // 추가하려는 유저 정보를 저장하는 변수
const [newUserData, setNewUserData] = useState(() => initialState);
// 데이터를 추가하는 핸들러
const handlePostData = async () => {
    try {
        const response = await updateUserData(newUserData);
        const updatedResponse = await getUserData();
        setUserData(updatedResponse.data);
        setNewUserData(initialState);
    } catch (error) {
        handleApiError(error, 'Error updating data:');
    }
};

앞서 parameter로 넘겨줄 데이터에 대한 부분이다.

newUserData 변수를 바탕으로 추가하려고 하는 데이터를 저장하고, newUserData 변수를 updateUserData() 핸들러에 넣어준다.
그리고 변경된 UserData를 최신화 시켜주기 위해 setUserData()를 사용해준다.
또한 데이터가 추가 되었기에 newUserData는 초기화시켜준다.

initialState의 경우 아래와 같다.

const initialState = {
    id: null,
    name: '',
    age: null,
    part: '',
    image: ''
};

[3] delete

// AxiosAPI.js
export const deleteUser = async (id) => {
    try {
        const response = await axios.delete(`http://localhost:3001/users/${id}`);
        return response;
    } catch (error) {
        console.error("Error deleting user data:", error);
        throw error;
    }
};

parameter로 넘어온 id값을 바탕으로 데이터를 삭제한다.

id값을 정확하게 넘겨주는 것이 쟁점이다.

// App.js
const handleDeleteData = async (id) => {
    try {
        const response = await deleteUser(id);
        const updatedResponse = await getUserData();
        setUserData(updatedResponse.data);
    } catch (error) {
        handleApiError(error, 'Error deleting data:');
    }
};

const handleApiError = (error, errorMessage) => {
    console.error(errorMessage, error);
};

parameter로 넘어온 id값을 deleteUser 핸들러에 넣어주고, delete를 진행한다.
그리고 변경된 UserData를 최신화 시켜주기 위해 setUserData()를 사용해준다.

이렇게 해서 json-server를 통한 json의 데이터를 axios와 연결시켜보았다.

전체적인 코드를 보고 싶다면? 전체 코드 보러가기