3-7 MainPage 에러 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

3-7 MainPage 에러

[왕초보] 나만의 수익성 앱, 앱개발 종합반 v5

3주차

조*권

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

메인페이지 코드 오류

import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';


const main = 'https://storage.googleapis.com/sparta-image.appspot.com/lecture/main.png'
import data from '../data.json';
import Card from '../components/Card';
import Loading from '../components/Loading';
export default function MainPage() {
  //useState 사용법
  //[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수
  //setState는 state를 변경시킬때 사용해야하는 함수


  //모두 다 useState가 선물해줌
  //useState()안에 전달되는 값은 state 초기값
  const [state,setState] = useState([])
  


  //하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수
  //내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음
  const [ready,setReady] = useState(true)


  useEffect(()=>{
     
    //뒤의 1000 숫자는 1초를 뜻함
    //1초 뒤에 실행되는 코드들이 담겨 있는 함수
    setTimeout(()=>{
        setState(data)
        setReady(false)
    },1000)
 
    
  },[])


  //data.json 데이터는 state에 담기므로 상태에서 꺼내옴
  let tip = state.tip;
  let todayWeather = 10 + 17;
  let todayCondition = "흐림"
  //return 구문 밖에서는 슬래시 두개 방식으로 주석
  return ready ? <Loading/> :  (
    /*
      return 구문 안에서는 {슬래시 + * 방식으로 주석
    */
    <ScrollView style={styles.container}>
      <Text style={styles.title}>나만의 꿀팁</Text>
       <Text style={styles.weather}>오늘의 날씨: {todayWeather + '°C ' + todayCondition} </Text>
      <Image style={styles.mainImage} source={{uri:main}}/>
      <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
        <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
        <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
      </ScrollView>
      <View style={styles.cardContainer}>
         {/* 하나의 카드 영역을 나타내는 View */}
         {
          tip.map((content,i)=>{
            return (<Card content={content} key={i}/>)
          })
        }
        
      </View>
   
    </ScrollView>)
}


const styles = StyleSheet.create({
  container: {
    //앱의 배경 색
    backgroundColor: '#fff',
  },
  title: {
    //폰트 사이즈
    fontSize: 20,
    //폰트 두께
    fontWeight: '700',
    //위 공간으로 부터 이격
    marginTop:50,
    //왼쪽 공간으로 부터 이격
    marginLeft:20
  },
  weather:{
    alignSelf:"flex-end",
    paddingRight:20
  },
  mainImage: {
    //컨텐츠의 넓이 값
    width:'90%',
    //컨텐츠의 높이 값
    height:200,
    //컨텐츠의 모서리 구부리기
    borderRadius:10,
    marginTop:20,
    //컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
    //각 속성의 값들은 공식문서에 고대로~ 나와 있음
    alignSelf:"center"
  },
  middleContainer:{
    marginTop:20,
    marginLeft:10,
    height:60
  },
  middleButton01: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fdc453",
    borderColor:"deeppink",
    borderRadius:15,
    margin:7
  },
  middleButton02: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#fe8d6f",
    borderRadius:15,
    margin:7
  },
  middleButton03: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#9adbc5",
    borderRadius:15,
    margin:7
  },
  middleButtonText: {
    color:"#fff",
    fontWeight:"700",
    //텍스트의 현재 위치에서의 정렬 
    textAlign:"center"
  },
  middleButton04: {
    width:100,
    height:50,
    padding:15,
    backgroundColor:"#f886a8",
    borderRadius:15,
    margin:7
  },
  cardContainer: {
    marginTop:10,
    marginLeft:10
  },
  card:{
    flex:1,
    //컨텐츠들을 가로로 나열
    //세로로 나열은 column <- 디폴트 값임 
    flexDirection:"row",
    margin:10,
    borderBottomWidth:0.5,
    borderBottomColor:"#eee",
    paddingBottom:10


  },
  cardImage: {
    flex:1,
    width:100,
    height:100,
    borderRadius:10,
  },
  cardText: {
    flex:2,
    flexDirection:"column",
    marginLeft:10,
  },
  cardTitle: {
    fontSize:20,
    fontWeight:"700"
  },
  cardDesc: {
    fontSize:15
  },
  cardDate: {
    fontSize:10,
    color:"#A6A6A6",
  },



});

에러 메시지

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MainPage`.

This error is located at:

in MainPage (created by App)

in App (created by withDevTools(App))

in withDevTools(App)

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

in main(RootComponent), js engine: hermes

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException

- ... 28 more stack frames from framework internals

Check the render method of `MainPage`.

This error is located at:

in MainPage (created by App)

in App (created by withDevTools(App))

in withDevTools(App)

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

in main(RootComponent), js engine: hermes

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in reportException

at node_modules\react-native\Libraries\Core\ExceptionsManager.js:null in handleException

- ... 7 more stack frames from framework internals

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, object, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MainPage`.,

in MainPage (created by App)

in App (created by withDevTools(App))

in withDevTools(App)

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

in main(RootComponent)

at node_modules\react\cjs\react-jsx-runtime.development.js:null in printWarning

at node_modules\react\cjs\react-jsx-runtime.development.js:null in error

at node_modules\react\cjs\react-jsx-runtime.development.js:null in jsxWithValidation

at node_modules\react\cjs\react-jsx-runtime.development.js:null in jsxWithValidationDynamic

at pages\MainPage.js:null in MainPage

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderWithHooks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in mountIndeterminateComponent

- ... 21 more stack frames from framework internals

Check the render method of `MainPage`.,

in MainPage (created by App)

in App (created by withDevTools(App))

in withDevTools(App)

in RCTView (created by View)

in View (created by AppContainer)

in RCTView (created by View)

in View (created by AppContainer)

in AppContainer

in main(RootComponent)

at node_modules\react\cjs\react-jsx-runtime.development.js:null in printWarning

at node_modules\react\cjs\react-jsx-runtime.development.js:null in error

at node_modules\react\cjs\react-jsx-runtime.development.js:null in jsxWithValidation

at node_modules\react\cjs\react-jsx-runtime.development.js:null in jsxWithValidationDynamic

at pages\MainPage.js:null in MainPage

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in renderWithHooks

at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in mountIndeterminateComponent

- ... 23 more stack frames from framework internals

댓글 알림