[DEV] 리액트 04 - Life Cycle

headerimg

경고

공부기록용임. 코드나 커리큘럼 방식 등 모든 지적 재산권은 노마드 코더에게 있으며, 무료로 볼 수 있으니 들어가서 여기서 공부할 것!! 갓 니콜라이 노마드 코더님 만세! https://academy.nomadcoders.co

Life Cycle

image

공식문서 무려 한글이다. 감동..ㅠ 꼼꼼히 읽어보자

공식문서
API

자주쓰는 컴포넌트 함수들

1. 마운트

constructor() // 초기화
render() // 랜더링
componentDidMount() //컴포넌트가 마운트 된 후 (랜더 후)
// DOM이 필요한 작업은 여기서

component가 실행될 때, 실행되는 녀석들이라고 편하게 생각하자.

2. 업데이트

shouldComponentUpdate()
//랜더가 필요하지 않은 state 변경을 하였다면 업데이트 할지 말지 (성능 최적화)
render()
componentDidUpdate() //업데이트 랜더링 된 후!

props, state가 변경될 때, 실행된다.

3. 마운트 해제

componentWillUnmount() //컴포는트가 없어질때 씀.

ngDestroy랑 비슷하다.

결과! image

componentWillUnmount는 나중에 시험해보자..ㅠ


© 2018. All rights reserved.

Powered by blowROCK