#6 EFFECTS

[6.0] Introduction

• 첫번째로 render할 때만 코드를 실행하고 싶을 때
  예) API를 통해 데이터를 가져올 때 상황
  1) 첫번째 component render에서 API를 call한다.
  2) state가 변화할 때, 그 API에서 데이터를 또 가져 올 필요가 없음.
  => 특정 코드가 첫번째 componen에서만 실행되게 하는지 알아야 함

[6.1] useEffect

import { useState, useEffect } from 'react'

• useEffect arguement
  1) 딱 한번만 실행하고 싶은 코드
  2) 마법같은 녀석
• useEffect에는 component가 처음 render할 때 실행되고, 다시는 실행 되지 않을 function을 넣을 것
• useEffect(iRunOnlyOnce, [])

  const [counter, setValue] = useState(0)
  const onClick = () => setValue((prev) => prev + 1)
  console.log('i run all the time')
  const iRunOnlyOnce = () => {
    console.log('i run only once')
  }
  useEffect(iRunOnlyOnce, [])
  return (

• 간단하게

  useEffect(() => {
    console.log('CALL THE API')
  }, [])

[6.2] Deps
1) 내 코드의 특정한 부분만이 변화했을 때, 원하는 코드들을 실행할 수 있는 방법
=> 즉, movie state가 변화할 때만, user가 원하는 영화를 검색
counter가 변화할 때는 실행할 필요 없음.

  useEffect(() => {
    console.log('SEARCH FOR', keyword)
  }, [keyword])

=> keyword가 변화할 때 코드를 실행하고 싶다면, []자리에 keyword라고 써주면 됨

2) useEffect(() => {},[])

• [] : 한번만
• [keyword] : keyword가 변화할 때마다

3) 조건문을 달수도 있음

 useEffect(() => {
    if (keyword !== '' && keyword.length > 5) {
      console.log('SEARCH FOR', keyword)
    }
  }, [keyword])

4) []내에 두가지를 단다면, or임 둘 중에 하나만 변화해도 코드 실행

  useEffect(() => {
    console.log("I run when 'keyword & counter' changes.")
  }, [keyword, counter])

[6.4] Cleanup
1) 함수 안에 []을 가진 useEffect를 가질 경우, 아예 다른 곳에서 클릭하고 생성, 삭제가 진행되기 때문에 단순히 한 번 생기는 것이 아닌, 선택했을 때마다 생성 사라짐을 반복
숨기는 것이 아닌 삭제!

function Hello() {
  useEffect(() => {
    console.log('Im Here!')
  }, [])
  return <h1>Hello</h1>
}

function App() {
  const [showing, setShowing] = useState(false)
  const onClick = () => setShowing((prev) => !prev)
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? 'Hide' : 'Show'}</button>
    </div>
  )
}

2) cleanup function

• component가 destory될 때, 실행되는 함수
  예) Component가 없어질때, 분석결과를 보내고 싶을 수 있음 => 분석 api 보낼것

function Hello() {
  useEffect(() => {
    console.log('created :) ')
    return () => console.log('destroyed :(')
  }, [])
  return <h1>Hello</h1>
}

3) function 먼저 지정 후 cleanup function 표현 형태

function Hello() {
  function ByeFn() {
    console.log('bye ;(')
  }
  function HiFn() {
    console.log('created :) ')
    return ByeFn
  }
  useEffect(HiFn, [])
  return <h1>Hello</h1>
}