Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 프로그래머스
- 파일 url
- api 요청 수 제한
- TypeORM
- 자바스크립트
- 스프링부트
- this
- 우아한테크코스
- 프론트엔드
- bucket4j
- 모던 자바스크립트
- AWS
- Deep Dive
- concurrency limit
- 프리코스
- 딥다이브
- 우아한 테크코스
- oauth
- 프론트엔드 과제
- 음악 url 파일 다운로드
- 타입스크립트
- invalid_grant
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- compateto
- api 비동기처리
- 검색
- 유효시간 설정 url
- Dev-Matching
- redis
- NestJS
Archives
- Today
- Total
개발 알다가도 모르겠네요
LifeCycle 를 간단하게 알아보자. 본문
728x90
컴포넌트의 생명주기
모든 리액트 컴포넌트에는 수명 주기가 존재함.
컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작, 페이지에서 사라질 때 끝남.
Mount
DOM이 생성되고 웹 브라우저상에 나타나는 것
componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드
Update
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.forceUpdate로 강제로 렌더링 트리거할 때
componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드
Unmount
컴포넌트를 DOM에서 제거하는 것
componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
LifeCycle Method
render
컴포넌트 모양새 정의.
componentDidMount
컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행.
이 안에서 다른 자바스크립트 라이브러리, 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리.
componentDidUpdate
리렌더링을 완료한 후 실행.
업데이트가 끝난 직후이므로, DOM 관련 처리를 해도 무방.
componentWillUnmount
컴포넌트를 DOM에서 제거할 때 실행.
componentDidMount에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야함.
'웹 > React' 카테고리의 다른 글
리액트 프로젝트 초기 환경 세팅 (0) | 2022.08.02 |
---|---|
Component와 State&Props 를 간단하게 알아보자 (0) | 2022.01.12 |