[리액트를 다루는 기술] 7. 컴포넌트의 라이프 사이클 메서드

1. 왜 알아야 하죠?

- 컴포넌트를 처음으로 업데이트 할 경우

- 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 할 경우

- 불필요한 업데이트를 방지

2. 라이프사이클

- 3가지  카테고리: 마운트, 업데이트, 언마운트

-> 업데이트: 컴포넌트 정보를 업데이트

-> 마운트: 페이지에 컴포넌트가 나타남

-> 언마운트: 페이지에서 컴포넌트가 사라짐

3. 마운트

- 웹 브라우저 상에서 나타나는 것을 마운트라고 함

4. 마운트 할 뗴 호출하는 매서드

- 컴포넌트 만들기

-> constructor  : 컴포넌트 새로 만들때 마다 호출되는 클래스 생성자 매서드

-> getDerivedStateFromProps: prop에 있는 값을 state에 동기화하는 매서드

-> render

-> componentDidMount: 컴포넌트가 웹 브라우저 상에 나타난 후 호출되는 매서드

5. 업데이트

1) props가 바뀔때

2) state가 바뀔때

3) 부모 컴포넌트가 리랜더링 될때

4) this.forecUpdate로 강제로 랜더링을 트리거 할떄

6. 업데이트 매서드

1) getDerivedStateFromProps

- 마운트 과정에서 호출

- props가 바뀌어도 호출

2) shouldComponentUpdate

- 컴포넌트가 업데이트를 할지 말지 결정하는 매서드

3) render

-컴포넌트를 리랜더링 함

4) getSnapshopBeforeUpdate

- 컴포넌트 변화를 DOM에 반영하기 직전에 호출

5) componentDidUpdqte

- 컴포넌트의 업데이트 작업이 끝난 후 호출

6. 언마운트

- 컴포넌트를 DOM에서 제거하는 것을 말함

1) componentWillUnmount

- 컴포넌트가 웹브라우저 상에서 사라지기 전에 호출하는 매서드

7. Render() 함수

- 절대로 staet를 변형해서는 안됨

- 웹브라우저에 접근해서는 안됨

8.Constructor 매서드

9. getDerivedStateFromProps 매서드

- props로 받아온 값을 State값으로 동기화

- 컴포넌트를 마운트하거나 props를 변경할 때 호출

10. componentDidMounst 매서드

- 컴포넌트를 만들고 첫 랜더링을 마친후 실행

11. shouldComponetUpdate 매서드

- props or State를 변경했을때 리랜더링을 시작할지 여부를 지정

- this.props, this.state로 접근

- 새로 설정 될 값은 nextProps, nextState로 접근

12. getSnapshoptBeforUpdate 매서드

- render 매서드를 호출 한 후 DOM에 변화를 반영하기 바로 직전에 호출

-> 반환되는 값은 componentDidUpdate에서 3번째 파라미터 인 snapshot 값으로 전달받음

- 업데이트 직전에 참고할 값이 있을대 활용( ex: 스크롤바 위치)

13. compoenentDidUpdate 매서드

- 리랜더링을 완료한 후에 실행, 업데이트가 끝난 직후

- prevProps, prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근

14. compoenetWillUnmount 매서드

- 컴포넌트를 DOMDPTJ 제거할때 실행

"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"