[TIL] useEffect란?

userEffect란?

useEffect() 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 이다 Lifecyclemethod의 클래스형 컴포넌트에서 componentDidMount, componentDidUpdate, componentWillUnmount를 합친 형태와 비슷하다고 생각하면 된다. useEffect() 는 기본적으로 렌더링 되고난 직후마다 실행되며, 두번째 파라미터 배열에 무엇을 넣느냐에 따라 실행되는 조건이 달라진다.

1. componentDidMount : 마운트되고 나서 한번만 실행되는 코드

두번째 인자에 빈 배열을 넣는다.

useEffect(() => {
  console.log('This is componentDidMount')
}, [])

2. componentDidUpdate : 특정값이 변경될 때마다 실행되는 코드

두번째 인자인 title이 변경될때마다 실행이 됩니다 **[ ]**추가 하지 않으면 렌더링 될때와 prop나 state 값이 변경될때마다 실행된다

useEffect(() => {
  console.log('This is componentDidUpdate')
}, [title])

3. componentWillUnmount : 컴포넌트가 떠날 때 실행되는 코드(다른페이지로 이동)

다른페이지로 이동할때 return에 있는 코드가 실행된다.

useEffect(() => {
  return console.log('This is componentWillUnmount')
}, [])

useState를 활용하여 useEffect를 사용해보자

const useTitle = initialTitle => {
  const [title, setTitle] = useState(initialTitle)
  const updateTitle = () => {
    const htmlTitle = document.querySelector('title')
    htmlTitle.innerHTML = title
  }
  useEffect(updateTitle, [title])
  return setTitle
}

useEffect(updateTitle, [title]) useState로 정해놓은 title이 변경될때 updateTitle을 실행시킨다

아래의 코드는 useEffect를 사용하여 Loading 에서 5초후 Home으로 변경되는 최종코드이다.

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

const useTitle = initialTitle => {
  const [title, setTitle] = useState(initialTitle)
  const updateTitle = () => {
    const htmlTitle = document.querySelector('title')
    htmlTitle.innerHTML = title
  }
  useEffect(updateTitle, [title])
  return setTitle
}

const App = () => {
  const titleUpdater = useTitle('Loading...')
  setTimeout(() => titleUpdater('Home'), 5000)
  return (
    <div clasName="App">
      <div>Hi</div>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(
  <App />,

  rootElement
)