리액트 생명주기(Lifecycle) 메서드
컴포넌트 생성 시 (Mounting)
컴포넌트가 처음 화면에 렌더링될 때 호출되는 생명주기 메서드입니다. 주로 컴포넌트가 생성되기 전, 후에 수행되는 작업들을 정의합니다. 대표적인 메서드는 constructor, getDerivedStateFromProps, render, componentDidMount입니다. constructor는 컴포넌트 인스턴스가 생성될 때 호출되며, componentDidMount는 컴포넌트가 렌더링된 후 호출되어 초기 데이터 로드나 외부 API 호출 등에 사용됩니다. 이 시점에서 컴포넌트는 DOM에 삽입되며, 외부 환경과의 연결이 이루어집니다.
컴포넌트 업데이트 시 (Updating)
컴포넌트의 상태나 속성(Props)이 변경될 때마다 호출되는 생명주기 메서드입니다. 업데이트는 여러 가지 이유로 발생할 수 있습니다: 사용자 입력, API 응답, 부모 컴포넌트의 Props 변경 등입니다. 주요 메서드는 getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate입니다. shouldComponentUpdate는 렌더링을 최적화하기 위해 불필요한 리렌더링을 막을 때 사용하며, componentDidUpdate는 업데이트가 완료된 후에 호출되어 DOM을 다루거나 데이터를 업데이트하는 데 유용합니다.
컴포넌트 제거 시 (Unmounting)
컴포넌트가 DOM에서 제거될 때 호출되는 메서드입니다. 이 단계에서 주로 리소스 정리나 클린업 작업을 수행합니다. 대표적인 메서드는 componentWillUnmount입니다. componentWillUnmount는 컴포넌트가 제거되기 직전에 호출되며, 이벤트 리스너나 타이머를 정리하는 등의 작업을 할 수 있습니다. 이 시점에서 컴포넌트는 화면에서 사라지고, 관련된 리소스가 해제됩니다. 불필요한 메모리 누수를 방지하려면 이 메서드를 잘 활용해야 합니다.
에러 처리 (Error Handling)
컴포넌트 내에서 오류가 발생할 경우 처리할 수 있는 생명주기 메서드입니다. 리액트는 componentDidCatch와 getDerivedStateFromError 두 가지 방법으로 오류를 처리할 수 있습니다. componentDidCatch는 컴포넌트 트리에서 발생한 오류를 잡아내어 UI에 오류 메시지를 표시하거나 복구할 수 있게 해줍니다. getDerivedStateFromError는 오류가 발생했을 때 상태를 업데이트하는데 사용되며, 오류를 UI에 표시하기 위해 상태를 조작할 수 있습니다. 이러한 메서드를 사용하면, 애플리케이션이 오류에 강한 구조로 만들어집니다.
리액트 16.3 이후의 새로운 메서드 (New Lifecycle Methods)
리액트 16.3에서는 일부 오래된 생명주기 메서드가 deprecated 되었으며, 대신 더 안전하고 효율적인 새로운 메서드들이 추가되었습니다. getDerivedStateFromProps와 getSnapshotBeforeUpdate가 대표적인 예입니다. getDerivedStateFromProps는 이전에 사용되던 componentWillReceiveProps의 대체 메서드로, 부모로부터 Props가 변경될 때마다 상태를 동기화하는 데 사용됩니다. getSnapshotBeforeUpdate는 컴포넌트가 실제로 렌더링되기 직전에 현재 DOM 상태를 기록하고, 이를 componentDidUpdate에서 활용할 수 있게 해줍니다.