Lifecycle
- Component Lifecycle
- Mount: 페이지에 장착, 즉 생성
- Update: 업데이트, 즉 재렌더링
- Unmount: 페이지에서 탈착, 즉 삭제 - component 가 생성, 업데이트, 삭제 되는 주기 중간에 특정 코드를 실행해줄 수 있는데 이를 lifecyle hook 이라고 한다
class lifecycle hook
class Detail1 extends React.Component {
componentDidMount() {
// Detail1 component가 마운트되고 나서 실행할 코드
}
componentDidUpdate() {
// Detail1 component가 업데이트되고 나서 실행할 코드
}
componentDidUnmount() {
// Detail1 component가 언마운트되기 전 실행할 코드
}
}- class component 작성 시에는 위와 같이 각 주기에 실행할 코드를 작성해줄 수 있다
function lifecycle hook
import { useEffect } from 'react';
function Detail2() {
useEffect( () => {
// component 마운트 & 업데이트 마다 실행할 코드
} )
return ()
}- useEffect 기능을 사용하면 component 마운트 & 업데이트마다 코드를 실행할 수 있다
- 하지만 마운트 & 업데이트 시에는 function component 안의 코드를 다시 읽어주기 때문에 useEffect 밖의 코드도 매번 실행이 된다
- 차이점은 function component 내의 html 렌더링이 끝난 후에 useEffect 내부 코드가 실행되어 빠르게 페이지 렌더링을 해줄 수 있다는 점이다
- (참고) 데이터를 받아오거나, 오래 걸리는 연산, 타이머 거는 작업 등 페이지 렌더링에 크게 연관되지 않는 오래 걸리는 코드는 useEffect 내에 사용해주면 좋다
import { useEffect } from 'react';
function Detail2() {
useEffect( () => {
setTimeout( () => {console.log('hi')}, 5000 )
} )
return ()
}- 타이머 사용은 useEffect 내에서 setTimeout( () => {실행코드}, 시간 )을 사용하면 되며, 시간은 ms 단위로 5000 > 5초 뒤 실행을 의미한다
useEffect trigger
import { useEffect } from 'react';
function Detail2() {
useEffect( () => {
console.log('hi')
}, [count] )
return ()
}- useEffect 의 두번째 변수로 변수나 state가 들어갈 수 있는데 이는 useEffect의 실행 트리거 역할을 해준다(변수나 state가 변할 때만 실행)
- [] 안에는 다수의 변수/state를 넣을 수도 있으며, []만 넣을 때는 마운트 시에만 실행하고 이후엔 실행되지 않게 된다
useEffect cleanup function
import { useEffect } from 'react';
function Detail2() {
useEffect( () => {
let a = setTimeout(() => {console.log('hi')}, 5000);
return () => {
clearTimeout(a);
}
} )
return ()
}- 다중 timer가 발생하는 버그를 방기하기 위해 timer cleanup을 해주고 싶을 때 위와 같이 useEffect(()=>{ return () => {clearTimeout}}) 을 작성해주면 되는데, useEffect에서 return () => {코드} 가 먼저 동작하기 때문에 가능하며, 이 부분을 cleanup function이라고 한다
- Timer를 cleanup 하기 위해서는 먼저 setTimeout 을 변수에 저장해주어야 한다
- (참고) cleanup function 에는 타이머 제거, socket 연결 요청 제거, ajax 요청 중단 등의 코드를 많이 작성한다
- (참고) component unmount 시에도 cleanup function 1회 동작한다
eunji yang