[React]컴포넌트의 Lifecycle Hook
컴포넌트에는 생명 주기(Lifecycle)가 있다. 컴포넌트가 생성, 소멸, 업데이트(재렌더링)되는 것을 말한다. 이러한 라이프 사이클 중간에 간섭할 수 있는 것이 바로 라이프 사이클 훅(Hook)이다.
클래스형 컴포넌트의 라이프사이클 훅
class Detail extends React.Component{
componentDidMount(){
// 컴포넌트가 생성 되었을 때 실행시킬 코드
}
compoentWillUnmout(){
// 컴포넌트가 소멸되기 직전에 실행시킬 코드
}
}함수형 컴포넌트의 라이프사이클 훅
import React, { useEffect } from "react";useEffect를 자동완성하면 자동으로 라이브러리가 import 된다.
function Detail(props){
// useEffect 적은 순서대로 작동
useEffect(function(){
// 컴포넌트가 생성될 때, 컴포넌트가 업데이트 될 때 실행시킬 코드
return function 함수명(){
// 컴포넌트가 소멸될 때 실행시킬 코드
}
});
// 화살표 함수의 경우
useEffect(()=>{
// 컴포넌트가 생성될 때, 컴포넌트가 업데이트 될 때 실행시킬 코드
return ()=>{
// 컴포넌트가 소멸될 때 실행시킬 코드
}
},[조건]);
)
}useEffect 예제
상세페이지에서 알림창이 2초후에 사라지게 만들기
function Detail(props){
let [alert, alert변경] = useState(true);
...
useEffect(()=>{
let 타이머 = setTimeout(()=>{
alert변경(false)
console.log("안녕")
return ()=>{clearTimeout(타이머)}
},2000)
},[]);
...function Detail(props){
...
useEffect(()=>{
let 타이머 = setTimeout(()=>{
alert변경(false)
console.log("안녕")
return ()=>{clearTimeout(타이머)}
},2000)
},[alert]);
...clearTimeout : setTimeout이 작동되기도 전에 페이지를 이동할 경우 버그가 생길 가능성이 있기 때문에 setTimeout을 해제시키는 코드를 작성하는 것이 좋다.
2000 : 2초 후에 코드를 작동시킨다.
[alert] : alert에 대해서만 작동시킨다. 리액트에서 다른 컴포넌트가 재렌더링 되면 반복적으로 실행되기 때문에 이러한 버그를 방지할 수 있다. ([] : 한번만 작동)
