[React] 라이프사이클 제어하기

Lifecycle = 생애주기

소프트웨어 생애주기란? 

시간의 흐름에 따라 프로그램이 실행되고 종료되는 순간에 따른 단계적인 과정

 

 

 

 

리액트 컴포넌트의 생애 주기(생명 주기)

Mount : 화면에 나타나는 것

Update : 리랜더, state가 바뀌거나 부모가 리랜더되거나, prop이 바뀌어 자신이 리랜더 되는 것

UnMount : 화면에서 사라짐

 

 

 

 

 

리액트 생애주기 메서드

리액트는 생애주기별 메서드를 가지고있다.

ComponentDidMount : 화면 출력

ComponentDidUpdate : 화면 업데이트

ComponentWillUnmount : 화면 사라지기

다만 

클래스형 컴포넌트에서만 사용가능하다.

 

그러나 우리는 화살표 함수를 이용한 화살표형 컴포넌트만 쓰고있었어서 class형 컴포넌트대신

forking 해서 state같은 기능으로 쓰고있었다

 

왜냐하면 class형 컴포넌트는 같은 기능을 제작하는데에 많은 코드를 작성해야하고 중복코드를 많이 써야한다는 단점이 존재한다. ==> 가독성문제

React Hooks

함수형 컴포넌트는 2019.06 정식 출시된 기능

함수형 컴포넌트에서 클래스 컴포넌트를 hook 해서 가져오는 것

우리가 써본건 지금 useState, useRef

그리고 오늘 쓸 useEffect는

useEffect

리액트 라이프사이클 메서드를 가져오는 메서드

 

두개의 파라미터를 전달하며 첫번째 파라미터는 콜백함수, 두번째 파라미터는 depth; Dependency Array(의존성배열)가 있다

 

두번째 파라미터의 값중 하나라도 변화하면 콜백함수가 다시 수행된다.

두번째  파라미터 배열에 자꾸 변화하는 값을 넣어두면 변화할 때마다 수행됨

 

 

 

 

 

import React, { useEffect, useState } from "react";

const lifecycle = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    return
    <div style={{ padding: 20 }}>
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
        <div>
            <input value={text} onChange={((e) => setText(e.target.value))} />
        </div>
    </div>;
};

export default lifecycle;

 

Lifecycle 자스파일을 생성한 후 디비전을 리턴하는 lifecycle 함수를 만들어준다

 

lifecycle 컴포넌트를 App 컴포넌트에서 랜더

import Lifecycle from './Lifecycle';

 

 

그러면 화면에 잘 나오는 것을 볼 수 있다.

 

이제 이걸 토대로 라이프사이클을 적용시켜보자

 

 

 

 

 

 

 

---

 

Mount

    useEffect(() => {
        console.log("Mount!")
    }, [])

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Update ; state를 변경시키는 순간

    useEffect(() => {
        console.log("Update!")
    });

useEffect하고 dependency array를 안넣으면 update

버튼을 누르거나, input에 텍스트를 넣으면 update가 뜬다

 

    useEffect(() => {
        console.log(`count is update : ${count}`);
    }, [count]);

뒤에 count를 넣어주면 count가 변화하는순간(버튼클릭) 콜백함수가 작동하게된다.

감지하고싶은 값을 넣을 수 있다.

 

 

    useEffect(() => {
        console.log(`count is update : ${count}`);
        if (count > 5) {
            alert("count가 5를 넘었습니다 따라서 1로 초기화합니다");
            setCount(1);
        }
    }, [count]);

이런식으로 응용도 가능하다.

 

 

 

 

 

 

 

 

 

 

 

UnMount

import React, { useEffect, useState } from "react";

const UnmountTest = () => {

    useEffect(() => {
        console.log("Mount!")

        return () => {
            // Unmount 시점에 실행
            console.log("Unmount!")
        }
    }, []);

    return <div>Unmount Testing Component</div>
}

const Lifecycle2 = () => {

    const [isVisible, setIsVisible] = useState(false);
    const toggle = () => setIsVisible(!isVisible);

    return (
        <div style={{ padding: 20 }}>
            <button onClick={toggle}>ON/OFF</button>
            {isVisible && <UnmountTest />}
        </div>
    );
};

export default Lifecycle2;

isVisible true >> UnmountTest값을 확인해서 반환해서 화면에 랜더링

isVisible false >> 단락회로평가에 의해서 isVisible 실행 (UnmountTest 랜더링 안됨)

 

 

useEffect함수 콜백부분은 Mount, return 함수는 Unmount

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고: 

- 한 입 크기로 잘라먹는 리액트