Lifecycle?
생애주기라는 뜻으로 일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 (출처 : 국민안정처) 이라는 뜻을 가지고 있습니다.
React의 컴포넌트도 이런 생명주기 Lifecycle을 가집니다.
한 눈에 봐도 복잡한 생명 주기를 가지고 있습니다.
간단한 이미지로 react lifecycle을 다시 보겠습니다.
- Mount : 화면에 나타나는 것
- Update : 업데이트 (리렌더)
- UnMount : 화면에 사라짐
이 lifecycle을 제어한다는 것은 각각의 주기에 어떠한 작업을 수행시키는 것 입니다.
예시로
Mount 될 때 "초기화 작업",
Update 될 때 "예외 처리 작업",
unMount 될 때 "메모리 정리 작업" 등이 있습니다.
react는 기본적으로 각각의 lifecycle마다 실행할 수 있는 메서드들을 가지고 있습니다.
- ComponentDidMount : 컴포넌트가 태어날 때(mount) 어떤 것을 수행할 수 있는 함수
- ComponentDidUpdate : 컴포넌트가 변화하는 순간에 어떤 것을 수행할 수 있는 함수
- ComponentWillUnmount : 컴포넌트가 사라지기 이전에 어떤 것을 수행할 수 있는 함수
React Hooks
하지만 아쉽게도 이러한 함수들은 클래스형 컴포넌트에서 밖에 사용할 수 있습니다. 지금까지 저의 게시글에 있던 컴포넌트들은 함수형 컴포넌트 들입니다. 사실 state도 클래스형 컴포넌트에서만 사용이 가능합니다.
그래서 use 키워드를 앞에 붙혀서 클래스 컴포넌트가 기본적으로 가지고 있는 기능을 함수형 컴포넌트에서 사용할 수 있습니다. 이것을 "React Hooks" 라고 합니다.
함수형 컴포넌트를 사용하는 이유
클래스형 컴포넌트는 코드의 길이가 함수형 컴포넌트에 비해 많이 작성되어야 합니다.
중복코드, 가독성 문제 등등을 해결하기 위해 함수형 컴포넌트를 사용합니다.
useEffect
함수형 컴포넌트에서 라이프사이클을 제어하기 위해서는 useEffect react hooks를 사용해야 합니다.
Lifecycle.js
import React, { useState, useEffect } 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;
useEffect를 사용해보기 위해 예제 js파일 하나를 만들었습니다.
useEffect(mount)
useEffect(() => {
console.log("Mount");
}, []);
위의 이미지 처럼 mount가 잘 출력되는 것을 확인할 수 있습니다. + 버튼을 눌러 count를 증가 시켜서 리렌더링 되어도 해당 코드는 mount 될 때만 작동하기 때문에 콘솔에 출력되지 않습니다.
useEffect(update)
useEffect(() => {
console.log("update");
});mount와 다르게 dependency array를 전달하지 않으면 됩니다.
mount 될 때 Mount와 update가 출력되는 것을 확인할 수 있습니다.
- 버튼을 누르면 update가 콘솔에 출력되는 것을 확인할 수 있습니다.
const [count, setCount] = useState(0);
useEffect(() => {
console.log();
}, [count]);다음은 위의 코드를 테스트 해보도록 하겠습니다. useEffact는 dependency array의 값이 변경되게 되면 그 순간 콜백 함수가 실행됩니다.
useEffect(unmount)
import React, { useState, useEffect } from "react";
const UnmoutTest = () => {
useEffect(() => {
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 && <UnmoutTest />}
</div>
);
};
export default Lifecycle;기존의 코드를 많이 수정하였습니다. isVisible을 useState로 만들고 버튼을 누를 시 true or false로 변경되게 됩니다. 단락회로 연산자를 사용하여 isVisible이 true 일 시 UnmountTest 컴포넌트가 생성되고 false 일 시 소멸되게 됩니다.
useEffect(() => {
console.log("Mount!");
return () => {
// unmount 시점에 실행됌
console.log("Unmount");
};
}, []);useEffect(Mount)에 return에 함수를 넣게 되면 그 안에 코드는 unmount 시점에 실행되게 됩니다.
결과적으로 ON/OFF 버튼을 누를 때 mount와 Unmount가 콘솔에 출력되게 됩니다.
react에서 Lifecycle을 제어해 보았습니다.
해당 게시글은 인프런 강의
"한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지(이정환)"
를 정리한 내용입니다. 쉽게 잘 설명해주시니 여러분도 강의를 듣는 것을 추천드립니다.
