구현하는 기능과 배우는 컨셉
✔ useEffect Hook
✔ Lifecycle & Hook
✔ 페이지 방문 2초 후 UI가 사라지게하기
✔ 컴포넌트가 사라질 때 코드를 실행하기
👉 useEffect Hook & Lifecycle Hook
◾ 컴포넌트는 생성이 될 수도 있고 삭제가 될 수 있고 관련된 state가 변경되면 재렌더링(업데이트)가 일어날 수도 있는데 이게 컴포넌트의 Lifecycle이라는 개념이다
◾ 컴포넌트의 등장전, 사라지기전, 업데이트 된 이후에 뭔가를 실행시키고 싶을때 useEffect를 사용한다
Lifecycle Hook
class Detail extends React.Component {
componentDidMount(){
//Detail 컴포넌트가 Mount 되고나서 실행할 코드
}
componentWillUnmount(){
//Detail 컴포넌트가 Unmount 되기전에 실행할 코드
}
}useEffect Hook - 컴포넌트가 사라질때 실행하고싶은경우
import React, {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
return function 함수(){ 실행할 코드 }
});
return (
<HTML ----/>
)
}◾ useEffect() 안에는 return이라는걸 넣을 수 있다
◾ 여기 넣은 함수는 컴포넌트가 사라질 때 실행된다
◾ 다른 곳에서 만들어 놓은 함수명을 입력해도 된다
useEffect Hook - 기능을 여러개 사용하고싶을 경우
import React, {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
//1번쨰 실행할 코드
});
useEffect(()=>{
//2번째 실행할 코드
});
return (
<HTML----/>
)
}Detail 페이지 방문후 2초후에 alert창 사라지게하기
function Detail(){
let [ alert, alertState ] = useState(true);
useEffect(()=>{
let timer = setTimeout(()=>{ alertState(false) }, 2000);
return ()=>{ clearTimeout(timer)}
},[]);
return (
<HTML----/>
{
alert === true
? (<div>
<p>재고가 얼마 남지 않았습니다</p>
</div>)
: null
}
)
}◾ alert의 기본값을 true로하고 (일단 보여줘야하니까) 2초후에 fasle가 되어 null이 되어 사라지게 하면된다.
◾ setTimeout함수를 이용해서 2초후 false가 되도록 alert를 변경해주면 된다
◾ 업데이트 될때(재랜더링될때) useEffect를 실행하면 낭비가된다
◾ 그래서 useEffect(함수,[])에 대괄호를 넣으면 더이상 랜더링이 될때마다 실행하지 않아도 된다고 인식해준다
◾ 대괄호안에 state를 넣으면 state가 변경이 될때만 업데이트가 되게 설정할 수있다.
◾ return 하여 timer를 해체해주는 clearTimeout까지 설정해준다
Front-end Developer