리액트의 Life Cycle

Freesian·2023년 1월 15일
0

우리의 인생에도 생애주기가 있듯이,
리액트에도 생애주기(Life Cycle)가 있다.

리액트의 라이프 사이클은 크게 3가지로 나누어진다.

[생성] => [변화] => [사라짐]
[mount] => [update] =>[unMounst]

화면에 나타나는 시점을 mount라 하고,
state가 변화하여 리렌더링 되어 화면에 데이터들이 바뀌는 시점을 update 라고 하고,
화면에서 사라지는 시점을 unMount 라고 한다.

이러한 시점을 컨트롤 할 수 있는 hook이 있다.

useEffect

useEffect는 리액트의 라이프 사이클을 다룰수 있는 훅이다.

아래 코드는
useEffect의 생김새이다.

useEffect(() => {
// 콜백함수자리
},//이자리를 deps라고 함);

이 useEffect는 라이프 사이클마다의 모양이 조금씩다르다

  1. mount 될때

    useEffect(() => {
    console.log("렌더링 될때마다 매번 실행");
    });
    useEffect(() => {
    console.log("맨 처음 렌더링될 때 딱 한 번만 실행");
    },[]);

  1. update 될때

    useEffect(() => {
    console.log(user);
    console.log("name이라는 값이 업데이트 될 때만 실행");
    },[user]);
    user값이 변경될때마다 useEffect 발동 됨,
    하지만 컴포넌트가 마운트 될때 마다도 실행됨

2-2. 마운트 될때 말고 업데이트 될때만

const mounted = useRef(false); // 컴포넌트 참조 훅 설정
useEffect(() => {
if (!mounted.current) { // 첫 마운팅 되었을때
mounted.current = true;
} else {
console.log(name);
console.log("업데이트 될 때마다 실행");
}
}, [name]);

  1. 언마운트, 업데이트 직전에 언마운트

    useEffect(() => {
    return () => {
    console.log("cleanUp 함수"); // 언마운트 될때
    };
    });

profile
prompt('마라탕 몇 단계요?');

0개의 댓글