useEffect 사용조건 총정리

useEffect(()=>{실행할 코드},[count])

useEffect 의 첫째 파라미터로는 실행할 코드를 넣어주고, 

                      둘째 파라미터로는 [](배열)을 넣을 수 있는데, []안에 변수나 state 같은 것들을 넣을 수 있습니다

이런 경우에는 [] 에 있는 변수나 state 가 변할 때만, useEffect 안의 코드를 실행해줍니다

위의 코드는 count 라는 변수가 변할때만, useEffect 안의 코드를 실행되겠군요.

 

 

useEffect(()=>{실행할 코드},[])

만약두번째 파라미터에 빈 배열을 넣어준다면,

처음 렌더링 시 1회 실행하고 영영 실행해주지 않습니다. 

처음에 딱 한번만 실행해줍니다

 

 

 

clean up function

useEffect를 동작하기 전에 특정 코드를 실행하고 싶으면

return () =>{} 안에 넣을 수 있습니다

 

useEffect(()=>{
그 다음 실행됨
return()=>{
 여기있는데 먼저실행됨
}
},[count])

마치 복잡한 숙제를 할때 책상을 정리하고 하면 잘되는 것처럼

useEffect 안에 있는 코드를 실행할 때도 싹 치우고 깔끔한 마음으로 실행하는 게 좋을 때도 있습니다

 

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

return()=>{} 쓰기전에는 타이머가 컴포넌트가 생길때마다 실행됩니다.

코드를 잘못짜면 타이머가 100개 생길수도\

하지만, 위의 코드처럼 기존 타이머를 싹 제거해주고, 새로 타이머를 만들어주면 

더 안전한 코드가 됩니다

 

(참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성합니다.

(참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행됩니다.

 

 

 

useEffect 사용조건 총정리

useEffect(()=>{ 실행할 코드 })

1. 재렌더링 될때마다 코드를 실행합니다

참고로, 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 함

 

useEffect(()=>{ 실행할 코드 },[])

2. 처음 렌더링시 딱 1회만 실행가능합니다.

 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

3. useEffect 안의 코드 실행전에 항상 실행됩니다

 

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
},[])

4.이러면 컴포넌트 unmount(삭제될때)시 1회 실행됩니다.

 

 

useEffect(()=>{ 
  실행할코드
}, [state1])

5.이러면 state1이 변경될 때만 실행됩니다

 

 

 

추가문제

오늘의 숙제 : 

<input> 하나 만들고 거기에 유저가 숫자 말고 다른걸 입력하면

"그러지마세요"라는 안내메세지를 출력해봅시다.

굳이 그럴 필요는 없겠지만 오늘 배운 useEffect 써보는게 어떨까요.

(팁) 모르는건 검색해봐야합니다.

 

 

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

입력창을 하나 만들어서, onChange 할때 입력값이 전송될 수 있도록

state 변경함수에 담아줍니다

 

그리고 return 위에 useEffect를 쓸겁니다

let [alert2, setAlert2] = useState(true)
let [input,setInput]= useState('')

useEffect(()=>{ 
    if(isNaN(input)===true){
    alert('경고: 숫자로 입력하세요')
    }
  }, [input])

만약 input이 숫자가 아니면, 경고창을 띄우도록 했습니다

useEffect의 두번째 배열에 [state]를 써주어서 input 값이 변경될때마다 

경고창이 뜨도록 작성했습니다.

 

어떤 상태가 변할때마다 혼자서만 계속 변하는 효과를 원한다면 (로드를 여러번 X)

useEffect가 딱이겟네용