ifecycle 와 useEffect()

ifecycle 개념

1. clock컴포넌트

import React, {useState} from 'react'

export default function Clock() {
  const [date, setDate] = useState(new Date())
  return (
    <div>
      <h1>Hello, world</h1>
      <h2>It is {date.toLocaleTimeString()}</h2>
    </div>
  )
}

clock 컴포넌트가 렌더링되는 순간의 시간이 화면에 보여지기 때문에, 시간이 흘러도 화면은 멈춰있게 됩니다.

2. 화면에 보여지는 시간을 1초마다 업데이트 해주고 싶다면?

• 해야할 일: 1초마다 setDate(new Date())를 실행해서 화면을 업데이트 해줘야합니다.

window.setInterval(()=>{
  setDate(new Date())
}, 1000)

그렇다면 이 setIntervel컴포넌트는 코드에 어느 부분에 넣어야할까요?

import React, {useState} from 'react'

export default function Clock() {
  const [date, setDate] = useState(new Date())

  window.setInterval(()=>{
    setDate(new Date())
  }, 1000)
  
  return (
    <div>
      <h1>Hello, world</h1>
      <h2>It is {date.toLocaleTimeString()}</h2>
    </div>
  )
}

현재 넣을 수 있는 부분은 위 위치밖에 없습니다. 하지만 이 경우 컴포넌트가 setInterval함수가 실행되며 setState가 다시 컴포넌트가 리렌더링 되는 현상이 생기게 되어버립니다.

3. 필요한 아이디어

• 컴포넌트가 처음 렌더링될 때(DOM에 mounte)
  • window.setInterval()
• 컴포넌트가 DOM에서 빠졌을 때 (=unmount)
  • window.clearInterval()

리액트 라이클사이클

2. Lifecycle 클래스형 컴포넌트 실습

App.js

import './App.css';
import Clock from './components/Clock'

function App() {
  return <Clock />
}

export default App;

Clock.js

import React from "react";

export default class Clock extends React.Component {
  constructor(props){ //초기화 담당
    super(props);
    this.state = { date: new Date() };
  }
  //Class에 해당하는 메서드로  setSate를 실행해 새로운 데이터로 업데이트
  tick() {
    this.setState({
      date: new Date(),
    })
  }
	//4.
  componentDidMount() {
    console.log('componentDidMount');
    this.timerID = setInterval(() => this.tick(), 1000)
  }
  
    //5.
  componentDidUpdate() {
    console.log('componentDidUpdate');
    console.log(this.state.date)
  }

  //6. 

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It si {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
  
}