[React] useEffect()

🎤 mount, update시 코드 실행해주는 useEffect() 🎤 처음실행시, 업데이트시 코드 실행해주는 useEffect()

1. useEffect import 해오기

import { useEffect, useState } from "react";

2. useState 사용

let [count, setCount] = useState(0)

3. useEffect 사용

(아래에서 사용한 console.log 예시는 그냥 독립적인 거로 사용됨)

useEffect(()=>{
    console.log('안녕')
  })

4. 버튼을 누르면 숫자가 하나씩 증가하고, console 창에도 안녕이 한 번씩 증가한다

{count} -> 숫자가 증가
<button onClick={()=>{ setCount(count+1) }}>버튼</button>

Q. useEffect 바깥에 넣어도 똑같은데?

→ 들킴..

useEffect 쓰는 이유

🎤 useEffect 안에 있는 코드는 **html 렌더링 후**에 동작한다

→ html을 먼저 보여준 다음 어려운 코드를 그 다음에 실행하므로 html이 빨리 보인당!

useEffect 안에 적는 코드들은 주로 오래걸리는 작업, html보여주는 것 보다는 덜 중요한 것들

1. 어려운 연산
2. 서버에서 데이터 가져오는 작업
3. 타이머 장착하는거

⇒ HTML 보여주는 것보다는 덜 중요한 거라서 나중에 보여줘도 됨

Q. 왜 이름이 Effect 어쩌구임?

Side Effect : 함수의 핵심기능과 상관없는 부가기능

→ 여기서 따온 이름

→ useEffect에 들어갈 코드들은 side effect 코드 보관함이기 때문!

→ main 기능, 핵심기능, 랜더링기능이 아니라 부가기능

Q. Detail 페이지 방문 후 2초 지나면

숨기기

1. state변수, state변경함수, state초기값 설정 ⇒ true를 초기값으로 설정함

let [alert, setAlert] = useState(**true**)

1. useEffect안에 setTimeout 설정 ⇒ 보여주는게 true이므로 안보여주는건 false로 설정하면 됨

useEffect(()=>{
        setTimeout(()=>{setAlert(**false**)}, 2000)
    }, [])

1. 삼항연산자 사용해서 state변수가 true면 html 보여주고, false면 보여주지말자

{
        alert == true
        ? <div className="alert alert-warning">
            2초 이내 구매시 할인
          </div>
        : null 
      }

→ 삼항연산자 사용

useEffect 실행조건 넣을 수 있는 곳은 [ ]

dependency

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)
  }, **[]**)

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)
  }, **[count]**)

→ [count]가 없을 때는 이 컴포넌트가 mount, update될 때마다 이 코드가 실행된다.

→ 근데 이 때 [count] dependency를 추가하면 count라는 state가 변할 때만 코드가 실행된다!

→ 즉, 맨날 mount, update 될때마다 실행되지 않고, count state가 변할때만 코드가 실행됨

→ update될때는 실행안되는데 mount시(페이지 처음 로드)에는 실행되고, count라는 state가 변할 때 실행이 된다

편법인데 mount될때 1회만 실행할 때는 [ ] 처럼 dependency에 아무것도 넣지 말자

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)
  }, **[]**)

→ dependency가 없으면 update될 때는 실행 안되고, mount에만 실행됨

→ 재렌더링시켜도 안에 있는 코드가 실행되지 않음

→ 컴포넌트 mount시 1회만 실행하고 싶으면 이렇게 쓰자

→ 맨날 update될때마다 재실행이 안되니까 더 효율적이다!

return 추가 옵션 : clean up function

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)

	**return () => {
	코드~~~~~~
	}**  

}, **[]**)

→ useEffect 동작 전에 실행되는 return ()⇒{}

→ 이를 clean up function 이라고 함! (싹 치운다)

→ 예를 들어 setTimeout 같은걸 쓰면 재랜더링될 때마다 너무 자주 실행됨 그러면 return 문 안에다가 기존 타이머는 제거해주세요~ 라는 코드를 쓰면 비효율적인 코드 제거할 수 있음!

→ useEffect 안에 있는 코드가 실행되기 전에 실행됨!!

→ 보통 기존코드 치우는거 여기에 많이 작성함

정리하자면

1. mount, update시 매번 실행됨(dependency X)

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)
  }) 

2. mount시, [ ] 안의 count라는 state가 변할 때 실행됨(dependency O)

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)
  }, **[count]**)

3. mount시 1회만 실행(dependency 빈칸)

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) },2000)
  }, **[]**)

useEffect() 정리하면

1. 재렌더링마다 코드 실행하고 싶으면

useEffect(()=>{})

1. 컴포넌트가 로드될 때(mount 1회) 딱 1번 코드 실행하고 싶으면

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

1. unmount(삭제될때)시 1회 코드 실행하고 싶으면

useEffect(()=>{
	**return ()=>{
	}**
}, [ ])

→ 보통 제거할 때 return문 안에 (clean up function) 코드를 넣기 때문

→ useEffect에 있는 코드보다 먼저 딱 한 번 실행됨

1. useEffect 실행 전에 뭔가 실행하려면 언제나 return()⇒{} clean up function

useEffect(()=>{
	**return ()=>{
	}**
}, [ ])

1. 특정 state변경시에만 실행하려면 [state명]

useEffect(()=>{}, **[count]**)

Q. 에 숫자말고 다른거 입력하면 그러지말라고 안내메세지 띄우기

1. state변수, state변경함수, state초기값 설정

let [num, setNum] = useState('')

1. useEffect안에 조건문 작성

useEffect(()=>{
        if (**isNaN(num) == true**){
            alert("dont do that")
        }
    }, [num])

→ input에 입력한 값은 문자형태로 출력됨

→ 그러므로 숫자가 있는 문자인지 판별하려면 isNaN()을 써야함!!!

→ 만약 Not a Number이 true면 숫자가 아니라 문자라는 뜻이므로 alert창을 열어줌

→ isNaN(’abc’) : true

→ isNaN(’123’) : false

1. onChange를 사용하여 e.target.value를 받아와줌

<input onChange={(e)=>{setNum(e.target.value)}}/>