Lifecycle 와 useEffect()

react공식문서

1. State and Lifecycle

import React from "react";

export default class Clock extends React.Component {
  //1. 초기화를 담당하는 영역
  constructor(props){
    super(props);
    this.state = { date: new Date() };
  }

  //3. tick함수 추가
  tick() {
    this.setState({
      date: new Date(),
    })
  }
  //4. 컴포넌트 생성된 직후 실행
  componentDidMount() {
    console.log('componentDidMount');
    this.timerID = setInterval(() => this.tick(), 1000)
  }
  //5. 컴포넌트가 업데이트 될 때 실행
  componentDidUpdate() {
    console.log("compoentDidUpdate");
    console.log(this.state.date)
  }
  //6. 컴포넌트가 제거될 때 실행
  componentWillUnmount() {
    console.log('componentWillUnmount')
    clearInterval(this.timerID)
  }
  
  //2. 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It si {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
  
}

1. 초기화를 담당하는 부분

• 해당하는 컴포넌트의 state는 보통 이부분에서 정의를 해줍니다.

2. render()함수를 실행하면

• 컴포넌트가 첫번째 렌더에 실행이 되는 것을 확인할 수 있습니다.
  
  위 라이프사이클을 고려하여 생각을 해본다면 render함수가 실행된 후 React DOM이 업데이트 된다는 것을 확인할 수 있을 것입니다.

3. tick함수

• 클래스에 해당하는 메소드로 setState를 싱행해 date를 최신Date로 업데이트를 해줍니다.

4. componentDidMount함수

• setIntever로 1초에 한번씩 앞서에 정의한 tick함수가 실행되도록 정의해줬습니다.이 setIntever함수는 timerID를 반환하기 때문에 Class의 변수로 설정해두었습니다.
• 참고로, timerID는 state의 변수가 아니기 때문에 1번부분(constructor)에서 따로 정의가 되지 않았습니다.
• 이 부분은 DOM을 업데이트 한 직후에 실행되는 메서드입니다. 즉, 컴포넌트가 마운트 되었음을 의미합니다.
• componentDidMount함수가 실행된 1초 뒤에 tick함수를 실행시킵니다. 그러면 업데이트가 됩니다.
  

5. componentDidUpdate함수

• 컴포넌트가 업데이트가 될 때 실행되는 함수입니다. 즉, 컴포넌트가 변경될 떄마다 실행이 됩니다.

6. componentWillUnmount함수

• 컴포넌트를 제거할 때 실행이 됩니다.

2. useEffect()

useEffect() hook 기본

React 공식문서

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect()

함수와 배열, 두가지 인자를 받습니다.또한 두번쨰 인자인 배열은 옵션이기 떄문에 사용하지 않아도 괜찮습니다.

• componentDidMount처럼 동작
  • 첫 렌더링된 직후에만 첫번재 인자인 함수가 실행이 됩니다.
• componentDidMount + componentDidUpadate처럼 동작
• 즉, 첫 렌더링된 직후에도 첫번재 인자인 함수가 실행이 되며, props를 받거나 컴포넌트가 변경되면 리렌더링이 발생하며 함수가 실행됩니다.
• 하지만 아래와 같이도 사용할 수 있기 때문에 배열을 아예 넣지 않고 사용하는 경우는 거의 없습니다

• omponentDidMount에도 실행이 되며 배열의 값이 변경되는 경우에도 첫번째 인자인 함수가 실행됩니다.

라이브코딩

App.js

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

function App() {
  return <ClassClock />
}

export default App;

ClassClock.js

import React from "react";

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

  tick() {
    this.setState({
      date: new Date(),
    })
  }

  componentDidMount() {
    console.log('componentDidMount');
    this.timerID = setInterval(() => this.tick(), 1000)
  }

  componentDidUpdate() {
    console.log("compoentDidUpdate");
    console.log(this.state.date)
  }

  componentWillUnmount() {
    console.log('componentWillUnmount')
    clearInterval(this.timerID)
  }
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It si {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    )
  }
  
}