LIFECYCLE
💡 리액트는 컴포넌트 기반의 View 를 중심으로 한 라이브러리이며 컴포넌트에는 라이프사이클 즉 컴포넌트의 생명 주기가 존재함. 이것은 프로그램이 실행되고 종료되는 과정 을 말함
- 라이프사이클 메서드언제 사용하나요? -> 컴포넌트를 처음으로 렌더링할 때(또는 컴포넌트를 업데이트하기 전후) 특정 작업을 처리해야 하는 경우, 불필요한 업데이트를 방지해야 하는 경우클래스형 컴포넌트에서만 사용 가능!Hooks 기능을 통해 함수형 컴포넌트에서 비슷한 작업을 처리할 수 있다!
Mount(탄생) > Update, Re-render(변화) > Unmount(죽음)
1-1. 마운트 (Mount)
DOM이 생성되고 웹 브라우저 상(화면)에 나타남
✅ constructor
컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드
this.props, this.state에 접근이 가능하고 리액트 요소를 반환합니다.
✅ getDerivedStateFromProps
props로부터 파생된 state를 가져옵니다. 즉 props로 받아온 것을 state에 넣어주고 싶을때 사용합니다.
✅ render
컴포넌트를 렌더링하는 메서드
✅ componentDidMount
컴포넌트의 첫번째 렌더링이 마치면 호출되는 메서드
이 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태이다.
여기서는 주로 DOM을 사용해야 하는 외부 라이브러리 연동, 해당 컴포넌트에서 필요로하는 데이터를 ajax로 요청, 등의 행위를 합니다.
1-2. 업데이트(updating)
Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교해서 변경된 값을 다시 렌더링 해주는 것
- 컴포넌트 상태가 변하는 경우 다음과 같은 상황에서 발생한다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
- 1,2,3 이 발생하면 다음과 같은 순서로 메서드가 호출된다. 1)props 변경, state 변경, 부모 컴포넌트 리렌더링 2)getDerivedStateFromProps : 마운트에서도 호출되는 메서드. props의 변화에 따라 state에도 변화를 주고 싶을 때 사용한다. 3)shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지 결정한다. true, false 값을 반환해야 하며, false를 반환하면 작업을 중지하고, 컴포넌트가 리렌더링 되지 않는다. 4)render : 컴포넌트를 리렌더링한다. this.forceUpdate 함수를 호출하면 앞의 과정을 생략하고 바로 render 함수를 호출한다. 5)getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 직전에 호출한다. 6)componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출한다.
1-3. 언마운트 (Unmount)
컴포넌트가 DOM에서 제거되고 웹 브라우저에서 사라짐
- 언마운트 될 때 호출되는 메서드
componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
