Component-Lifecycle
LifeCycle
컴포넌트들은 모두 각자의 라이프 사이클을 가지고 있으며, 이 각각의 라이프 사이클에 대해 원하는 동작을 써 넣을 수 있다.
컴포넌트의 수명을 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질때 끝이난다.
ClassComponent-Lifecycle(클래스형 컴포넌트 생명 주기)
클래스형 컴포넌트일때 라이프 사이클을 조작할 수 있는 내장함수를 리액트에서 제공해준다.
render( ) : 화면을 그려준다.
componentDidMount( ) : 화면이 그려지고 뒤에 실행이 된다.
componentDidUpdate( ) : 화면이 그려지고 화면안에 어떠한 변경이 있을때 실행이 된다.
componentWillUnmount( ) : 컴포넌트가 사라질때 실행이 된다.
위에 내장함수를 코드로 작성할때 방법이다.
import { Component } from "react";
import Router from "next/router";
export default class CounterPage extends Component {
componentDidMount() {
console.log("!!!마운트!!!");
this.inputRef.current?.focus();
}
render() {
<div>렌더</div>
}
}
위는 componentDidMount를 코드로 작성 했을때 이다.
특징으로는 렌더되고 나서 딱 한번만 실행이 된다.
화면에 새로 들어올때마다 사진을 보여주거나, input창에 포커스를 들어오게 하는 경우에 사용할 수 있다.
import { Component } from "react";
import Router from "next/router";
export default class CounterPage extends Component {
componentDidUpdate() {
console.log("수정되고 다시그려짐!!!!");
}
render() {
<div>렌더</div>
}
}
componentDidUpdate의 코드 작성이다.
이 내장함수는 렌더가 될때마다 즉 화면에 어떠한 값이 변할때마다 작동한다.
하지만 처음 렌더가 될 때에는 실행이 되지 않는다.
import { Component } from "react";
import Router from "next/router";
export default class CounterPage extends Component {
componentWillUnmount() {
console.log("컴포넌트 사라짐!!!!!!!");
}
render() {
<div>렌더</div>
}
}
componentWillUnmount의 코드 작성이다.
componentWillUnmount는 컴포넌트가 사라지고 나서 실행이 된다.
만약 어떠한 컴포넌트가 API요청을 지속적으로 할 때 만약 이 컴포넌트를 나가기 버튼 이외에 방법으로 나간다면 그 컴포넌트는 지속적으로 API를 요청을 하게 될 것이다.
그런 불필요한 데이터 낭비를 막을때 사용할 수 있다.
즉 나가기 버튼말고 다른 방법으로 나갔다면 컴포넌트가 사라졌기에 API 요청 같은것도 같이 끝낼줄수 있게 되는것 이다.
FunctionComponent-Lifecycle(함수형 컴포넌트 생명 주기)
함수형 컴포넌트일때에는 클래스형과는 많이 다르다.
리액트에서 제공해주는 훅스인 useEffect를 사용한다.
useEffect에 대한 자세한 내용은 다음에 포스팅하고 오늘은 사용법만 간단하게 알아볼것 이다.
import { useEffect } from "react";
export default function CounterPage() {
useEffect(() => {
console.log("마운트됨!!");
inputRef.current?.focus();
}, []);
return (
<div>렌더</div>
);
}
위 코드는 클래스형 컴포넌트의 didmount와 완전히 똑같은 동작을 하는 코드이다.
제일 처음 실행이 된다.
import { useEffect } from "react";
export default function CounterPage() {
// 1
useEffect(() => {
console.log("수정되고 다시 그려짐");
});
// 2
useEffect(() => {
console.log("수정되고 다시 그려짐");
}[any]);
return (
<div>렌더</div>
);
}
위 코드는 클래스형 컴포넌트의 didupdate와 똑같은 동작을 하는데 하나 다른점으로는 제일 처음 실행이 된다는 점이다.
그 이외에는 완전히 똑같이 동작한다.
추가로 두 번째로 작성된 useEffect에는 뒤에 배열이 들어가는데 이는 의존성 배열이라 하고 안에 어떠한 변수를 담으면 그 변수가 바뀔때마다 렌더를 하게 해준다.
아무것도 넣지 않으면 didmount 처럼 한 번만 실행이 된다.
didupdate로 사용하고 싶다면 의존성 배열을 빈값도 아닌 작성을 하지 않으면 된다.
import { useEffect } from "react";
export default function CounterPage() {
useEffect(() => {
return () => {
console.log("컴포넌트 사라짐!!!!!!!");
};
}, []);
return (
<div>렌더</div>
);
}
위는 클래스형 컴포넌트의 willunmount와 완전히 똑같이 작동한다.
사용하는 경우 또한 똑같다.
useEffect에 자세한 내용은 따로 포스팅을 할 것 이다.
Author And Source
이 문제에 관하여(Component-Lifecycle), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@uiop5487/Component-Lifecycle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)