useEffect

• 랜더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅
  • console, alert를 띄워야 할 때 사용
• 컴포넌트가 화면에 보여졌을 때
• 컴포넌트가 화면에서 사라졌을 때(return)

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


function App() {
  const [value, setValue] = useState('')

  useEffect(() => {
    console.log('hello useEffect')
  });
  
  return (
    <div>
      <input
        type='text'
        value={value}
        onChange={(event) => {
          setValue(event.target.value)
        }} />
    </div>
  )
}

export default App

1. input에 값을 입력
2. value, 즉 state가 변경
3. state가 바뀌었기 때문에 App컴포넌트가 리렌더링
4. 리렌더링 -> useEffect()
5. 1 ~ 4 반복