Movie Title Pops up

-import React, {Component} from 'react';  
-import {Platform, StyleSheet, Text,  
-  View,TouchableOpacity, AsyncStorage,  
-} from 'react-native'; 
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    AsyncStorage,
+    ScrollView,
+    //불러오기 위한 것
+    Image,
+} from 'react-native';
 import { Icon } from "native-base";
+import axios from "axios";
+const API_KEY = "2bf00f660b1a6a3ffeb6e06ac270cce3";
+const NAVER_CLIENT_ID = "KqPsntd1hcPJ8FUPBGqN";
+const NAVER_CLIENT_SECRET = "0GRb3uya1U";
 
-  
-export default class App extends Component {  
+
+export default class App extends Component {
+    state = {
+        date: "", //날짜
+        imgurl0: [], //이미지
+        name0: [], //제목
+    };
+
+    //날짜 정하기
+    componentDidMount() {
+        var day = new Date().getDate() - 1; // 어제 날짜
+        if (day == 1) {
+          day = 30;
+        } else if (day < 10) {
+          day = "0" + day;
+        }
+        var month = new Date().getMonth() + 1; //Current Month
+        var year = new Date().getFullYear(); //Current Year
+        var date = year + "" + month + day;
+        this.getMovieList(date);
+      }
+
+    getMovieList = async date => {
+        axios
+          .get(
+            `http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${API_KEY}&targetDt=${date}`
+          )
+          .then(
+            response => {
+              this.setState({
+                //영화 제목
+                name0: response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm,
+              });
+    
+              temp = response.data.boxOfficeResult.dailyBoxOfficeList[0].movieNm;
+              fetch(
+                `https://openapi.naver.com/v1/search/movie.json?query='${temp}'`,
+                {
+                  headers: {
+                    "X-Naver-Client-Id": NAVER_CLIENT_ID,
+                    "X-Naver-Client-Secret": NAVER_CLIENT_SECRET
+                  }
+                }
+              )
+                .then(response => response.json())
+                .then(json => {
+                  this.setState({
+                    imgurl0: json.items[0].image
+                  });
+                });
+            }
+          )
+          .catch(error => {
+            console.log(error);
+          });
+      };
+    
     //네비게이션 바
     static navigationOptions = {
         tabBarIcon: ({ tintColor }) => (
             <Icon name='ios-star' style={{ color: tintColor }} />
         )
     }
-  saveData(){  
-    let name = "앙기모띠";  
-    AsyncStorage.setItem('user',name);  
-  }  
-  displayData = async ()=>{  
-    try{  
-      let user = await AsyncStorage.getItem('user');  
-      alert(user);  
-    }  
-    catch(error){  
-      alert(error)  
-    }  
-  }  
-  render() {  
-    return (  
-      <View style={styles.container}>  
-        <TouchableOpacity onPress ={this.saveData}>  
-          <Text>User정보 저장</Text>  
-        </TouchableOpacity>    
-        <TouchableOpacity onPress ={this.displayData}>  
-          <Text>User정보 출력</Text>  
-        </TouchableOpacity>   
-      </View>  
-    );  
-  }  
-}  
-  
-const styles = StyleSheet.create({  
-  container: {  
-    flex: 1,  
-    justifyContent: 'center',  
-    alignItems: 'center',  
-    backgroundColor: '#F5FCFF',  
-  },  
+
+    //저장 함수
+    saveData() {
+        AsyncStorage.setItem('test', this.state.name0);
+    }
+
+    //출력 함수
+    displayData = async () => {
+        try {
+            let user = await AsyncStorage.getItem('test');
+            alert(user);
+        }
+        catch (error) {
+            alert(error)
+        }
+    }
+
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <View style={styles.top}>
+                    <TouchableOpacity onPress={this.saveData.bind(this)}>
+                        <Image
+                            style={styles.poster}
+                            source={{ uri: `${this.state.imgurl0}` }}
+                        />
+                        <Text>{this.state.name0}</Text>
+                        <Text style={styles.textStyle}>영화 정보 저장</Text>
+                    </TouchableOpacity>
+                </View>
+
+                <View style={styles.bottom}>
+                    <TouchableOpacity onPress={this.displayData}>
+                        <Text style={styles.textStyle}>영화 정보 출력</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center"
+    },
+    top: {
+        flex: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    bottom: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    textStyle: {
+        fontSize: 25,
+    },
+    poster: {
+        flex: 5,
+        paddingHorizontal: 50
+    },
 });  
\ No newline at end of file