LifeCycle API 소개 및 사용법

Mounting

컴포넌트가 브라우저 상에 나타나는것
🔵 constructor

• 생성자 함수
• 브라우저가 만들어 질때 가장 먼저 실행 되는 함수 이다.
• 컴포넌트가 가지고 있어야할 state를 초기 설정한다.

🔵 getDerivedStateFromProps

• ~ Updating -> New props 에서도 실행된다.
• props로 받은 값을 state에 그대로 동기화 시키고 싶을때 사용

🔵 render

• ~ Updating -> forceUpdate()
• 값 등을 정의 해주는곳

🟢 componentDidMount

• 컴포넌트가 브라우저에 나타나는 시점에 어떠한 작업을 하겠다는 명령
• 외부 라이브러리 등을 사용할때 사용(특정 dom에 파트를 그려주세요! 이런식의 코드 작성)
• 컴포넌트가 나타나고 몇초뒤에 작업을 하고 싶다 할때 사용
• 네트워크 요청,api요청을 처리할때

Updating

컴포넌트의 props나 state가 바뀌었을때 업데이트 되는것

🔵 shouldComponentUpdate

• 컴포넌트가 업데이트가 되는 성능을 최적화 시키고 싶을때 사용
• 컴포넌트가 업데이트 될때 render에서 변경사항을 가상의 돔에 적용시켜서 렌더하지만 shouldComponentUpdateapi는 가상의 돔에 적용시키는 것 조차하지 않아 성능을 아낀다.
• true나 false를 반환하는데 true이면 render함수가 작동한다.

🟡 getSnaphotBeforeUpdate

• 렌더링 한 후, 렌더링 결과물이 반영되기 바로 직전에 사용하는 함수
• ex) 스크롤 위치, 화면의 크기 등을 알고 싶을때

🟡 React updates DOM and refs

• Mounting ~

🟢 componentDidUpdate

• updating작업이 모두 마치고 난 후에 작업하는 함수

Unmounting

컴포넌트가 브라우저 상에서 사라질때

🟢 componentWillUnmount

• 컴포넌트가 사라지는 과정에서 호출되는 함수
• Mounting에서 설정해놓은 이벤트를 없앨때도 사용된다.