Lifecycle

컴포넌트의 Lifecycle

1. 페이지에 장착 (mount)
2. 업데이트 (update)
3. 제거 (unmount)

사용하는 이유 : 컴포넌트 인생 중간중간에 간섭 할 수 있기 때문

컴포넌트 장착시 특정 코드 실행 가능
컴포넌트 업데이트시 특정 코드 실행 가능

옛날 React에서 Lifecycle hook 사용했던 방법

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}

예전엔 class 문법으로 컴포넌트를 만들었다.
그 경우 함수명을 저렇게 사용하여 각각 특정 Lifecycle에서 코드를 실행 할 수 있다.

useState

요즘 React에서 Lifecycle hook 사용하는 방법

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

function Detail() {
  useEffect(() => {
    // 컴포넌트 mount & update 시 실행
    console.log('hi');
  });

  return (
    // (생략)
  )
}

re-rendering 할 때, console 출력되나 test

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    console.log('hi')
  });

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={() => {
        setCount(count+1)
    }}>버튼</button>
  )
}

Q. 'hi' 2번 출력되는 이유는 ?

A. index.js에 <React.StringMode>라는 태그가 있으면 2번 출력해줍니다.
	디버깅용으로 편하라고 2번 출력해줌. (태그 제거하면 사라짐)

useEffect 동작시점

useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다

1. js
2. html렌더링 return()
3. useEffect

코드 실행시점을 조절할 수 있기 때문에 조금이라도 html 렌더링이 빠른 사이트를 만들기 위해 useEffect 사용.

컴포넌트의 핵심 기능은 HTML 렌더링이니까
이외의 다른 기능들은 useEffect 안에 적자.
ex) 오래걸리는 반복연산, 서버에서 데이터 가져오는 작업, Timer 설정

• 함수의 핵심기능 외에 나머지 기능들을 side effect라고 부릅니다.