[React, React Native] Lifecycle 및 useEffect

React와 React Native를 사용할 때 유용한 Lifecycle, useEffect를 공부해보자.

 

 

쉽게 말해 컴포넌트가 생성되고 제거될 때 특정 코드를 실행하기 위해 사용하는 것이 Lifecycle이다.

 

컴포넌트의 인생이라고 이해하면 쉽다.

 

페이지에 장착되거나 (mount), 업데이트 되거나(update), 필요없으면 제거되거나 (unmount)

 

LifeCycle 란?

 

 

위의 그림은 크게4가지로 분류할 수 있다.

 

Mount : 컴포넌트 처음 실행시켰을 때의 상태

 

state, props, context 저장 -> componentWillMount()-> render() -> componentDidMount() (주로 서버에 데이터 요청)

 

Update- prop : props가 업데이트 될 때

 

componentWillRecieveProps() (props가 변경될 때 감지) → shouldComponentUpdate() ( component 업데이트 할 꺼야?) 

→ componentWillUpdate() (component가 업데이트 될 때) → render() → compoentDidUpdate() (component 가 업데이트 된 후)

 

Update -state : State가 업데이트 될 때

*Props와 차이점은 componentWillRecieveProps을 호출하지 않는다

메소드들이 바뀔 state에 대한 정보를 갖고 있고 componentDidUpdate는 바뀌기 전의 state를 갖고 있음

 
 shouldComponentUpdate()  → componentWillUpdate() → render() → compoentDidUpdate()

 

Unmount : 컴포넌트 제거 될 때

 

Error : 에러가 발생했을 때

 

서버 통신에 실패했을 때 에러 페이지 만들 때 사용

 

 

Lifecycle hook 사용하는 방법

 

import {useState, useEffect} from 'react';

function LifeCycleHook(){

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

 

대략적인 형태이다.

 

상단에서 useEffect import해오고,

콜백함수 추가해서 안에 코드 적으면 이제 그 코드는 컴포넌트가 mount & update시 실행된다.

그래서 이게 Lifecycle hook 이다.

 

useEffect 특징

 

- useEffect 바같에 적어도 똑같이 컴포넌트 mount & update시 실행이 된다.

( 컴포넌트가 mount & update시 functon 안에 있는 코드도 다시 읽고 지나가서 그렇다.)

 

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

 

- 예를 들어, 시간이 오래 걸리는 쓸데 없는 코드가 필요하다면?

 

function Detail(){

  (반복문 10억번 돌리는 코드)
  return (생략)
}

 

-> 여기에 대충 적으면 반복문 돌리고 나서 하단의 html을 보여준다.

 

function Detail(){

  useEffect(()=>{
    (반복문 10억번 돌리는 코드)
  });
  
  return (생략)
}

 

 -> useEffect안에 적으면 html 보여주고 나서 반복문을 돌린다.

 

- 이런식으로 코드의 실행 시점을 조절할 수 있다.

 

- 함수의 핵심 기능 이외에 쓸 데 없는 기능들을 프로그래밍 용어로 side effect라고 부르는데, 컴포넌트의 핵심 기능은 html렌더링이라 그거 외의 쓸데 없는 기능들은 useEffect 안에 넣는 것이 좋다. (오래걸리는 반복연산, 서버에서 데이터 가져오는 작업, 타이머 등)

 

useEffect에 넣을 수 있는 실행조건

 

useEffect(()=> { 실행할코드 }, [count])

 

useEffect()의 둘째 파라미터로 [ ]를 넣을 수 있는데, 거기에 변수나 state같은 것들을 넣을 수 있다.

 

그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행해준다.

 

위의 코드는 count라는 변수가 변할 때만 useEffect안의 코드가 실행된다.

 

useEffect(()=> { 실행할 코드 }, [])

 

아무것도 안 넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영실행하지 않는다.

 

 

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

 

그럼 useEffect 안에 있는 코드를 실행하기 전에 return ()=> {}안에 있는 코드를 실행한다.

 

참고로 이런 것을 clean up function이라고 부른다.

 

clean up function이 왜 생겼냐?

 

예를 들어, 버튼을 누르면 setTimeout 함수가 실행되는 코드에서

setTimeout() 쓸 때마다 브라우저 안에 타이머가 하나 생긴다.

 

그럼 useEffect안에 썻기 때문에 컴포넌트가 mount될 때마다 실행된다.

 

그럼 잘못 코드를 짜면 타이머가 100개 1000개 생성될 수 있다.

 

나중에 그런 버그를 방지하고 싶으면useEffect에서 타이머 만들기 전에 기존 타이머를 싹 제거하라고 코드를 짜면 되는데

그런거 짤 때 return ()=>{} 안에 짜면 된다.

 

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

 

이런 식으로 타이머를 제거한다!

 

 

❗clean up function에는 타이머 제거, socket 연결 요청 제거, ajax 요청 중단 이런 코드를 많이 작성한다.

 

❗컴포넌트 unmount시에도 clean up function 안에 있던게 1회 실행된다.

 

 

간단 정리 !!

 

useEffect(()=> { 실행할코드 })

 

-> 재렌더링 마다 코드를 실행한다.

 

useEffect(()=> { 실행할코드 }, [])

 

-> 이러면 컴포넌트 mount 시 (로드시) 1회만 실행가능하다.

 

useEffect(()=> {
  return () => {
    실행할코드
    }
 })

 

-> useEffect 안의 코드 실행 전에 항상 실행된다.

 

useEffect(()=> {
   return () =>{
     실행할코드
   }
}, [])

 

-> 컴포넌트 unmount시 1회 실행된다.

 

useEffect(()=>{
   실행할코드
}, [state1])

 

-> state1이 변경될 때만 실행된다.

 

 

 

 

‼️ 참고 : 코딩애플 react 강의