useEffect

What is useEffect?

리액트에 lifeCycle이 있다. useEffect 는 componentDidMount, componentDidupdate 을 합친것이라고 생각하면 된다.
clean으로 componentDidUnMount 도 가능한걸로 안다..

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


const Info = () => {
 
  const [name, setName] = useState("")
  const [nickname, setNickname] = useState("")

  const userName = (e) => {
    setName(e.target.value)
  }
  const userNickname = (e) => {
    setNickname(e.target.value)
  }

  useEffect(() => {
    console.log("typing")
    return () => {
      console.log("clean")
    }
  }, [name])

  return (
    <div>
      <div>
        <input value={name} onChange={userName} placeholder="Name" />
        <input value={nickname} onChange={userNickname} placeholder="Nickname" />
      </div>
      <div>
        <li>
          <strong>name:</strong>
          {name}
        </li>
        <li>
          <strong>nickname:</strong>
          {nickname}
        </li>
      </div>
    </div>
  )
}

export default Info

위에꺼는 아주 심플 한 예시로 input 창에 값을 입력하면 console.log에 typing, clean (실행중, 실행끝) 이 나오는 것이다.

LifeCycle을 관리 해야 할때 사용 하는것이기 때문에 API 호출 시 많이 사용하고, 매번 실행할때마다 render 할필요 없다 싶을때 사용하면 좋다.