🔹 Lifecycle (생명주기)
- 컴포넌트마다
Lifecycle이 존재한다. - 컴포넌트를 처음 렌더링 할 때 or 컴포넌트를 업데이트 하기 전 후 or 불필요한 업데이트를 방지 하려 할 때
Lifecycle메소드를 사용한다. Lifecycle은 클래스 컴포넌트에서만 사용할 수 있다.Lifecycle은Mount,Update,Unmount세가지로 나뉜다.(React 공식 문서)
🔷 Mount
- DOM이 생성되고 웹 브라우저상에 나타나는것을
Mount라고 한다.constructor: 컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메소드getDerivedStateFromProps: DOM에서 요소들이 렌더링 되기 직전에 호출된다. 최초의props에 기반한state객체를 저장한다.shouldComponentUpdate: 현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지 여부를 React가 알 수 있습니다.render: 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드이다.DOM에 HTML을 표현해 준다. 컴포넌트의state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용을 하지 않는다.componentDidMount: 컴포넌트가 만들어 진 후 첫 렌더링을 마친 후 실행된다. 이미 DOM에 위치한 컴포넌트를 필요로 하는 구문을 사용하는 곳이다.
외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치이다.
🔷 Updating
- 컴포넌트가 업데이트 할 때를 의미한다.
getDerivedStateFromProps: 초기props에 기반한state가 저장되는 곳이다.shouldComponentUpdate: 렌더링을 계속 진행할지 중지할지에 대한 Boolean 값을 반환한다. 기본값은true이다.render: 업데이트 되면 re-rendering 된다.getSnapshotBeforeUpdate: 가장 마지막으로 렌더링된 결과가 DOM에 반영되기 전에 호출된다. DOM으로부터 스크롤 위치 등과 같은 정보를 업데이트 이후 변경되기 전에 얻을 수 있다.componentDidUpdate: 리렌더링 후 호출되는 메소드이다(최초 렌더링에서는 호출 안됨) 컴포넌트가 갱신됐을 때 DOM을 조작하기 위해 활용하면 좋다. 이전과 현재의props를 비교하여 네트워크 요청을 보내는 작업도 이루어진다.(props 변화 없으면 네트워크 요청 X)
- Update 되는 상황
props,state가 바뀔 때- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 할 때
🔷 Unmounting
- DOM을 제거할 때 실행한다. 컴포넌트가 화면에서 사라진다.
componentWillUnmount: 타이머 제거, 네트워크 요청 취소 등 모든 정리 작업을 수행하는 곳이다. setState()를 호출하면 안된다.
- componentDidMount에서 생성한 이벤트가 있다면 여기서 제거해야 한다.
📖 현재시각 예제
output
🔹 useEffect()
- 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.
useEffect는 함수 컴포넌트에서만 사용할 수 있다.componentDIdMount,componentDidUpdate,componentWillunmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.
📖 현재시각 예제
output
Front-end