React Lifecycle & useEffect 1

Lifecycle

컴포넌트는 Lifecycle이라는 개념이 있다.
1. 생성이 될 수도 있고(mount)
2. 재랜더링이 될 수도 있고(update)
3. 삭제가 될 수도 있다.(unmount)
컴포넌트의 사이클에 따라서 해당 시점에 특정코드를 실행할 수 있다.
해당 시점에 갈고리를 달아서 코드를 넣어주면 되는데 갈고리는 영어로 hook이라고 한다.
그래서 이 방식을 Lifecycle hook이라고 한다.

예전 클래스형 문법 react에서 쓰던 방법

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

현재 React에서 Lifecycle hook 사용법✨

// 상단에서 useEffect import해오기
import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('hi')
  });

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

useEffect의 유래는 side effect에서 온 것인데
함수의 핵심기능 외에 다른 부가기능들을 side effect라고한다.
컴포넌트의 핵심 기능은 html렌더링이라고 볼 수 있기때문에 그 외의 기능들은 useEffect 안에 넣으면 된다.
useEffect 안에 적은 코드는 html 렌더링 이후에 동작하므로
보통 오래걸리는 반복연산, 서버에서 데이터를 가져오는 비동기 작업, 타이머함수 등은
useEffect 안에 적는다.