State

Component 내부 상태값을 변경하기 위해 사용한다.

Clock 예시로  State와 생명주기 간단 정리하기.

1.  useState로 date를 초기화해준다.

2. useEffect로 렌더링 되자마자 tick()함수를 실행한다.

3. DOM이 삭제될 때 useEffect내부에 clearInterval함수로 타이머를 해제한다.

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

// 함수형 컴포넌트
export default function FunctionalComponent() {
  // useState로 관리
  const [date, setDate] = useState(new Date())

  // date를 업데이트 해주는 함수
  const tick = () => {
    setDate(new Date())
  }

  // dependency 빈 배열로 렌더링 되자마자 실행.
  useEffect(() => {
    // 1초간격으로 tick 실행
    const interval = setInterval(() => tick(), 1000)

    // DOM이 삭제될 때마다 타이머 해제
    return () => {
      clearInterval(interval)
    }
  }, [])

  return (
    <div>
      <h1>Hello, World</h1>
      <h2>It is {date.toLocaleTimeString()}</h2>
    </div>
  )
}

Life Cycle

아래 생명주기 도표를 참조하자.

위 예시와 같은 내용을 ClassComponents로 작성하였다.

import React, { Component } from 'react'

export default class ClassComponent extends Component {

  // state 초기화
  constructor(props) {
    super(props)
    this.state = { date: new Date() }
  }

  // DOM 초기화 및 데이터 fetch - 타이머 실행
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000)
    console.log('DidMount')
  }

  // 타이머 제거
  componentWillUnmount() {
    clearInterval(this.timerID)
    console.log('componentWillUnmount')
  }

  tick() {
    // console.log('tick')
    this.setState({ date: new Date() })
  }

  render() {
    console.log('render')
    return (
      <div>
        <h1>Hello, World</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

참조문서

https://ko.reactjs.org/docs/react-component.html