(React) 리액트의 생명주기

Dragon·2024년 2월 25일

React 스프린트프론트엔드4기 취업까지달린다 코드잇스프린트

위클리 페이퍼

목록 보기

14/18

Life Cycle

기본적으로 리액트의 컴포넌트는 생성되고, 업데이트되며, 제거되는 일련의 생명주기를 가지게 된다. 그리고 리액트는 다음과 같은 주요 생명주기 메서드를 가진다.

Mounting

처음 컴포넌트가 생성되는 것을 의미한다.

constructor 메서드 : 컴포넌가 생성되면 가장 먼저 실행되는 메서드로, state 를 초기화하거나, props 에 접근해 값을 할당하는 등의 작업이 가능하다.
getDerivedStateFromProps 메서드 : props 로 받아온 것을 state 에 설정하고 싶은 경우 사용하며, 특정 객체를 반환하면 해당 객체의 값이 state 로 갱신되고 null 을 반환하면 아무것도 갱신하지 않는다.
render 메서드 : 컴포넌트를 렌더링 해주는 기능을 한다. render 를 통해 리액트는 화면에 표시될 jsx 를 파악하고, 이를 근거로 DOM 을 업데이트한다.
componentDidMount 메서드 : 컴포넌트가 마운트되고 첫번째 렌더링이 된 직후에 호출되는 메서드이다. 여기서는 주로 Ajax 요청을 하거나, DOM 속성을 읽거나 변경하는 작업을 수행한다.

Updating

새로운 prop 을 받거나, state 가 변경 등의 이유로 컴포넌트의 내용이 변경되는 것을 의미한다.

getDerivedStateFromProps 메서드 : 마운팅 때와 동일하게 render 이전에 실행되어 prop 로 받아온 것을 state 에 설정할 때 이용된다.
shouldComponentUpdate 메서드 : 컴포넌트를 새로 렌더링 해야 하는지를 결정하는 메서드이다. 기본값이 true 이기 때문에 false 로 설정하면 렌더링이 취소되며, 성능 최적화를 위해 사용된다.
render 메서드 : 마운팅 때와 동일하게 컴포넌트를 렌더링하는 기능을 수행한다.
getSnapshotBeforeUpdate 메서드 : 리렌더링된 내용이 DOM 에 적용되기 전에 실행되는 메서드로, 이를 통해 DOM 상태가 변경되기 전의 값을 반환하여 componentDidUpdate 메서드에서 사용이 가능하다.
componentDidUpdate 메서드 : 리렌더링을 통해 DOM 이 변경된 직후에 호출되는 메서드로, UI 업데이트 이후의 작업을 수행하기에 적합하다.

Unmounting

컴포넌트가 화면에서 제거되는 것을 의미한다.

componentWillUnmount 메서드 : 컴포넌트가 사라지기 직전에 호출하고, 여기서는 주로 DOM 에 등록했던 이벤트를 제거하는 등 Side Effect 를 정리하는 작업을 수행한다.

useEffect

위와 같은 리액트의 라이프 사이클 메서드는 클래스 컴포넌트에서 사용이 가능하고, 함수형 컴포넌트에서는 useEffect 를 사용하여 비슷하게 이를 구현한다.

useEffect(() => {
  	node.addEventListener('click', EventHandler); // call-back func
  	return (
    	node.removeEventListener('click', EventHandler); // clean-up func
    )
}, [state1, state2, ...]) // dependency array

Mounting

componentDidMount 와 동일한 기능을 한다.
예시에서는 렌더링이 끝난 뒤 node.addEventListener('click', EventHandler) 가 수행된다.

Updating

부모요소가 재렌더링 되는 경우, 컴포넌트의 state 가 변경되는 경우 Updating 이 이루어지는데, 기본적으로는 componentDidUpdate 와 동일한 기능을 하지만 dependency array 에 따라 다르게 동작한다.

dependency array 가 주어지지 않은 경우 : 매 update 마다 실행되며, 예시에서는 렌더링 이후에 node.removeEventListener('click', EventHandler) 를 수행한 뒤 node.addEventListener('click', EventHandler) 가 수행된다.
dependency array 가 주어진 경우 : update가 되어도 dependency array 의 요소가 하나라도 변경된 경우에만 실행되며, 빈 배열로 dependency array 가 주어지면 update 시에 아예 실행되지 않는다.