TIL_46_230102

46일 차 회고

• useEffect()

강의참고

useEffect ()

라이프사이클

mount : 화면에 첫 렌더링
update: 다시 렌더링
unmount : 화면에서 사라질 때

• useEffect는 콜백함수를 인자로 받는다.

useEffect의 2가지 형태

1. 콜백함수만 인자로 받는 형태
   1. 렌더링 될때 마다 실행
2. 첫번째인자, 콜백함수, 두번째 인자 의존성배열(defendency array) 형태
   1. 화면에 첫 렌더링 될때 실행
   2. value 값이 바뀔때 실행
   3. 빈배열일 경우 → 화면에 첫 렌더링 될때 실행

// 1. 렌더링 될때 마다 실행된다.
useEffect(()=>{

})
//2. 화면에 첫 렌더링 될때 실행, value 값이 바뀔때 실행
useEffect(()=>{

},[value])

//2-3 화면에 첫 렌더링 될때 실행
useEffect(()=>{

},[])

clean up - 정리

화면에서 사라질 때 unmount 됐을때 끝난 함수를 정리해준다.

useEffect(()=>{

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

useEffect 예시

import React, {useState, useEffect} from 'react';

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

	const handleCountUpdate()= () =>{
		setCount(count + 1)
	}

	const handleInputChange = (e) =>{
		setName(e.target.value)
	}

	useEffect(()=>{
		console.log('렌더링') // 계속 렌더링 될때마다 나타남
	})	

	// 마운트 + [카운트] 변경될때만 실행
	useEffect(()=> {
		console.log('렌더링') // 카운트 변화 될때만 나타남
	},[count])

	// 마운트 + [네임] 변경될때만 실행
	useEffect(()=>{
		console.log('네임변화') // 네임 변화 될때만 나타남
	},[name])	

	// 첫렌더링 때만 시행
		useEffect(()=>{
			console.log('네임변화') // 마운트 됐을때만 
		},[])	

	return (
		<div>
			<button onClick={handleCountUpdate}>Update</button>
			<input type="text" value={name} onchange ={handleInputChange}/>
		</div>
	)
}

clean up 예시

//App.js
import React, {useState, useEffect} from 'react';
import Timer from './component/Timer'

function App(){
	const [showTimer, setShowTimer] = useState(false);

	return (
		<div>
			{showTimer && <Timer/>}
			<button onClick={()=>setShowTimer(!shoTimer)}>toggle Timer</button>
		</div>
	)
}

//Timer.js
import React, {useState, useEffect} from 'react';

function Timer(){
	
	//첫 화면일 때만 나타나기 
	useEffect(()=>{
		const timer = setInterver(()=>{
			console.log('타이머 돌아가기')
		},1000)
		

		//타이머를 종료 했을때
		return () => {
			clearInterval(Timer);
			console.log('타이머 종료')
		}

	},[])

	return (
		<div>
			<span>타이머 시작</span>
		</div>
	)
}