본문 바로가기

기술면접

25_라이프사이클 메소드에 대해 설명해주세요.

라이프사이클 메소드는 컴포넌트가 생성될 때나, 업데이트될 때, 혹은 제거될 때 특정한 시점에 호출되는 메소드들을 가리킵니다. 이러한 라이프사이클 메소드들은 개발자가 컴포넌트의 동작을 제어하고 상태 변화를 감지하고 반응할 수 있도록 합니다.

리액트 16.3 버전부터는 라이프사이클 메소드의 사용이 조금 바뀌었는데, 이전에는 클래스형 컴포넌트에서만 사용할 수 있었지만, 함수형 컴포넌트에서도 사용할 수 있도록 도입되었습니다. 클래스형 컴포넌트와 함수형 컴포넌트 각각에서 사용되는 라이프사이클 메소드가 다르기 때문에, 각각에 대해 간단히 설명하겠습니다.


✅클래스형 컴포넌트의 주요 라이프사이클 메소드:
componentDidMount(): 컴포넌트가 화면에 렌더링된 후 호출됩니다. 주로 초기화 작업이나 외부 데이터 불러오기 등의 작업에 사용됩니다.
1️⃣ componentDidUpdate(prevProps, prevState): 컴포넌트가 업데이트되고 난 후 호출됩니다. 이전의 props나 state와 현재의 props나 state를 비교하여 업데이트 이후에 추가적인 작업을 수행할 수 있습니다.

2️⃣ componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출됩니다. 여기에서는 리소스 해제나 이벤트 리스너 제거 등의 정리 작업을 수행합니다.

함수형 컴포넌트의 주요 라이프사이클 메소드:
1️⃣ useEffect(): 함수형 컴포넌트에서 라이프사이클 메소드를 대신하는 훅입니다. useEffect() 훅 안에 전달된 함수는 컴포넌트가 화면에 렌더링된 후, 혹은 업데이트된 후에 호출됩니다. 클래스형 컴포넌트의 componentDidMount()와 componentDidUpdate()를 대체할 수 있습니다.

1️⃣ useEffect()의 cleanup 함수: useEffect() 훅 안에 반환된 함수는 컴포넌트가 언마운트되거나 재렌더링되기 직전에 호출됩니다. 이것은 클래스형 컴포넌트의 componentWillUnmount()와 같은 역할을 합니다.

이러한 라이프사이클 메소드들은 컴포넌트의 동작을 제어하고 효율적으로 관리하기 위해 중요한 역할을 합니다. 이들을 올바르게 이해하고 활용함으로써 리액트 애플리케이션의 개발과 유지보수를 보다 효율적으로 할 수 있습니다.