[React] Component Life Cycle

안녕하세요.

오늘은 React의 Component의 LifeCycle에 대해 알아보도록 하겠습니다.

 

들어가며

React Component의 Life Cycle에 관련된 Method는 React Component가 생성(Mount), 갱신(Update), 제거(Unmount)되는 과정에서 눈에 띄지 않게 자동으로 호출되는 특별한 Method입니다. 이를 활용한다면 각 단계에서 원하는 작업을 효율적으로 동작시켜 애플리케이션에 중요한 역할을 할 수 있을 것입니다.

왜 중요할까?

중요함의 내용을 알기 위해서는 어떠한 역할을 수행하는지 알아야 합니다.

컴포넌트 초기화
Mount 단계에서 초기 State 설정, 데이터 가져오기 또는 타사 라이브러리와 연동
변경에 대한 응답
props 또는 State가 변경될 때 UI 업데이트 또는 Side Effect 적용
리소스 정리
컴포넌트가 DOM에서 제거되기 전에 타이머, 네트워크 연결 또는 이벤트 리스너 제거

위의 역할을 하며 성능을 최적화하며 메모리 누수에 대한 방지를 할 수 있습니다.

Mount 단계

Mount 단계는 Life Cycle의 첫 번째 단계입니다. Component가 처음 만들어져 DOM에 삽입될 때 시작됩니다. 

constructor()

이 메서드는 Component의 State를 초기화하는 데 사용할 수 있는 메서드입니다. 일반적으로 Component가 처음 렌더링되기 전에 State 초기값을 설정하는 데 사용됩니다.

getDerivedStateFromProps()

React 16.3에서 도입된 메서드입니다. 들어오는 props를 기반으로 State를 Parsing 할 수 있습니다. 이 메서드는 props와 현재 State를 인수로 받으며, 필요한 경우 업데이트된 값이 있는 새 객체를 반환합니다. 그렇지 않으면 null을 반환하여 변경이 없음을 나타낼 수 있습니다.

render()

이 메서드는 Component의 핵심입니다. Component의 구조를 설명하는 JSX(JavaScript XML)를 반환하여 컴포넌트의 UI를 결정합니다. React는 컴포넌트의 State 또는 props가 변경될 때마다 이 메서드를 호출하고 반환된 JSX를 사용하여 Virtual DOM을 업데이트합니다.

componentDidMount()

이 메서드는 Component가 Mount 된 직후(DOM에 삽입된 후) 호출됩니다. API에서 데이터를 가져오거나, 타이머 또는 간격을 설정하거나, 타사 라이브러리와 연동하는 것과 같은 Side Effect를 수행합니다. componentDidMount()는 최초 렌더링 이후에 한 번만 호출된다는 점을 기억하는 것이 중요합니다.

Update 단계

이 단계는 Component의 State 또는 props가 변경될 때 시작됩니다. React는 이러한 변경 사항을 기반으로 UI를 업데이트하는 가장 효율적인 방법을 결정합니다. 

shouldComponentUpdate()

이 메서드는 State 또는 props가 변경될 때 Component가 다시 렌더링 되어야 하는지 여부를 결할 수 있습니다. nextProps와 nextState를 인수로 받으며, 다시 렌더링이 필요한 경우 true를 그렇지 않은 경우 false를 반환합니다. 성능에 영향을 미칠 수 있는 불필요한 리렌더링을 방지하는 데 유용할 수 있습니다.

getDerivedStateFromProps()

이 메서드는 업데이트 단계에서도 사용할 수 있습니다. props가 변경되면 React는 이 메서드를 다시 호출하여 새로운 props를 기반으로 Component의 State를 업데이트할 기회를 제공합니다. 

render()

Component의 State 또는 props가 변경되고 shouldComponentUpdate()가 사용되고 true를 반환하면 React는 render() 메서드를 다시 호출합니다. 이를 통해 Component는 새로운 State 또는 props를 기반으로 업데이트된 JSX를 생성합니다.

componentDidUpdate()

이 메서드는 Component의 State 또는 props의 변경으로 인해 업데이트(또는 리렌더링)된 직후 호출됩니다. 이는 DOM 조작 또는 타사 라이브러리와 연동과 같은 작업을 수행하는 데 유용합니다. componentDidUpdate() 내에서 추가적인 State 변경을 하지 않는 것이 중요합니다. 변경한다면 무한 루프로 이어질 수 있습니다.

Unmount 단계

Unmount 단계는 Component가 DOM에서 제거될 때 발생합니다. 이는 일반적으로 Component의 부모가 다시 렌더링 되고 Component가 더 이상 필요하지 않을 때 발생합니다.

componentWillUnmount()

이 메서드는 Component가 DOM에서 Unmount 되기 직전에 호출됩니다. 타이머 지우기, 이벤트 리스너 제거 또는 진행 중인 네트워크 요청 취소와 같은 정리 작업을 수행하는 곳입니다. 이는 메모리 누수를 방지하고 Component가 올바르게 처리되도록 하는 데 도움을 줄 수 있습니다.

정리

React Component Life Cycle 출처: https://www.geeksforgeeks.org/reactjs-lifecycle-components/

효과적으로 Life Cycle를 사용하는 방법

요구 사항 계획
코드를 작성하기 전에 Component의 Life Cycle 각 단계에서 수행해야 할 작업을 잘 계획해 보세요. 
현명하게 사용
남용하지 말고 의도된 용도로만 사용하고 불필요한 로직으로 Component를 복잡하게 하지 마세요.
일반적인 함정 피하기
특히 State 업데이트를 처리할 때 잠재적인 무한 루프를 조심하세요. 그리고 성능을 고려하여 shouldComponentUpdate를 신중하게 구현하세요. Component가 DOM에 있지 않은 경우 DOM 조작을 피하세요.

마치며

Component의 Life Cycle을 이해하고 효과적으로 활용해 적절한 단계에서 Method를 활용함으로써 Component가 올바르게 초기화되고 Update에 효율적으로 응답하며 사용 후 메모리에서 정리될 수 있게 한다면 성능이 뛰어난 React 애플리케이션을 구축하는 데 큰 도움이 될 거라고 생각합니다.

 

긴 글 읽어주셔서 감사합니다.

 

레퍼런스

React 공식 사이트 - Life Cycle