React ) Lifecycle - React Hooks - useEffect

 

어떤 프로그램이 실행 되고 종료되는 과정을 나타내기 위해서 Life cycle 이란 단어를 사용하게 된다.

 

간단하게 탄생 - 변화 - 죽음으로 나타내서 보자. ( Component Mount - Update - UnMount )

리액트에서 제작하고 사용하는 컴포넌트의 탄생에서 state 나 props 가 바뀌게 되어 일어나는 Update 거쳐

컴포넌트가 화면에서 사라지는 죽음까지의 과정이다.

 

이런 컴포넌트의 생애 주기인 Lifecycle 을 제어한다는 것은 어떤 의미가 있을까?

 

컴포넌트의 Lifecycle 을 제어한다는 것은 엄청 어렵고 고난이도의 기술을 이야기 하는 것이 아닌 위와 같이

컴포넌트가 탄생하고 변화하고 사라져 죽는 순간에 각각 어떤 작업을 수행 시킬 수 있는 것을

Lifecycle을 제어한다고 표현할 수 있다.

 

컴포넌트 탄생시 초기화 작업을 시킨다거나 변화가 일어날 때 발생할 수 있는 예외에 대한 처리 작업을 수행하거나

컴포넌트가 사라질 때 사용하던 메모리를 반환하는 그런 것이다.

 

리액트를 포함해 소프트웨어를 더 견고하고 효율적으로 개발하기 위해서는

자신이 사용하는 기술의 Lifecycle을 이해하고 이용할 수 있어야한다.

 

리액트는 기본적으로 Lifecylce 마다  실행할 수 있는 메서드들을 가지고 있다.

ComponentDidMount 는 컴포넌트가 태어나는 ( mount ) 순간에 어떤 기능을 수행할 수 있는 메서드.

ComponentDidUpdate 는 컴포넌트가 변화하는 순간 사용할 수 있는 메서드.

ComponentWillUnmount 는 컴포넌트가 화면에서 사라지기 Unmount 되기 전에 호출해서 사용할 수 있는 메서드.

 

이런 메서드들은 class 형 컴포넌트에서 밖에 사용할 수 없다.

우리는 컴포넌트들을 화살표 함수를 통해 제작해왔는데 ( 함수형 컴포넌트 ) 우린 이런 메서드들을 사용할 수가 없다.

사실 함수형 컴포넌트는 Lifecycle 을 제어하는 메서드 말고도 상태를 관리하는 State 도 사용할 수 없다.

 

근데 useState 를 사용해서 state 를 만들고 잘 관리해왔다.

이렇게 use 키워드를 앞에 붙여서 원래 class 형 컴포넌트가 근본적으로 가진 이 기능을

함수형 컴포넌트에서 낚아채서( Hook ) 사용할 수 있는 이런 기능을 React Hooks 라고 부른다.

2019.06 정식 출시된 기능이다.

React Hooks 란 것이 개발되면서

use 키워드를 붙여 함수형 컴포넌트에서도 사용할 수 있게된 것이다. ( 중복 코드, 가독성 문제 등 해결 )

React Hooks 에는 useState, useRef, useEffect 등 많은 기능들이 존재한다.

 

함수형 컴포넌트에서 React Hooks 에서 useEffect 를 이용해 Lifecycle 을 제어해보자.

위 이미지는 useEffect 를 사용법이다. 2개의 파라미터를 전달하는데 첫번째는 콜백함수와 의존성 배열이다.

의존성 배열에 들어있는 값이 하나라도 변화하면 콜백함수가 수행된다 ( 바뀔때 마다 콜백 함수가 계속 수행된다는 뜻 )

useEffect(()=> {
	console.log("Mount");
    },[]);
    
// 콘솔로그를 보면 Mount!가 뜬다.
// 컴포넌트가 Mount 된 시점에 수행이 된 것.
// 의존성 배열을 비워놨기 때문에 콜백함수는 컴포넌트가 Mount 된 시점에만 작동한다.
    
useEffect(()=> {
	console.log("Update");
    });
    
// state를 변경하는 순간 Update 되는 시점을 useEffect로 제어한다.
// 이번엔 의존성 배열을 전달하지 않았다.
// 컴포넌트가 업데이트가 순간에 수행하고 싶은 것이 있다면 이용할 수 있음을 알 수 있다.

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

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

// 위처럼 의존성 배열을 잘 이용한다면 감지하고 싶은 값만 감지해서 그 값이 변화하는 순간에만 콜백함수를 수행시키게 바꿀 수 있다.
// 예제로 카운트를 감지해서 5를 넘으면 알림과 1로 초기화하는 기능을 useEffect를 이용해 만들어보자.

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

 

이번에는 Unmount 컴포넌트가 화면에서 사라지는 순간을 제어해보자.

useEffect = (() => {
	console.log("Mount!");
    // 컴포넌트가 화면에 Mount 된 순간을 제어하는 부분.
    
    // Unmount 는 어떻게 만들까?
    // Mount를 제어하는 useEffect에 전달되는 콜백함수가 함수 하나를 return 하게 하면된다.
    
    return () => {
    // Unmount 시점에 실행하게 됨
    console.log("Unmount!");
    }
},[]);

 

useEffect 를 이용하면 컴포넌트 Mount, Update, Unmount 또는 어떤 특정 값의 변화를 추적할 수 있는

굉장히 유용한 여러가지 Lifecycle 제어를 활용할 수 있는 것이다.