3-5강에서 DetailPage 복사 후 에러가 납니다.

어플은 실행이 되는데 디테일 페이지 자료 불러오면 에러가 나는 거 같아요

디테일 페이지는 코드스니펫에서 복사된 것 그대로 입니다.

작성한 코드 및 에러 메세지

import React,{useState,useEffect} from 'react';

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

export default function DetailPage({navigation,route}) {

//초기 컴포넌트의 상태값을 설정

//state, setState 뿐 아니라 이름을 마음대로 지정할 수 있음!

  const [tip, setTip] = useState({

    "idx":9,

    "category":"재테크",

    "title":"렌탈 서비스 금액 비교해보기",

    "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",

    "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",

    "date":"2020.09.09"

  })

  useEffect(()=>{

    console.log(route)

//Card.js에서 navigation.navigate 함수를 쓸때 두번째 인자로 content를 넘겨줬죠?

 //content는 딕셔너리 그 자체였으므로 route.params에 고대~로 남겨옵니다.

 //즉, route.params 는 content죠!

    navigation.setOptions({

//setOptions로 페이지 타이틀도 지정 가능하고

      title:route.params.title,

//StackNavigator에서 작성했던 옵션을 다시 수정할 수도 있습니다. 

      headerStyle: {

        backgroundColor: '#000',

        shadowColor: "#000",

      },

      headerTintColor: "#fff",

    })

    setTip(route.params)

  },[])

  const popup = () => {

    Alert.alert("팝업!!")

  }

  return ( 

    // ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고

    // 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다. 

    // 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다. 

    <ScrollView style={styles.container}>

      <Image style={styles.image} source={{uri:tip.image}}/>

      <View style={styles.textContainer}>

        <Text style={styles.title}>{tip.title}</Text>

        <Text style={styles.desc}>{tip.desc}</Text>

        <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>

      </View>

    </ScrollView>

  )

}

const styles = StyleSheet.create({

  container:{

    backgroundColor:"#000"

  },

  image:{

    height:400,

    margin:10,

    marginTop:40,

    borderRadius:20

  },

  textContainer:{

    padding:20,

    justifyContent:'center',

    alignItems:'center'

  },

  title: {

    fontSize:20,

    fontWeight:'700',

    color:"#eee"

  },

  desc:{

    marginTop:10,

    color:"#eee"

  },

  button:{

    width:100,

    marginTop:20,

    padding:10,

    borderWidth:1,

    borderColor:'deeppink',

    borderRadius:7

  },

  buttonText:{

    color:'#fff',

    textAlign:'center'

  }

})오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!