[React] LifeCycle API

2021. 12. 26. 18:35·React/기본

LifeCycle API 란?

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

LifeCycle API 는 React에서 생명주기이다 무슨 말이냐면 Component가

1. 나타날 때

2. 업데이트 될 때

3. 사라질 때 

등 중간중간 과정에서 작업을 할 때 사용되기 때문이다.

 

LifeCycle API 의 종류는 매우 많다 (사진 참고)


LifeCycle API 종류 소개 (사진 참고)

1. Mounting

: Component가 우리 브라우저 상에 나타날 때

 

2. Updating

: Component의 Props가 바뀌거나 어떤 내용이 바뀌었을 때, 업데이트 될 때

 

3. Unmounting

: Component가 우리 브라우저 상에서 사라질 때

 

4. LifeCycle API 소개

constructor 우리가 만든 함수가 처음 브라우저 상에 나타날 때 가장 먼저 사용되는 함수
초기설정 컴포넌트가 만들어지는 과정에서 미리 먼저 해야 할것을 여기서 사용
getDerivedStateFromProps Props로 받아온 값을 state로 동기화하는 작업을 함
shouldComponentUpdate return 값이 false이면 업데이트를 안함
render 어떤 DOM을 만들지, 내부에 태그에는 어떤 값을 전달할지 도와주는 역할을 함
getSnapshotBeforeUpdate 컴포넌트가 업데이트되기 바로 직전에 return 시켜서 return된 값을 componentDidUpdate에서 받아올 수 있음
componentDidUpdate 컴포넌트가 업데이트 된 이후에 호출되는 API로 이전의 값인 prevProps와 prevState 를 조회할 수 있으며 getSnapshotBeforeUpdate에서 반환한 snapshot 값은 세 번째로 받아오는 역할을 함
componentWillUnmount 컴포넌트를 제거할 수 있음
componentDidCatch 에러를 잡아줌
componentDidMount 외부 라이브러리 연동, 컴포넌트에서 필요한 데이터 요청, DOM에 관련된 작업 (스크롤 설정, 크기 읽어오기, 이벤트 등록 등) 을 함

LifeCycle API 참고 문서 코드: https://codesandbox.io/s/xl313zyrkw

'React > 기본' 카테고리의 다른 글

[React] JSX 기본 문법 (3/3)  (0) 2021.12.23
[React] JSX 기본 문법 (2/3)  (0) 2021.12.23
[React] React란, JSX 기본 문법 (1/3)  (0) 2021.12.23
'React/기본' 카테고리의 다른 글
  • [React] JSX 기본 문법 (3/3)
  • [React] JSX 기본 문법 (2/3)
  • [React] React란, JSX 기본 문법 (1/3)
ssddo
ssddo
구경하고 가세요
  • ssddo
    ssddo-story
    ssddo
  • 전체
    오늘
    어제
    • 분류 전체보기 (44)
      • SpringBoot (9)
      • webFlux (2)
      • DB (8)
        • MySQL (3)
        • Mongo (3)
        • Docker (1)
        • Postgres (1)
      • JAVA (1)
      • ORM & DSL (4)
        • JPA (3)
        • JOOQ (1)
      • React (12)
        • 설치 및 환경 구축 (1)
        • 기본 (4)
        • 활용 (7)
      • CS (1)
      • 공통 (6)
      • 프로젝트 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    패딩
    Redisson
    react
    jooq
    복호화
    git
    docker
    MySQL
    Java
    JPA
    블록
    암호화
    mongo
    postgre
    RSS
    springboot
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
ssddo
[React] LifeCycle API
상단으로

티스토리툴바