http 통신 허용

일반적으로 어플에서는 http 통신이 아닌 https 통신을 해야한다. 하지만 로컬에서 테스트를 진행하는 경우에도 https 설정을 하기 귀찮음으로 http 통신이 가능하게 설정을 해줘야 한다.

https://wisdomcrane.github.io/journal/.ios-http/

위 글을 보고 따라하자.

데이터 요청하고 받아오기

FlatList를 통해 데이터를 화면에 표시하는 것이기 때문에 setData()에 매개변수로 리스트 값을 넘겨줘야 한다.

const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    const getMovies = async () => {
        try {
            // const response = await fetch('https://reactnative.dev/movies.json');
            const response = await fetch('http://localhost:8080/test');
            const json = await response.json();
            console.log("getJson : ", json)
            // setData(json.movies);
            setData([json]); // <- json은 리스트 형식이어야 한다
            // console.log("getMovies", json.movies)
            // console.log("data : ", data)
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        getMovies();
    }, []);


    const renderItem = ({ item }) => (
        <Item title={item.title} />
    );

    return (
        <SafeAreaView style={styles.container}>
            <View style={{ flex: 1, padding: 24 }}>
                {isLoading ? <ActivityIndicator /> : (
                    <FlatList
                        data={data}
                        keyExtractor={({ id }, index) => id}
                        renderItem={renderItem}
                        // renderItem={({ item }) => (
                        //     <Text>{item.title}, {item.releaseYear}</Text>
                        // )}
                    />
                )}
            </View>
            {/* <Text>Hello Axios!!</Text>
            
            <FlatList
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            /> */}
        </SafeAreaView>
    );

스프링부트에서 데이터 전송

@ResponseBody 어노테이션을 붙이고 객체를 반환하면 자동으로 스프링부트에서 자동으로 json객체로 변환 후 전송해준다

	@GetMapping("/test")
    @ResponseBody
    public TestVO testRestApi() {
        return new TestVO("1", "Star Wars", "1977");
    }

    @Data
    class TestVO{
        public TestVO(String id, String title, String releaseYear) {
            this.title = title;
            this.id = id;
            this.releaseYear = releaseYear;
        }

        String title;
        String id;
        String releaseYear;
    }