Writing Subject :

함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해서 설명해 주세요

리액트의 컴포넌트 라이프 사이클 (생명주기)가 크게 세단계로 나뉨은 익히 알려진 사실이다

마운트 / 업데이트 / 언마운트

각 단계에서 역할에 따라 다른 메서드들을 호출하여 생명 주기를 관리하는데

1.마운트(Mounting)

constructor

컴포넌트 인스턴스가 생성될 때 호출되는 메서드로, 초기 state를 설정하거나 이벤트 핸들러를 바인딩하는데 사용됨.

getDerivedStateFromProps

props로부터 state를 업데이트하는데 사용됨.

render

UI를 렌더링하는 메서드.

componentDidMount

컴포넌트가 DOM에 마운트된 직후에 호출. AJAX 요청, DOM 조작, 이벤트 리스너 추가 등의 작업을 이곳에서 수행.

2.업데이트(Updating)

getDerivedStateFromProps

동일하게 props로부터 state를 업데이트하는데 사용됨.

shouldComponentUpdate

컴포넌트가 리렌더링 될 필요가 있는지 판단하는데 사용. 성능 최적화에 유용.

render

UI를 재렌더링.

getSnapshotBeforeUpdate

DOM 업데이트가 일어나기 직전의 DOM 상태를 캡쳐하는데 사용됨.

componentDidUpdate

컴포넌트가 업데이트된 후에 호출. 이전 props나 state를 사용하여 특정 조건에 따른 로직을 실행하거나 DOM의 업데이트 후 작업을 수행하는데 사용.

3.언마운트(Unmounting)

componentWillUnmount

컴포넌트가 DOM에서 제거되기 전에 호출. 이벤트 리스너 제거, 타이머 정리, 취소된 네트워크 요청 등의 클린업 작업을 이곳에서 수행.

하지만 이것은 클래스 컴포넌트 기반의 생명주기 메서드에 대한 내용이다.

최근의 트렌드는 더이상 클래스 컴포넌트 기반의 프론트엔드 프로그래밍을 하지 않는 방향으로 흘러가고 있는것이 사실.

함수형 컴포넌트: 전통적인 클래스 컴포넌트는 this 바인딩, 생성자, 생명주기 메서드 등 많은 부분을 관리해야 했습니다. 반면 함수형 컴포넌트는 단순히 props를 받아서 렌더링 결과를 반환하는 순수 함수입니다. 이렇게 되면 코드가 간결해지며, 함수형 프로그래밍의 이점을 취할 수 있습니다.

그렇다면 최근의 함수 컴포넌트에서는 어떻게 생명주기 기능을 구현하는가?

Hooks

기본적으로 함수형 컴포넌트는 자체적으로 상태나 생명주기 메서드에 접근할 수 없다.
이러한 제한을 해결하기 위해 도입된 것이 Hooks.