Lifecycle=생애주기
React의 LifeCycle
React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다.

라이프 사이클은 크게 세가지로 Mount(탄생), Update(변화), UnMount(죽음)로 나뉜다.
Update(리렌더)는 4가지 상황에서 발생한다.
- props(외부 상태)가 바뀔 때
- state(내부 상태)가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링 트리거할 때

컴포넌트의 라이프 사이클을 제어한다는 것은 까다롭지 않다. 단순히 컴포넌트가 탄생하고 변화하고 죽는 과정에서 각각 어떤 작업을 수행하게 하는 것을 라이프 사이클을 제어한다고 말할 수 있다. 위 사진처럼 탄생 시에 초기화 작업을 시키거나 변화를 통해 발생할 수 있는 예외를 처리하고, 컴포넌트가 사라질 때 해당 컴포넌트가 사용하던 메모리를 반환하게 하는 작업을 하는 것이다. 소프트웨어를 견고하고 효율적으로 개발하기 위해선 기술의 라이프 사이클을 온전히 이해하고 이용할 수 있어야 한다.
라이프 사이클 메서드

ComponentDidMount와 같은 메서드들은 함수형 컴포넌트에선 사용할 수 없다. Class형 컴포넌트에서만 사용할 수 있으며 Class형 컴포넌트에선 hooks를 이용하여 상태를 관리할 수 없다.
Class형 컴포넌트의 단점: 길어지는 코드 문제, 복잡성이 높고, 중복 코드가 다수 발생하며, 가독성이 떨어진다.
함수형 컴포넌트에서 라이프 사이클 제어하기
useEffect
- 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
- 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.
import React, { useEffect } from "react;
useEffect(() => {
// todo...
}, []); // 컴포넌트가 마운트된 시점에만 동작
useEffect(() => {
// todo...
}); // 컴포넌트내 모든 변화에 동작
useEffect(() => {
// todo...
}, [count]); // count의 state가 변할 때 동작
이러한 형태를 가지고 있다. Dependency Arry(의존성 배열)을 사용해서 동작의 기준을 정해줄 수 있다.
const UnmountTest = () => {
useEffect(() => {
console.log('Mount!')
return () => {
console.log('UnMount')
}
}, []);
return <div>Unmout Testing Componet</div>;
};
useEffect내의 UnMount 시점은 return의 콜백함수로 지정한다.
useEffect는 컴포넌트 Mount, Update, Unmount 또는 어떤 특정 값의 변화를 추적할 수 있는 유용한 라이프 사이클 제어 훅이다.
useEffect를 사용하지 않으면 상태가 상태가 변할때마다 반복적으로 실행되기에 무한루프에 빠질 수 있다.
'개발자의 공부 > React' 카테고리의 다른 글
[React]useReducer (0) | 2022.10.24 |
---|---|
[React]State(내용 업데이트) (0) | 2022.10.24 |
[React]Page Routing (0) | 2022.09.30 |
[React]성능 최적화와 성능 체크(업데이트) (1) | 2022.09.29 |
[React]React가 무엇이고 왜 사용하는가? + 라이브러리와 프레임워크 (0) | 2022.09.23 |
Lifecycle=생애주기
React의 LifeCycle
React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다.

라이프 사이클은 크게 세가지로 Mount(탄생), Update(변화), UnMount(죽음)로 나뉜다.
Update(리렌더)는 4가지 상황에서 발생한다.
- props(외부 상태)가 바뀔 때
- state(내부 상태)가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링 트리거할 때

컴포넌트의 라이프 사이클을 제어한다는 것은 까다롭지 않다. 단순히 컴포넌트가 탄생하고 변화하고 죽는 과정에서 각각 어떤 작업을 수행하게 하는 것을 라이프 사이클을 제어한다고 말할 수 있다. 위 사진처럼 탄생 시에 초기화 작업을 시키거나 변화를 통해 발생할 수 있는 예외를 처리하고, 컴포넌트가 사라질 때 해당 컴포넌트가 사용하던 메모리를 반환하게 하는 작업을 하는 것이다. 소프트웨어를 견고하고 효율적으로 개발하기 위해선 기술의 라이프 사이클을 온전히 이해하고 이용할 수 있어야 한다.
라이프 사이클 메서드

ComponentDidMount와 같은 메서드들은 함수형 컴포넌트에선 사용할 수 없다. Class형 컴포넌트에서만 사용할 수 있으며 Class형 컴포넌트에선 hooks를 이용하여 상태를 관리할 수 없다.
Class형 컴포넌트의 단점: 길어지는 코드 문제, 복잡성이 높고, 중복 코드가 다수 발생하며, 가독성이 떨어진다.
함수형 컴포넌트에서 라이프 사이클 제어하기
useEffect
- 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
- 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.
import React, { useEffect } from "react;
useEffect(() => {
// todo...
}, []); // 컴포넌트가 마운트된 시점에만 동작
useEffect(() => {
// todo...
}); // 컴포넌트내 모든 변화에 동작
useEffect(() => {
// todo...
}, [count]); // count의 state가 변할 때 동작
이러한 형태를 가지고 있다. Dependency Arry(의존성 배열)을 사용해서 동작의 기준을 정해줄 수 있다.
const UnmountTest = () => {
useEffect(() => {
console.log('Mount!')
return () => {
console.log('UnMount')
}
}, []);
return <div>Unmout Testing Componet</div>;
};
useEffect내의 UnMount 시점은 return의 콜백함수로 지정한다.
useEffect는 컴포넌트 Mount, Update, Unmount 또는 어떤 특정 값의 변화를 추적할 수 있는 유용한 라이프 사이클 제어 훅이다.
useEffect를 사용하지 않으면 상태가 상태가 변할때마다 반복적으로 실행되기에 무한루프에 빠질 수 있다.
'개발자의 공부 > React' 카테고리의 다른 글
[React]useReducer (0) | 2022.10.24 |
---|---|
[React]State(내용 업데이트) (0) | 2022.10.24 |
[React]Page Routing (0) | 2022.09.30 |
[React]성능 최적화와 성능 체크(업데이트) (1) | 2022.09.29 |
[React]React가 무엇이고 왜 사용하는가? + 라이브러리와 프레임워크 (0) | 2022.09.23 |