[React Native] useEffect

useEffect

---

useEffect는 클래스형 컴포넌트의 메서드인 componentDidMount와 componentDidUpdate를 합쳐서 사용하는 형태로 컴포넌트가 업데이트될 때마다 특정 작업을 실행하게 해주는 Hook이다.

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

// useEffect: 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하는 hook
// componentDidMount + componentDidUpdate + componentWillUnmount
function Welcome(props:any) {

  console.log("start");

  useEffect(() => {     // == document.addEventListener("DOMContentLoaded", function(){})
    props.setText("useEffect로 바뀌는 텍스트");
    console.log("useEffect 작동")
  })

  // function onClickHandler() {
  //   props.setText("바뀐 텍스트");
  // }

  console.log("end");

  return (
    <View>
      <Text>Welcome</Text>
      {/* <Button title="button" onPress={onClickHandler}></Button> */}
    </View>
  )
}

export default function App() {

  // useState : getter와 setter의 한 쌍으로 이해
  const [text, setText] = useState("텍스트");

  return (
    <View>
      <Text>텍스트: {text}</Text>
      <Welcome setText={setText} />
    </View>
  )
}

App에서 Welcome 컴포넌트에 attribude로 setText를 전달해준다. 이 때, Welcome 함수는 prop라는 매개변수를 통해 값을 전달받는데, 이 때 setText를 "useEffect로 바뀌는 텍스트"라고 지정했다.

이 때 실행순서는 Welcome 함수에 진입하여 return구문쪽부터 실행하게 되고 그 다음으로 useEffect를 호출한다.

화면에 시계를 구현하는 예시

---

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

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

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

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

  useEffect(() => {
    const timeInstance = setInterval(() => { tick() }, 1000)
    // console.log('serInterval');

    return () => {
      clearInterval(timeInstance);
      // console.log('clearInterval');
    }
  }, [])

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e9e9e9',
    alignItems: 'center',
    justifyContent: 'center',
  },
  timeText: {
    fontSize: 30,
    fontWeight: 'bold',
  }
})