[React_study] Lifecycle & useEffect

* Lifecycle

- 컴포넌트에는 Lifecycle이라는 개념이 있다.

• 생성 (mount)
• 재렌더링(update)
• 삭제(unmount)

컴포넌트가 Lifecycle을 하게 될 때  특정 코드를 실행할 수 있다

갈고리(hook)을 달아서 코드를 넣어주면 됩니다.

그럼 페이지 장착시, 업데이트시, 제거시 코드실행가능 

그래서 저걸 Lifecycle hook 이라고 부릅니다. 

componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다.

---

* React에서 Lifecycle hook사용법 (예전 버전)

• class 문법을 이용한 컴포넌트 생성 및 함수명을 작성해주어 특정 Lifecycle에서 코드 실행

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

* React에서 Lifecycle hook사용법 (최근)

• useEffect를 import해주고 그 안에 코드를 작성한다.
• 해당 코드는 mount, update시 실행된다.
• 이게 Lifecycle hook이다.

import { useEffect } from 'react';

function Detail(){

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

* 재렌더링이 되어도 useEffect안의 코드가 실행이 된다.

import {useState, useEffect} from 'react';

function Detail(){

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

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

*  useEffect를 왜 사용할까?

• useEffect 바깥에 코드를 작성하여도 똑같이 컴포넌트 mount & update시 실행이 된다.
• 컴포넌트가 mount & update시 function 안에 있는 코드도 다시 읽고 지나가서 그렇다.
• 그렇다면 왜 useEffect를 사용하는걸까?

 

- useEffect 안에 적은 코드는 html 렌더링 이후에 동작합니다.

 

예를 들어서 굉장히 시간이 오래걸리는 쓸데없는 코드가 필요하다고 가정해봅시다.

useEffect 안에 적으면 html 보여주고 나서 반복문 돌리게 된다.

 

이런 식으로 코드의 실행 시점을 조절할 수 있기 때문에 조금이라도 html 렌더링이 빠른 사이트를 원하면

오래걸리는 코드들은 useEffect 안에 넣길 바란다.

 

- useEffect안에 적는 코드들

• 어려운 연산
• 서버에서 데이터 가져오는 작업 (API)
• 타이머 장착하는 부분 (setTimeout)

function Detail(){

  useEffect(()=>{
    for (let i=0; i < 10000000; i++) {
    	console.log(i)
    }
  });
  
  return (생략)
}

 

함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect라고 부른다.

useEffect도 거기서 따온건데 컴포넌트의 핵심 기능은 html 렌더링이라 

그거 외의 기능들은 useEffect 안에 적으라는 의미이다.

오래걸리는 반복연산, 서버에서 데이터가져오는 작업, 타이머 등등

이런건 useEffect 안에 많이 적는다.