📖Lifecycle
- 컴포넌트는 생성/재렌더링/삭제 의 lifecycle을 가짐
- 생성 : mount
- 재렌더링 : update
- 삭제 : unmount
- 컴포넌트가 생성/제랜더링/삭제될 때마다 특정코드를 실행하는 기능을
useEffect()라는 hoock을 사용하여 구현 가능
📝Lifecycle 구현방법
✏️기존 Class 컴포넌트의 lifecycle 구현방법
class lifecycle extends React.Component {
componentDidMount(){
//컴포넌트가 로드되고나서 실행할 코드
}
componentDidUpdate(){
//컴포넌트가 업데이트 되고나서 실행할 코드
}
componentWillUnmount(){
//컴포넌트가 삭제되기 전에 실행할 코드
}
}✏️현재 Function 컴포넌트의 lifecycle 구현방법 (useEffect())
/*useEffect()라는 훅을 사용해서 lifecycle을 구현함*/
import {useEffect} from 'react';
function lifecycle(){
useEffect(()=>{
//컴포넌트 로드 & 업데이트 될 때마다 실행할 코드
//react의 html코드를 다 로드하고 나서 실행됨 (로드지연 방지)
}, [])
//[] : mount시 1회 실행, [변수명] : 변수명이 변경될 때마다 실행
return (
/*아래참고*/
)
}📝useEffect 사용방법
-
재렌더링마다 코드 실행
useEffect(()=>{ 실행할코드 }) -
mount시 1회 코드 실행
useEffect(()=>{ 실행할코드 }, []) -
mount시 1회, 변수/함수 변경 시 계속 실행
useEffect(()=>{
state사용 코드
}, [state명])- 컴포넌트 삭제 시 코드 실행
: 중복제거 함수 구현 시 자주 사용 (clean up function)
useEffect(()=>{
//코드실행순서 : 2
실행할코드 //변수,함수 쌓임 (ex. setTimeout())
return()=>{
//코드실행순서 : 1
useEffect안의 "실행할코드" 실행 전 실행할 코드
//쌓인 변수,함수 삭제 (ex. clearTimeout())
}
})❓useEffect() 사용하는 이유
useEfect()가 필요한 경우
- 오래걸리는 반복연산
- 서버에서 데이터 가져오기
- 타이머 기능 구현 등
(신속성 및 정확한 시간측정이 필요한 기능들)
👉🏻 BUT, 이러한 기능들이 컴포넌트가 로드 &업데이트 될 때마다 실행되면
함수/변수 등이 너무 많이 쌓여버리므로 삭제해줄 필요가 있음!
clean up function
- clean up function
: useEffect() 내 함수/변수이 로드&업데이트 마다 동작하여 수백-수천개 쌓일 것을 대비하여 사용 - 필요한 경우 (예)
: 2초마다 동작하는 타이머가 있으면 useEffect()내에서 여러 번 실행되어
여러 개 쌓여버릴 때가 있는데, 이런 기존 타이머를 제거해줌
useEffect()의 return() 안에 clean up function을 주로 사용함
ex) clearTimeout();📜예제
📌예제1 : 랜더링 2초 후 없어지는 창
import {useState, useEffect} from 'react';
function lifecycle(){
(중략)
let [time, setTime] = useState(true);
/*lifecycle 함수 구현 부분*/
useEffect(()=>{
//2초후 setTime(false)가 실행되는 함수를 timer 변수에 대입
let timer = setTimeout(()=>{ setTime(false) }, 2000)
return()=>{
//페이지가 랜더링 될 때마다 중첩되는것을 방지하기 위해 setTimeout()함수를 제거
clearTimeout(timer);
}
}, []) //랜더링 후 최초 1회만 실행
/*react로 보여질 부분*/
return (
{
time == true ?
<div>이 창은 2초 후 닫힙니다.</div>
: null
}
)
}📌예제2 : 입력값이 숫자가 아닌경우 경고창 띄우기
import {useState, useEffect} from 'react';
function lifecycle(){
let [num, setNum] = useState('');
/*lifecycle 함수 구현 부분*/
useEffect(()=>{
if (isNaN(num) == true){
alert('숫자만 입력하라니까!');
}
},[num]) //num이 변경될 때마다 실행
/*react로 보여질 부분*/
return(
//input 창에 입력할 때마다 onChange안의 함수 실행
<input onChange=((e)=>{ setNum(e.target.value) }) />
)
}📚정리
-
lifecycle
: 컴포넌트는 생성/재렌더링/삭제 사이클을 가짐 -
useEffect()
: function 컴포넌트에서 로드&업데이트 시 실행되는 함수 -
useEffect() 사용하기 좋은 예
: mount시 1회 코드 실행 👉🏻 useEffect()
: 컴포넌트 삭제 시 코드 실행 👉🏻 useEffect()의 return()
: clean up function 👉🏻 useEffect()의 return()
: 1회 실행 + 변수/함수 변경될 때마다 실행 👉🏻 useEffect()의 [변수/함수]
keynene