React : State Example

Class Component

import React, { Component } from 'react'

export default class ClassComponent extends Component {
  constructor(props) { // state
    super(props);
    this.state = { date: new Date() }; 
  }

  componentDidMount() { // useEffect
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() { // useEffect { return } (마운트 해제)
    clearInterval(this.timerID);
  }

  tick() { // 함수
    this.setState({
      date: new Date(),
    });
  }

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

Functional Component

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

export default function FunctionalComponent() {
  const [date, setDate] = useState(new Date()); // 초기화, 상태

  const tick = () => {
    setDate(new Date()); // 업데이트
  };

  useEffect(() => { // DidMount 타이밍
    const interval = setInterval(() => tick(), 1000);

    return () => {
      clearInterval(interval); // Unmount 타이밍
    };
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is Functional : {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

함수형 컴포넌트에서 클래스형 컴포넌트의 생명주기를 모두 표현할 수 있다.

ErrorBoundary 만 특이하게 클래스형 컴포넌트로만 사용한다.

정리

State

컴포넌트 내의 상태 → 자신의 출력 값을 변경 (순수함수 변경X / State를 변경)

Class Component → State LifeCycle

Fucntional Component → 훅으로 관리

유의사항 → 직접수정 X / 비동기적일 수 있음

https://ko.reactjs.org/docs/state-and-lifecycle.html

비동기적일수 있다 : 그래서 이전 값인 prev 를 사용

순차적으로 set 을 하기 때문에, set 하자마자 그 값을 바로 사용하게 되면,

그 때는 그 값이 들어가있지 않을 수 있기 때문에.