[React] 기본 / Life Cycle / Hooks

Life Cycle (생애주기)

인간 세계에서의 생애 주기란 시간의 흐름에 따라 변화해가는 개인 생애의 일정한 단계별 과정을 말한다. 기본적으로 역량의 변화 발전에 따라 영유아기, 아동기, 청소년기, 성인기, 노인기로 구분할 수 있다. 

이처럼, React Component 도 생애 주기 , Life Cycle 이 존재 한다.

 

React Component / Life Cycle

 

Class 기반 React Component 에서 생명 주기 에 따라 호출하는 함수가 존재 한다.

 

 

React Hooks

Class 기반 React Component 에서 사용하는 생명주기 함수의 기능을 함수형 React Component 에서 사용할 수 있도록 해주는 기능이다.

 

 

UseEffect

함수형 React Component 에서 Life Cycle을 제어하기 위해서 UseEffect 라는 Hooks 를 사용한다.

import React, {useEffect} from "react";

useEffect(()=>{
	//to do..
}, []);

 

첫번째 매개변수 : Callback 함수
두번째 매개변수 : Dependency Array(의존성 배열) : 배열내에 들어있는 값이 변화하면 Callback 함수 실행

UseEffect 를 사용하여 Component 제어

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

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

    //Mount
    //dependency array 가 빈 배열일 때
    useEffect(()=>{
        console.log('Mount');
    }, []);

    //Update
    //dependency array 를 전달하지 않을 때
    useEffect(()=>{
        console.log('Update');
    })

    //dependency array에 전달한 배열의 값이 변경되었을 때
    useEffect(()=>{
        console.log(`count is update : ${count}`);;
    }, [count]);

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

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

export default LifeCycle;

- mount
useEffect hooks 의 dependency array가 빈 배열일 때, 해당 component가 mount 될 때 callback 함수가 호출된다.
- update
useEffect hooks 의 dependency array에 값을 전달하지 않거나, dependency array에 전달한 배열의 값이 변경되었을 때 callback 함수가 호출된다.

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

const UnmountTest = () =>{

    useEffect(()=>{
        //Mount
        console.log("Mount");

        return () => {
            //Unmount
            console.log("Unmount");
        }
    }, []);

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

const LifeCycle = () => {
    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 LifeCycle;

- unmount
component의 useEffect hooks 에서 return 하는 함수는 해당 component가 unmount 될 때 호출된다.