React JS

생명주기 함수

수연 (Suyeon) 2022. 2. 13. 15:04
반응형

생명주기 함수

- 클래스형 컴포넌트의 일생을 만들어주는 생명주기 함수에 대해 알아볼 것입니다.

- 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