useEffect hook

mount, update, unmount 할 때 사용하는 react hook

그래서 얘는 왜쓴다고?

원래대로라면 빙글빙글돌아가는 멧돌~~~~~~커다란돌멩이는 짱돌~~~~~~~~ 

수도 없이 다시 리로드 되는데 이렇게되면 리로드 되지 않길 바라는 함수도 리로드 될 수 있기 때문에 그걸 막아주기 위해서 유즈이펙트로  막아준다.

채팅 서버에 연결한다던가 등 컴포넌트가 마운트되면서 처음 1회만 수행되어야 하는 동작이 필요할 때 useEffect를 사용할 수 있으며 컴포넌트가 마운트될 때 뿐만 아니라 원하는 값이 변경될 때도 이펙트를 호출할 수도 있다.

useEffect를 통해서 특정 코드들이 component가 처음 생성될때만 실행되게 바꿀 수 있는 것을 볼 수 있다.

 

 

useEffect  콜백함수 사용

useEffect(()=> {
//작업
})

랜더링 될때마다 실행

useEffect (() => {
//작업...
},[value]);

맨처음과 value값이 바뀔떄 실행

useEffect (() => {
//작업...
},[]);

맨처음에만 실행

이 세가지 함수 사용

 

useEffect로 함수를 진행했다면 그걸 멈춰주는 clean up 즉 정리가 필요한데 그 함수 안에서 리턴하면 해당컴포넌트가 언마운트 될 때 혹은 다음 랜더링시 불릴 useEffect가 실행이 되기 이전에 실행된다.

useEffect (() => {
//구독..
 return() => {
  //구독해지 함수
 }
},[value]);

import './App.css';
import {useState,useEffect} from 'react';

function App() {
  const [count,setCount]  = useState(1);
  const [name, setName] = useState('')

  const handleCount = () => {
    setCount(count +1)
  }
  const handleInput = (e) =>{
    setName(e.target.value)
  }
  // 마운팅 + 랜더링 될 때마다 매번 실행됨
  // 특정 상황에서만 랜더링 되게 하려면 뒤에 [dependency array]넣어줘서 여기의 경우 count의 값이 변화 되었을 때만 랜더링이 일어남
  //만약 마운팅 될때만 유즈이펙트가 실행되게 하려면 디펜던시어레이 지우면됨
useEffect(()=>{
  console.log('카운트 변화');
},[count])

  return (
    <div>
      <button onClick={handleCount}>Update</button>
      <span>count : {count}</span>
      
      <input type="text" value={name} onChange={handleInput}/>
      <span>name : {name}</span>
    </div>
  )
}

export default App;

 

클리어하기 :타이머 종료하기

  App.js

import './App.css';
import {useState,useEffect} from 'react';
import Timer from './Timer';

function App() {
  const [showTimer , setShowTimer] = useState(false)
//showTimer가 트루일때만 타이머를 보여주고싶어. 
//온클릭 누르면 showTimer가 true false 번갈아가면서 바뀜
//showTimer가 true일때만타이머를 보여준다...showTimer &&<Timer/>,,&& 두 연산자가 모두 참일때 true를 
// 반환 여기서는 <Timer>은항상 트루일테니 쇼타이머가 트루면 <Timer>가 나온다
  return (
    <div>
      {showTimer &&<Timer/>}   
      <button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  )
}

export default App;

Timer.js

import './App.css';
import {useState,useEffect} from 'react';

function Timer(props) {
  
useEffect(()=>{
  const timer = setInterval(()=>{
    console.log('타이머 돌아가느중...');
},1000);

return () =>{
  clearInterval(timer)
  console.log('타이머가 종료되었습니다!')
  //리턴은 타이머컴포넌트가 언마운트 될 때 실행됨 이렇게 해야 멈추어
}
},[])
//뒤에 빈 배열 넣어줌으로서 마운팅 될때만 실행하게 해줌
    
  return (
    <div>
      <span>타이머를 시작합니다. 콘솔을 보세요!</span>
    </div>
  )
}

export default Timer;