Lifecycle은 주로 리액트에서 생성한 컴포넌트에 사용하는 개념입니다.
컴포넌트 또한 인생이 있다라는 생각으로 가볍게 이해하시면 좋을거 같습니다.
컴포넌트 LifeCycle
컴포넌트 3가지 lifecycle개념을 가지고 있는데 다음과 같습니다
- 컴포넌트는 생성이 될 수도 있습니다(=mount)
- 재렌더링이 될 수도 있습니다(=update)
- 삭제가 될 수도 있습니다(=unmount)
이러한 컴포넌트의 lifecycle 개념을 익히는 이유는 컴포넌트의 중간중간 코드실행을 위해 필요한 개념입니다, 중간중간 코드실행하는 방식을 "간섭한다"라고 정의하겠습니다.
(ex. 컴포넌트가 장착이 될때, 또는 업데이트 될 때 특정 코드를 실행할 수 있음)
Lifecycle 중간 코드실행 방법
(ex)
hook을 이용한 Lifecycle 이용해보기
import {useState, useEffect} from 'react';
function Detail(){
useEffect(()=>{
//여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됩니다.
console.log('안녕')
});
return (생략)
}useEffectf를 상단에 먼저 import 시켜준 후 사용해줍니다,
콜백함수 console.log('안녕')를 추가하여 코드에 적으면 Detail 페이지 로드시 콘솔창에 안녕이 출력됩니다.
useEffect
useEffect 문법은 html 렌더링 이후에 동작하는 특징을 가지고 있습니다.
실행이 오래 걸리는 코드가 있다면 useEffect를 활용해서 렌더링 시간 감소를 할 수 있습니다.
function Detail(){
for(let i = 0 ; i < 1000000000000000000 ; i++) {
console.log(i)
}
return (생략)
}예를 들어 이런 코드가 있을시 useEffect를 활용해서
function Detail(){
useEffect(()=>{
for(let i = 0 ; i < 1000000000000000000 ; i++) {
console.log(i)
}
});
return (생략)
}이런 식으로 활용해서 웹페이지를 제작시 코드의 실행 시점을 조절해 html 렌더링을 빠르게 할 수 있습니다.
느리지만 깊게 개발을 공부합니다