useEffect

React의 생명주기

react의 component에는 생명주기가 있는데 컴포넌트가 표시되고 사라지는 순간까지를 말한다.

컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다.

mount (컴포넌트가 표시될 때) → update (컴포넌트 내부의 요소가 업데이트될 때) → unmount (컴포넌트가 사라질 때)

useEffect 는 위 3가지 시점중 하나를 골라서, 해당 시점에 특정한 함수가 실행되도록 하는 Hook이다.

 

1. mount

useEffect(컴포넌트가 표시될 때 실행할 함수, [])

화면이 로딩되고 나서 3초 뒤에 변수의 값이 변하는 예제

import React, { useState, useEffect } from 'react'

function Loading() {
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    setTimeout(() => {setIsLoaded(true)}, 3000)// 3초뒤 isLoaded 변수 값을 변경
  }, [])

  return (
    <div>
        {isLoaded ? <>로딩완료!</> : <>로딩 중</>}
    </div>
  )
}

export default Loading

 

2.update

useEffect(업데이트할 함수, [업데이트 되는지 지켜볼 변수/State]);

- 로딩이 완료된 후 텍스트가 추가되는 예제

- 컴포넌트가 첫 렌더링될 때 한 번 실행되고, 그 다음부터는 isLoaded 값이 바뀔 때마다 계속 실행된다.

import React, { useState, useEffect } from 'react'

function Loading() {
  const [isLoaded, setIsLoaded] = useState(false)
  const [text, setText] = useState([])

  useEffect(() => {
    setTimeout(() => {setIsLoaded(true)}, 3000)
  }, [])

  // isLoaded 값이 변경할 때마다 실행
  useEffect(() => {
    const temp = text.concat(['추가!'])
    setText(temp)
  }, [isLoaded])

  return (
    <div>
        {isLoaded ? <>로딩완료!</> : <>로딩 중</>}
        {text}
    </div>
  )
}

export default Loading

3.unmount

useEffect(() => {return () => 컴포넌트가 사라질 때 실행할 함수})

 

 

20230228 패스트캠퍼스 FE4기 수업자료를 참고하였습니다.