개발자의 공부/React

[React]Lifecycle

2022. 9. 24. 16:26
목차
  1. React의 LifeCycle
Lifecycle=생애주기

React의 LifeCycle

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

라이프 사이클은 크게 세가지로 Mount(탄생), Update(변화), UnMount(죽음)로 나뉜다.

Update(리렌더)는 4가지 상황에서 발생한다.

  1. props(외부 상태)가 바뀔 때
  2. state(내부 상태)가 바뀔 때
  3. 부모 컴포넌트가 리렌더링될 때
  4. 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
  1. React의 LifeCycle
'개발자의 공부/React' 카테고리의 다른 글
  • [React]State(내용 업데이트)
  • [React]Page Routing
  • [React]성능 최적화와 성능 체크(업데이트)
  • [React]React가 무엇이고 왜 사용하는가? + 라이브러리와 프레임워크
JMins
JMins
안녕하세요. 프론트엔드 개발자 김정민입니다. 개발 지식을 공유하고 기록하는 공간입니다.
JMins
개발자 노트
JMins
전체
오늘
어제
  • 분류 전체보기 (85)
    • 개발자의 공부 (73)
      • React (17)
      • 자료구조&알고리즘 (28)
      • JS (17)
      • TS (8)
      • Nodejs (0)
      • Nextjs (1)
      • 기타 (1)
      • Design Pattenrs (0)
      • 테스트 및 최적화 (1)
    • 문제 및 해결 (9)
    • 기본 지식 (3)
    • 챌린지 (0)

블로그 메뉴

  • 홈

공지사항

  • #블로그 스킨 변경
  • 개인적으로 공부를 기록하기 위해 적고 있습니다.

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.
JMins
[React]Lifecycle
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.