🔗 useEffect()

• side effect를 수행하기 위한 Hook
• state가 변하던, 무슨 일이 일어나던 이펙트함수가 의존성 배열의 값이 변함에 따라 실행될 수 있도록 보호해주는, 생명주기 함수와 동일한 기능을 해주는 Hook
• useEffect ( 함수 , 의존성 배열 )

useEffect(() => {
	컴포넌트가 마운트 된 이후
    - 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행된다.
    - 의존성 배열에 빈배열을 넣으면 마운트와 언마운트시에 딱 한번씩만 실행된다.
    - 의존성 배열 생략 시 컴포넌트 업데이트 때마다 실행된다.
    
    return() => {
    	컴포넌트가 마운트 해제되기 전에 실행된다.
    }
}, [ 의존성 변수1, 의존성 변수2, ... ]

console로 확인해보기

import { useEffect, useState } from "react"

export function Effect() {
  const [counter, setValue] = useState(0)
  const onClick = () => setValue(counter + 1)
  
  console.log("계속 찍힘")
  
  useEffect(() => {
    console.log("한번만 찍힘")
  }, [])
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click</button>
    </div>
  )
}

처음 렌더된 후 두개의 로그가 찍히고 이후 useEffect로 감싸진 함수는 더 이상 실행되지 않음을 확인할 수 있다.

의존성 배열 추가

import { useEffect, useState } from "react"

export function Effect() {
  const [keyword, setKeyword] = useState("")
  const onChange = (e) => setKeyword(e.target.value)

  useEffect(() => {
    console.log("검색 : ", keyword)
  }, [keyword])

  return (
    <div>
      <input 
      	value={keyword} 
        onChange={onChange} 
        type="text" 
        placeholder="검색" />
    </div>
  )
}

지저분 하니까 "mango"만 출력되도록 조건 추가 @@

  useEffect(() => {
    if (keyword !== "" && keyword.length > 4) {
      console.log("검색 : ", keyword)
    }
  }, [keyword])

import { useEffect, useState } from "react"

export function Effect() {
  const [counter, setValue] = useState(0)
  const [keyword, setKeyword] = useState("")
  const onClick = () => setValue(counter + 1)
  const onChange = (e) => setKeyword(e.target.value)

  useEffect(() => {
    if (keyword !== "" || counter !== 0) {
      console.log("카운터와 검색창이 변했을때만 찍힘")
    }
  }, [keyword, counter])
  
  return (
    <div>
      <input 
    	value={keyword} 
		onChange={onChange} 
		type="text" 
		placeholder="검색" />
      <h2>{counter}</h2>
      <button onClick={onClick}>click</button>
    </div>
  )
}