리액트의 라이프사이클 메서드는 컴포넌트의 생명 주기 동안 발생하는 여러 이벤트를 다루기 위해 정의된 메서드들
이 메서드들은 특정한 시점에 자동응로 호출되며, 이를 통해 개발자는 컴포넌트의 동작을 미세 조정하거나, 특정 작업을 수행할 수 있음
리액트의 라이프사이클 메서드는 3개의 단계로 분류될 수 있음
❓Mounting(마운팅)
- 이 단계는 컴포넌트가 처음 생성되어 DOM에 삽입될 때 발생함
- constructor: 컴포넌트의 생성자 메서드로, 컴포넌트의 초기 상태를 설정하는 데 사용됨
- static getDerivedStateFromProps: props를 받아서 state를 업데이트할 때 사용됨
- render: 컴포넌트 UI를 렌더링하는 메서드임
- componentDidMount: 컴포넌트가 DOM에 마운트된 직후에 호출되는 메서드로, 이 시점에서 DOM에 관련된 작업이나 네트워크 호출 등의 사이드 이펙트를 처리하기 좋음
❓Updating(업데이팅)
- 컴포넌트의 state나 props가 변경되어 컴포넌트가 리렌더링될 때 이 단계가 발생함
- static getDerivedStateFromProps: 위에서 설명했듯이, props를 받아서 state를 업데이트할 때 사용
- render: 컴포넌트 UI를 렌더링함
- getSnapshotBeforeUpdate: 컴포넌트 업데이트 직전의 DOM 상태를 캡쳐하는 데 사용됨
- componentDidUpdate: 컴포넌트가 업데이트 된 후 호출됨
❓Unmounting(언마운팅)
- 컴포넌트가 DOM에서 제거될 때 이 단계가 발생함
- componentWillUnmount: 컴포넌트가 언마운트되기 직전에 호출됨, 이벤트 리스너의 제거나 타이머의 해제와 같은 정리 작업을 수행하는 데 적합함
❓에러 처리에 관한 라이프사이클 메서드
- static getDerivedStateFromError: 후속 렌더링에서 에러를 발생하지 않게 상태를 업데이트하는데 사용됨
- componentDidCatch: 에러와 그에 관한 정보를 잡아 로깅하거나, 사용자에게 에러 화면을 보여주는 데 사용됨
이러한 라이프사이클 메서드를 통해, 개발자는 컴포넌트의 다양한 생명 주기 이벤트에 대응하여 원하는 로직을 실행할 수 있음
리액트에서 각 컴포넌트는 특정한 생명 주기를 갖습니다. 이 생명 주기 동안 여러 단계가 있습니다. 그 각각의 단계에서 라이프사이클 메서드가 자동으로 호출되며, 이를 통해 원하는 작업을 수행할 수 있게 도와줍니다.
첫 번째로 마운팅이라는 단계가 있습니다. 이건 컴포넌트가 처음으로 하면에 나타날때의 과정입니다. 여기서는 constructor로 초기 설정을 하고, render를 통해 UI를 그려줍니다. 그리고 componentDidMout에서는 주로 API 호출 같은 작업을 합니다.
다음으로는 업데이팅이 있습니다. 상태나 속성이 바뀔 때마다 컴포넌트를 업데이트하는데, 이때 이 단계가 작동합니다.
render로 다시 화면을 그리고, componentDidUpdate에서는 업데이트 이후의 추가 작업을 수행하곤 합니다.
마지막으론 언마운팅입니다. 컴포넌트가 화면에서 사라질 때 이 단계가 작동하며, componentWillUnmount를 통해 필요한 정리 작업을 합니다.
그리고 에러 처리에도 메서드가 있습니다. getDerivedStateFromError와 componentDidCatch를 통해 컴포넌트 내에서 발생한 에러를 잡아 처리할 수 있습니다.
'IT > 면접' 카테고리의 다른 글
Q. 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명 (0) | 2023.08.31 |
---|---|
react 클래스형과 함수형의 차이를 설명, 주로 사용하는 방식과 그 이유 (0) | 2023.08.31 |
Q. 라이프사이클이 의미하는 바 (0) | 2023.08.24 |
Q. http, https 차이점 (0) | 2023.08.24 |
Q. TCP/UDP에 대해서 설명 (0) | 2023.08.24 |