[React 일기장 프로젝트] useEffect로 Lifycycle 제어

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트

 

useEffect를 이용해 컴포넌트의 Lifecycle에 따른 함수 실행 구현하기 

1. React 컴포넌트의 Lifecycle
2. useEffect를 이용한 예외 처리
3. useEffect를 이용한 컴포넌트 조작

 

 

---

1. React 컴포넌트의 Lifecycle

1) Lifecycle 3가지

• 탄생 Mount : 컴포넌트가 화면에 나타나는 것
• 변화 Update/Re-rend : 컴포넌트가 변화하는 것
• 죽음 UnMount : 컴포넌트가 화변에서 사라짐

 

2) useEffect

- React Hooks : Class형 컴포넌트가 가지고 있는 기능 중 함수형 컴포넌트에서 사용할 수 있는 기능

- Class형 컴포넌트의 기능을 사용 + 함수형 컴포넌트에 비해 가지고 있던 단점 극복하는 효과

ex) useState, useRef, useEffect

 

- useEffect : Dependency Array(의존성 배열) 내에 있는 어떤 값이 변화하면 콜백함수가 수행

- useEffect로 컴포넌트의 Lifycycle에 따른 제어를 구현할 수 있다.

import React, { useEffect } from 'react';
useEffect(()=>{
	// 콜백함수
	}. [의존성 배열]);

 

 

3) Dependency Array(의존성 배열)에 따른 효과

• Dependency Array = [] : 컴포넌트가 Mount되는 순간에만 함수 실행
• Dependency Array 인자X : js 내 임의의 컴포넌트가 Update되는 모든 순간에 함수 실행
• Dependency Array = [컴포넌트1, 컴포넌트2, ,,,] : 해당 컴포넌트가 Update되는 순간에 함수 실행

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

const Lifecycle = ()=>{
    const [count, setCount] = useState(0);
    
    // Dependency Array = []
    useEffect(()=>{
        console.log("Mount!");
    }, []);

    // Dependency Array 인자가 없는 경우
    useEffect(()=>{
        console.log("Update!");
    });

	// Dependency Array = [특정 컴포넌트1, 컴포넌트2, ,,,]
    useEffect(()=>{
        console.log("Update count!");
        if(count>5){
            alert("count가 5를 넘어 초기화합니다.");
            setCount(0);
        }
    }, [count]);


    return (<div style={{padding: 20}}>
        <div> {count}
            <button onClick ={()=>setCount(count+1)}>+</button>
        </div>
    </div>
    );
};

export default Lifecycle;

 

 

 

 

2. useEffect를 이용한 예외 처리

- Dependency Array의 컴포넌트를 이용해 예외 처리

- 'count' 컴포넌트 값이 5를 초과하면 예외 발생 + 초기화

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

const Lifecycle = ()=>{

    const [count, setCount] = useState(0);
    
    useEffect(()=>{
        if(count>5){
            alert("count가 5를 넘어 초기화합니다.");
            setCount(0);
        }
    }, [count]);

    return (<div style={{padding: 20}}>
        <div> {count}
            <button onClick ={()=>setCount(count+1)}>+</button>
        </div>
    </div>
    );
};

export default Lifecycle;

 

 

 

3. useEffect를 이용한 컴포넌트 조작

- 단락회로 평가에 의해 isVisible이 false면 <UnMountTest/> 실행 X

→ "UnMountTesting Component" 텍스트가 나타나지 않음

- isVisible이 true이면 <UnMountTest/> 실행

→ "UnMountTesting Component" 텍스트가 나타남

 

- useEffect의 리턴은 컴포넌트가 UnMount되는 순간에 실행

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

const UnMountTest = ()=>{
    useEffect(()=>{
        console.log("Mount!");
        return ()=> {	// useEffect의 리턴
            console.log("UnMount!");
        };
    }, []);
    
    return (<div>
        UnMountTesting 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;