- 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다. 이것은 특정 시점에 코드가 실행되도록 설정할 수 있다는 말과 같다.
- 함수형 컴포넌트에서의 생명주기관련 훅으로는
useEffect
가 있다.
import Router from "next/router";
import { Component } from "react";
export default class MyComponent extends Component {
state = {
count: 0,
};
componentDidMount() {
// 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수
console.log("컴포넌트가 마운트됐습니다~");
}
componentDidUpdate() {
// 컴포넌트 업데이트 작업이 끝나고 리렌더링 후에 호출되는 함수
console.log("컴포넌트가 변경됐습니다~");
}
componentWillUnmount() {
// 해당 컴포넌트가 제거되기 직전에 호출되는 함수
alert("컴포넌트가 제거됩니다~");
}
onClickButton = () => {
this.setState((prev: { count: number }) => ({ count: prev.count + 1 }));
};
onClickMove = () => {
Router.push("/")
}
render() {
console.log("마운트 시작");
return (
<>
<div>카운트: {this.state.count}</div>
<button onClick={this.onClickCounter}>카운트(+1)</button>
<button onClick={this.onClickMove}>이동하기</button>
</>
);
}
}
** 마운트란?
어떠한 것을 available한 상태로 준비하는 것을 말하는 것으로 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다.
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
export default function MyComponent() {
const [count, setCount] = useState(0);
const router = useRouter();
useEffect(() => {
console.log("컴포넌트가 마운트됐습니다~");
}, []);
// 의존성배열 []에 아무것도 넣지 않으면 마운트시에만 렌더해주고 끝난다(최초 1번만 실행)
useEffect(() => {
console.log("컴포넌트가 변경됐습니다~");
}, [count]);
// count가 수정될때만 리렌더된다
useEffect(() => {
console.log("컴포넌트가 변경됐습니다~");
});
// 의존성배열 자체가 없으면 어떠한 값이든 변경될 때마다 다시 리렌더된다
useEffect(() => {
console.log("컴포넌트가 마운트됐습니다~");
return () => {
alert("컴포넌트가 제거됩니다~");
//위의 함수가 반환되면서 아래 함수가 실행되어 페이지를 벗어나게된다
};
}, []);
const onClickButton = () => {
setCount((prev) => prev + 1);
};
const onClickMove = () => {
router.push("/");
};
console.log("마운트 시작");
return (
<>
<div>카운트: {count}</div>
<button onClick={onClickButton}>카운트(+1)</button>
<button onClick={onClickMove}>이동하기</button>
</>
);
}