[React Native] Axios로 Django API 연결하기

Axios

web -> localhost

하지만 앱을 개발할 때는 ios simulator, android emulator를 돌리기 때문에, web의 localhost로 할 때는 연결이 되지 않는다.
따라서, ios와 android 에뮬레이터의 IP 주소를 따로 설정해주어야 한다.
ios -> 127.0.0.1
andriod -> 10.0.2.2

(만약 안 된다면 settings.py에서 ALLOWED_HOST[*]로 바꿔주면 된다)

나는 ios simulator로 개발했기 때문에 ios 기준으로 얘기하겠다.
일단 API 연결 전에, 백엔드에서 Response Body를 지정해주었다.

{
    "success" : true,
    "result" : [~],
    "status" : 200
}

axios를 매번 import하는 것보다는 api 파일을 따로 만들었다.

import axios from 'axios';

const API = axios.create({
    baseURL: 'http://127.0.0.1:8000/api',
    headers: {
        'Content-Type' : 'application/json',
    },
});

export default API;

Post

Create

• bodyData는 하나의 객체로 전송했다.
• 지정해준 response.data.success가 true로 나오면 navigation method가 작동되도록 설정했다.

const saveNote = async () => {
        const data = {
            user_id: userId,
            title: title,
            date: new Date(),
            contents: contents,
            category_id: categoryId,
        }

        try {
            const response = await API.post(
                `/notes`,
                data
            )
            .then(function (response) {
                if (response.data['success'] == true) {
                    navigation.navigate('Note', {
                        noteId: response.data.result['note_id'],
                        categoryName: category,
                        userId: userId,
                        fromUpload: true
                    })
                }
            })
            .catch(function (error) {
                console.log(error.response);
            });
        } catch (error) {
            console.log(error);
        }
    }

Get

Read

• get에는 bodyData를 전송할 필요가 없다. API를 받아오는 목적이기 때문이다.
• get api를 성공했다면, 각각 필요한 데이터를 useState 값으로 넣어주었다.

const getNotes = async () => {
        try {
            await API.get(
                `/notes/${noteId}`
            )
            .then(function (response) {
                if (response.data['success'] == true) {
                    setTitle(response.data.result['title']);
                    setContents(response.data.result['contents']);
                    setSummary(response.data.result['summary']);
                    for(let i = 0; i < response.data.result.keywords.length; i++){
                        _keyword.push(response.data.result.keywords[i]['keyword']);
                    }
                    setKeywords(keywords.concat(_keyword));
                }
            })
            .catch(function (error) {
                console.log(error.response);
            })
        } catch (error) {
            console.log(error);
        }
    }

Put

Update

• Put은 Get + Post라고 볼 수 있다.
• bodyData는 post와 같은 형식으로 지정해주었다.

const modifyNote = async () => {
        const data = {
            user_id: userId,
            title: title,
            contents: contents,
            date: new Date(),
            category_id: categoryId + 1,
        }

        try {
            const response = await API.put(
                `/notes/${noteId}`,
                data
            )
                .then(function (response) {
                    if (response.data['success'] == true) {
                        navigation.replace('Note', {
                            noteId: response.data.result['note_id'],
                            categoryName: category,
                            userId: userId,
                            fromUpload: fromUpload
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error.response);
                });
        } catch (error) {
            console.log(error);
        }
    }

Delete

Delete

• 삭제 시에는 bodyData를 지정할 필요가 없었다.
• 그리고 response data를 주지 않는다. 백엔드 쪽에서도 204 No content를 status로 지정해주었다.

const deleteNote = async () => {
        try {
            await API.delete(
                `/notes/${noteId}`
            )
            .then(response => {
                if(response.status === 204){
                    console.log('delete');
                    fromUpload ? (
                        navigation.replace('Camera')
                    ) : (
                        navigation.replace('List', {
                            categoryName: categoryName,
                            userId: userId
                        })
                    )
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        } catch (error) {
            console.error(error);
        }
    }