반응형
생명주기 함수
- 클래스형 컴포넌트의 일생을 만들어주는 생명주기 함수에 대해 알아볼 것입니다.
- class component 안에 작성합니다.
- 실행함수, 업데이트 함수, 언마운트 함수 로 알아봅니다.
※ 실행 함수
1. constructor()
- 자바스크립트 함수이지만 클래스형 컴포넌트가 실행되면 같이 실행되는 함수입니다.
- render보다 더 먼저 실행됩니다.
- 실행 순서를 알고 있으면 무엇을 어떻게 사용해야 하는지 알기 쉬워집니다.
2. componentDidMount()
- 컴포넌트가 처음 화면에 그려지면 실행되는 함수입니다.
- render() 다음에 실행됩니다.
- 영화 앱을 만든다면 안에 영화 API를 가져오는 역할을 합니다.
※ 업데이터 함수
1. componentDidUpdate()
- 화면이 업데이트되면 실행되는 함수입니다.
- setState()를 사용한 버튼을 누르면 render이 실행되면서 화면이 업데이트 됩니다. 그때 이 함수가 실행됩니다.
- 실행순서: 버튼을 눌러서 setState() 실행 → setState()를 실행해서 render() 실행 → 업데이트 됐으므로
componentDidUpdate 실행
※ 언마운트 함수
1. componentWillUnmount()
- 컴포넌트가 죽을 때 실행합니다.
- 보통 이벤트 리스너를 제거할 때 많이 사용합니다.
728x90
'React JS' 카테고리의 다른 글
노마드코더 영화 API 사용하기 (0) | 2022.02.14 |
---|---|
구조 분해 할당 (ES6) (0) | 2022.02.14 |
React 컴포넌트를 class로 정의 (0) | 2022.02.13 |
Navigation 추가하기 (0) | 2022.02.13 |
영화 소개글 수 제한 하기 (0) | 2022.02.11 |