react 현재시간 화면에 나타나고 초마다 갱신되게하기 / typescript 시계 만들기

실행문

npx react-native init sample21 --template react-native-template-typescript

App.tsx

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App(){
  return(
    <View style={styles.cotainer}>
      <Clock/>
    </View>
  )
}

const Clock =() =>{
  const [date, setDate] = useState(()=> new Date())

  useEffect(()=>{
    const timeId = setInterval(()=>tick(),1000)
    console.log('setInteval')

    return() =>{
      clearInterval(timeId)
      console.log('clearInterval')

    }
  })


  const tick =() =>{
    setDate(new Date())
  }

  return(
    <View style={styles.cotainer}>
      <Text style={styles.timeText}>현재시간</Text>
      <Text style={styles.timeText}>{date.toLocaleTimeString()}</Text>
    </View>
  )
}

const styles = StyleSheet.create({

cotainer:{
  flex:1,
  backgroundColor:'#ffffff',
  alignItems:'center',
  justifyContent:'center'
},
timeText:{
  fontSize:30,
  fontWeight:"bold"
}
})

 

실행화면

초마다 시간이 갱신되며 콘솔창에 표시된다