[React Native] axios를 사용하여 spring boot로 비동기 통신 하기

axios를 사용하기 전에 설치되어야 할 패키지

 

npm install axios

 

Spring Boot로 작성된 컨트롤러가 다음과 같다면

 

@PostMapping("/login")
public MemberDto login(MemberDto dto) {
    logger.info("MemberController login()");
    return service.login(dto);
}

 

axios를 사용하기 위해 프론트엔드단에서 다음과 같이 사용한다.

 

function login() {
	if (id.trim() === "") {
		Alert.alert("아이디 입력 확인", "아이디가 입력되지 않았습니다.");
	} else if (password.trim() === "") {
		Alert.alert("비밀번호 입력 확인", "비밀번호가 입력되지 않았습니다.");
	} else {
		axios.post("http://192.168.35.149:3000/login", 
		null, 
		{ params: {id: id, pwd: password} }
	).then(function(resp) {
		console.log(resp.data);
		if (resp.data !== null && resp.data != "") {
			console.log("로그인 성공");
		} else {
			Alert.alert("로그인 실패", "아이디나 비밀번호를 확인하세요.");
		}
	}).catch(function(err) {
		console.log(`Error Message: ${err}`);
	})
}

 

이 함수를 컴포넌트에 onPress로 적용해준다. 이 때 get 방식으로 통신할 경우 파라미터에 null을 작성하지 않는다.

 

이 때, 로그인에 실패하였다면 사용자가 입력한 내용을 비워줄 수 있는데 로그인 실패에 대한 조건문에 setter를 추가해준다.

추가적으로 컴포넌트의 value를 getter로 지정해야한다.

 

완성된 코드는 다음과 같다.

 

import axios from "axios";
import React, { useState } from "react";
import { Image, 
         StyleSheet, 
         View, 
         TextInput, 
         Text, 
         TouchableOpacity, 
         Alert
} from "react-native";

const Login = ({navigation}:any) => {       // 화면 이동을 위해 매개변수 navigation 넣어주기

    const [id, setId] = useState("");
    const [password, setPassword] = useState("");

    function login() {
        if (id.trim() === "") {
            Alert.alert("아이디 입력 확인", "아이디가 입력되지 않았습니다.");
        } else if (password.trim() === "") {
            Alert.alert("비밀번호 입력 확인", "비밀번호가 입력되지 않았습니다.");
        } else {
            axios.post("http://192.168.35.149:3000/login", 
                null, 
                { params: {id: id, pwd: password} }
            ).then(function(resp) {
                console.log(resp.data);
                if (resp.data !== null && resp.data != "") {
                    console.log("로그인 성공");
                } else {
                    Alert.alert("로그인 실패", "아이디나 비밀번호를 확인하세요.");
                    setId("");
                    setPassword("");
                }
            }).catch(function(err) {
                console.log(`Error Message: ${err}`);
            })
        }
    }

    return (
        <View style={styles.container}>
            <Image style={styles.image} source={ require("../../assets/logo2.png") } />
            <View style={styles.inputView}>
                <TextInput
                    style={styles.textInput}
                    placeholder="아이디"
                    placeholderTextColor="#003f5c"
                    onChangeText={(id) => setId(id)}
                    value={id}
                />
            </View>
            <View style={styles.inputView}>
                <TextInput
                    style={styles.textInput}
                    textContentType="password"
                    placeholder="비밀번호"
                    placeholderTextColor="#003f5c"
                    value={password}
                    onChangeText={(password) => setPassword(password)}
                    secureTextEntry={true}
                />
            </View>

            {/* TouchableOpacity == Anchor */}
            <TouchableOpacity 
                onPress={() => navigation.navigate("account")}
            >
                <Text style={styles.forgotButton}>회원가입</Text>
            </TouchableOpacity>

            <TouchableOpacity 
                style={styles.loginBtn} 
                onPress={() => login()}
            >
                <Text style={styles.whiteColor}>로그인</Text>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#e9e9e9",
        alignItems: "center",
        justifyContent: "center",
    },
    image: {
        marginBottom: 40,
    },
    inputView: {
        backgroundColor: "#ffc0cb",
        borderRadius: 30,
        width: "70%",
        height: 45,
        marginBottom: 20,
        alignItems: "center",
    },
    textInput: {
        height: 50,
        flex: 1,
        padding: 10,
        marginLeft: 20
    },
    forgotButton: {
        height: 30,
        marginBottom: 30
    },
    loginBtn: {
        width: "50%",
        borderRadius: 25,
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        marginTop: 40,
        backgroundColor: "#ff1493",
    },
    whiteColor: {
        color: "#ffffff"
    }
});

export default Login;