<목차>
- 라이프사이클
- 라이프사이클 메서드
19. 라이프사이클
- Lifecycle
- 객체, 컴포넌트, 페이지 등이 생성되고, 업데이트되며, 파괴되는 과정 전체
- 리엑트 같은 라이브러리나 프레임워크에서 라이프사이클은 매우 중요한 개념
- 클래스 컴포넌트에서 다루어짐
- 각 단계에서 실행되는 메서드들로 구성
- 메서드는 컴포넌트 생성, 업데이트, 제거 등의 시점에 자동으로 호출되어 특정 작업 수행
- 라이프사이클은 마운팅,업데이트,언마운팅 세단계로 나뉨
- 효과적인 UI 업데이트, 리소스 관리, 버그 최소화에 중요
마운팅(Mounting)
- 컴포넌트가 DOM에 처음으로 삽입되는 단계
업데이트(Updating)
- 컴포넌트가 새로운 props를 받거나 state가 변경될 때 발생
언마운팅(Unmounting)
- 컴포넌트가 DOM에서 제거될 때 발생
** DOM(Document Object Model)
HTML 및 XML 문서의 프로그래밍 인터페이스. 웹브라우저가 웹 페이지를 로드할 때, 그 페이지의 문서를 DOM형식으로 변환하여 웹 페이지의 각 요소를 객체로 표현하고 이 객체들을 트리 구조로 조직화함. 이 트리 구조를 통해 개발자는 JavaScript등의 프로그래밍 언어를 사용하여 문서의 구조, 스타일, 내용 등을 동적으로 변경
Q. 라이프사이클이 의미하는 바에 대해서 설명해주세요.
라이프사이클이란 객체, 컴포넌트, 페이지 등이 생성되고, 업데이트되며, 파괴되는 과정 전체를 의미합니다. 특히 리액트 같은 라이브러리나 프레임워크에서 라이프사이클은 매우 중요한 개념입니다. 라이프사이클은 주로 클래스 컴포넌트에서 다뤄지고 각 단계에서 실행되는 메서드들로 구성되어 있습니다. 라이프사이클은 크게 세 단계로 나눠집니다. 첫 번째는 마운팅으로, 컴포넌트가 생성되어 DOM에 처음 삽입되는 단계입니다. 두 번째는 업데이트로, 컴포넌트가 새로운 props를 받거나 state가 변경될 때 발생합니다. 마지막은 언마운팅으로, 컴포넌트가 DOM에서 제거될 때 발생합니다. 각 단계별로 호출되는 메서드들을 이해하고 적절히 활용하는 것은 효과적인 UI 업데이트, 리소스 관리, 버그 최소화에 도움이 됩니다.
20. 라이프사이클 메서드
- 라이프사이클은 마운팅, 업데이트, 언마운팅 세 단계로 나뉨
- 메서드들을 통해 컴포넌트의 생명주기를 세밀하게 관리할 수 있음
- 적절한 처리를 통해 성능을 최적화하고 자원을 효율적으로 관리할 수 있음
마운팅(Mounting)
- 컴포넌트가 생성되어 DOM에 처음 삽입되는 단계.
constructor(): 컴포넌트가 생성될 때 가장 먼저 실행, 초기 state를 설정하거나 메서드 바인딩을 수행하는데 사용static getDerivedStateFromProps(props, state): 컴포넌트가 마운트되기 전 및 업데이트 되기 전에 호출, props로부터 파생된 state를 반영하기 위해 사용, 이 메서드는 객체를 반환하거나 null을 반환해야함render(): 실제 DOM을 구성하는 React요소 반환, 순수함수여야함, 이 메서드 안에서는 this.setState를 호출해서는 안됨componentDidMount(): 컴포넌트가 마운트된 직후에 호출, DOM 노드가 필요한 초기화, 네트워크 요청, 구독 등의 작업을 수행하는 데 사용
업데이트(Updating)
- 컴포넌트는 새로운 props를 받거나 state가 변경되거나 부모 컴포넌트가 리렌더링될 때 업데이트.
static getDerivedStateFromProps(props, state): 컴포넌트 업데이트 시 호출, 주어진 props로부터 state 도출할 때 사용shouldComponentUpdate(nextProps, nextState): 컴포넌트가 리렌더링을 할지 말지 결정, 기본적으로 true를 반환하지만, 성능 최적화를 위해 필요한 경우 false를 반환render(): 컴포넌트의 리렌더링을 담당getSnapshotBeforeUpdate(prevProps, prevState): 실제 DOM 변화가 일어나기 직전에 호출. 이 메서드에서 반환된 값은 componentDidUpdate()의 세 번째 파라미터로 전달componentDidUpdate(prevProps, prevState, snapshot): 업데이트가 끝난 후 호출. 이전 props나 state를 이용해 DOM 업데이트 후의 작업 수행
언마운팅(Unmounting)
- 컴포넌트가 DOM에서 제거될 때 발생
componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출. 타이머 제거, 네트워크 요청 취소, 구독 해제 등의 정리 작업 수행
Q. 라이프사이클 메소드에 대해 설명해주세요.
React의 라이프사이클 메소드는 컴포넌트의 수명 주기에 따라 다양한 단계에서 호출되는 메소드들을 말합니다. 크게 컴포넌트가 생성될 때의 마운팅, 업데이트, 그리고 제거될 때의 언마운팅 세 가지 단계로 나눌 수 있습니다.
첫째, 마운팅 단계에는 컴포넌트가 DOM에 처음 삽입될 때 실행되는 메소드들이 있어요. 이 단계에는 constructor(), getDerivedStateFromProps(), render(), 그리고 componentDidMount()가 포함됩니다. 특히 componentDidMount()는 API 호출 같은 외부 데이터 연동을 처리하는 데 자주 사용됩니다.
다음으로, 업데이트 단계는 컴포넌트의 props나 state가 변경될 때 발생하죠. 이때는 getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), 그리고 componentDidUpdate() 같은 메소드들이 호출됩니다. 여기서 성능 최적화를 위해 shouldComponentUpdate()를 활용할 수 있습니다.
마지막으로, 언마운팅 단계에서는 componentWillUnmount()가 호출되며, 이 메소드는 컴포넌트가 DOM에서 제거되기 직전에 필요한 정리 작업을 수행합니다.
이러한 라이프사이클 메소드들을 통해 컴포넌트의 생성부터 소멸까지의 전 과정을 효과적으로 관리하고 조절할 수 있습니다.
