[코드캠프 4주차]State LifeCycle
[컴포넌트 생명주기]
쉽게 생명주기를 생각했을떄
1.render(그리기)
2.componentDidMount(그리고 난뒤)
3.componentDidUpdate(그리고 난 뒤 변경됬때)
4.componentWillUnmount(그리고 난뒤 사라질때)
이렇게 총 크게 4가지로 구분이 된다.
가장먼저 화면에 렌더가 진행되고,componentDidMount 에서 최초 1회 실행을 해주며,componentDidUpdate 에서 상태값이 변경되고 화면에 리렌더링이 될때마다 실행된다.
마지막에 componentWillUnmount는 컴포넌트가 종료될때 실행한다.
즉 리액트는 컴포넌트의 생명주기가 그리고 생성한 후 업데이트를 마친후 사라진다.
import { Component, createRef } from "react";
import Router from "next/router";
interface IPrev {
count: number;
}
export default class index extends Component {
inputRef = createRef<HTMLInputElement>();
state = {
count: 0,
};
// 화면이 render 되고 나서 딱 한번 실행되는 함수
componentDidMount() {
console.log("마운트됌");
this.inputRef.current?.focus();
}
// 상태값이 바뀌면서 리렌더링이 될때 계속 그려짐
componentDidUpdate() {
console.log("수정되고 다시 그려짐");
}
//컴포넌트 종료
componentWillUnmount() {
console.log("컴포넌트 사라짐!");
}
onClickMove = () => {
Router.push("/");
};
onClickCounter = () => {
this.setState((prev: IPrev) => ({
count: prev.count + 1,
}));
};
render() {
return (
<div>
<input type="text" ref={this.inputRef}></input>
<div>현재 카운트는:{this.state.count}</div>
<button onClick={this.onClickCounter}> 카운트 올리기!</button>
<button onClick={this.onClickMove}>
나가기!!!!
</button>
</div>
);
}
}
그렇다면 함수형에서는 생명주기가 존재하지 않을까?? 존재한다. useEffect로 클래스 컴포넌트의 생명주기를 구현할 수 있다. useEffect에서 제일 마지막의 의존성 배열에 값을 넣어주고 안넣어주느냐에 따라서 다르게 동작이 될 수 있다.
즉 useEffect에 의존성 배열이 없다면 componentDidMount() 와 동일한 역할을 하고,
의존성 배열이 있다면 componentDidUpdate()와 동일한 역할을 한다. useEffect 안에 return 을 해주게 되면 componentWillUnmount() 와 동일한 역할을 한다.
따라서 함수형으로 코드를 변경하면...
import { useRef, useState, useEffect } from "react";
import { useRouter } from "next/router";
export default function index() {
const [count, setCount] = useState(0);
const inputRef = useRef<HTMLInputElement>(null);
const Router = useRouter();
useEffect(() => {
console.log("수정되고 다시 그려짐");
}, [count]);
// DidMount와 WillUnmount를 합치기
useEffect(() => {
console.log("마운트됌");
inputRef.current?.focus();
return () => {
console.log("컴포넌트 사라짐");
};
}, []);
const onClickMove = () => {
Router.push("/");
};
const onClickCounter = () => {
setCount((count) => count + 1);
};
return (
<div>
<input type="text" ref={inputRef}></input>
<div>현재 카운트는:{count}</div>
<button onClick={onClickCounter}> 카운트 올리기!</button>
<button onClick={onClickMove}>
나가기!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</button>
</div>
);
}
Author And Source
이 문제에 관하여([코드캠프 4주차]State LifeCycle), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alsqjarlwkd/State-LifeCycle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)