[리액트] useEffect 훅을 사용해서 데이터 로딩 후에 실행하고 싶은 로직 구현하기

useEffect가 실행되는 시점

1. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 요소가 업데이트될 때)

useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수);

 

2. mount (컴포넌트가 브라우저에 표시될 때)

useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수, []);

 

3.  mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 특정 요소가 업데이트될 때)

useEffect(배열에 있는 요소가 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수 또는 State]);

 

4. unmount (컴포넌트가 사라질 때)

useEffect(() => {return 컴포넌트가 사라지기 전에 실행할 함수})

 

예제

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

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

  // useEffect 훅의 두번째 파라미터로 빈배열이 있으므로 mount(컴포넌트가 브라우저에 렌더링)될때만 실행
  // 백엔드에서 데이터를 불러온다는 가정을 하기 위해 setTimeout 함수를 사용
  // setTimeout으로 3초의 지연시간을 줌
  useEffect(() => {
    setTimeout(() => {setIsLoaded(true)}, 3000)
  }, [])

  // useEffect 훅의 두번째 파라미터로 isLoaded 상태값을 가진 배열이 있으므로 mount될때 해당 상태값이 업데이트됬을때 실행
  // isLoaded 상태값이 업데이트되면 실행할 로직
  useEffect(() => {
    setText(text.concat(['로딩이 완료되었습니다']))
  }, [isLoaded])
	
  // 3초 후에 isLoaded 상태값이 true로 업데이트되면서 로딩완료라는 엘리먼트가 표시
  return (
    <>
      <div>{ isLoaded ? <span>로딩완료</span> : <span>로딩중</span>  }</div>
      <div>{ text }</div>
    </>
  )
}

export default Loading