useEffect

useEffect는 함수 컴포넌트에서 side effect(부수 효과)를 수행할 수 있는 Hook이다. useEffect를 사용하면 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 업데이트 되었을 때 특정 작업을 수행할 수 있다.

기본 문법

useEffect의 기본 문법은 다음과 같다.

useEffect(function, deps);

function: 수행하고자 하는 작업
deps: 검사하고자 하는 배열 (배열에 특정 값을 넣으면 해당 값이 변경될 때만 function 실행)

컴포넌트가 마운트 되었을 때

컴포넌트가 마운트 되었을 때 특정 작업을 수행하고 싶은 경우, deps에 빈 배열을 넣는다.

import React, { useEffect } from 'react'

const App = () => {
  useEffect(() => {
    console.log('mounted')
  }, [])

  return (
    <div>
      App
    </div>
  )
}

export default App

deps에 배열을 넣지 않으면 컴포넌트가 마운트 되었을 때 뿐만 아니라 업데이트 되었을 때에도 function이 실행된다. 다음 코드에서 + 버튼을 클릭하면 count가 업데이트 되면서 function이 실행되는 것을 확인할 수 있다.

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

const App = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('mounted or updated')
  })

  const addCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>count: {count}</h1>
      <button onClick={() => addCount()}>+</button>
    </div>
  )
}

export default App

컴포넌트가 마운트 또는 업데이트 되었을 때

만약 <App> 컴포넌트가 <React.StrictMode>로 감싸져있다면 function이 두 번 호출되게 된다. 스트릭트 모드는 개발 도중 발생하는 잠재적인 문제점을 감지하기 위한 도구이다. 두 번 호출되지 않게 하려면 <React.StrictMode>를 제거하면 된다.

컴포넌트가 업데이트 되었을 때

컴포넌트가 업데이트 되었을 때(props 또는 state가 변경되었을 때) 특정 작업을 수행하고 싶은 경우, deps에 검사하고 싶은 값을 넣어준다.
deps에 검사하고 싶은 값을 넣으면 해당 값이 변경될 때만 function이 실행된다. 따라서 deps에 값을 넣으면 불필요한 호출을 방지해서 성능 최적화를 할 수 있다. deps에 여러 개의 값이 있다면 하나만 달라져도 function이 실행된다.

다음 코드에서 + 버튼을 클릭하면 count가 업데이트 되면서 function이 실행되지만, bool 버튼을 클릭하면 count가 변경되지 않기 때문에 function이 실행되지 않는다.

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

const App = () => {
  const [count, setCount] = useState(0)
  const [bool, setBool] = useState(false)

  useEffect(() => {
    console.log('updated')
  }, [count])

  const addCount = () => {
    setCount(count + 1)
  }

  const changeBool = () => {
    setBool(!bool)
  }

  return (
    <div>
      <h1>count: {count}</h1>
      <h1>bool: {bool.toString()}</h1>
      <button onClick={() => addCount()}>+</button>
      <button onClick={() => changeBool()}>bool</button>
    </div>
  )
}

export default App

컴포넌트가 업데이트 되었을 때

컴포넌트가 언마운트 되었을 때

컴포넌트가 언마운트 되었을 때 특정 작업을 수행하고 싶은 경우, cleanup 함수를 반환한다. cleanup 함수는 뒷정리 함수라고도 한다.

다음 코드에서 remove 버튼을 클릭해서 UserList 컴포넌트를 삭제하면 cleanup 함수가 실행된다.

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

const UserList = ({ id, firstName, handleRemove }) => {
  useEffect(() => {
    return () => console.log('cleanup')
  }, [])

  return (
    <li>
      <span>{firstName}</span>
      <button onClick={() => {handleRemove(id)}}>
        remove
      </button>
    </li>
  )
}

const App = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetch('https://reqres.in/api/users?page=2')
      .then((res) => res.json())
      .then((res) => setUsers(res.data))
  }, [])

  const handleRemove = (id) => {
    const newUsers = users.filter((user) => user.id !== id)
    setUsers(newUsers)
  }

  return (
    <div>
      <ul>
        {users.map((user) => {
          const { id, first_name } = user
          return (
            <UserList
              key={id}
              id={id}
              firstName={first_name}
              handleRemove={handleRemove}
            />
          )
        })}
      </ul>
    </div>
  )
}

export default App

컴포넌트가 언마운트 되었을 때