리액트 컴포넌트 생명주기(LifeCycle)
리액트에서의 라이프 사이클은 컴포넌트의 생성, 업데이트, 소멸 과정을 의미한다. 주로 클래스형 컴포넌트에서 특정한 라이프 사이클 메서드를 사용하여 각 단계에서 원하는 작업을 수행하며, 함수형 컴포넌트에서는 리액트 훅(Hook)을 통해 비슷한 작업을 수행할 수 있다.
라이프 사이클을 이해하면, 컴포넌트가 언제 어떤 작업을 수행하는지 파악할 수 있다. 예를 들어, 컴포넌트가 화면에 나타나기 전에 초기화 작업을 수행하거나, 화면이 업데이트되기 전에 상태를 확인하고 업데이트 여부를 결정할 수 있다.
라이프 사이클을 이해하고 활용하여 성능을 향상시키고 애플리케이션의 동작을 예측 가능하게 만들 수 있다.
리액트의 라이프 사이클은 크게 세 가지로 나뉜다!
- 컴포넌트가 실제 DOM에 삽입되는 것을 마운트
- 컴포넌트가 변하는 것을 업데이트
- 컴포넌트가 DOM 상에서 제거되는 것을 언마운트
클래스형 컴포넌트 Life Cycle
컴포넌트가 로딩되기 시작하는 마운트(생성)
컴포넌트 인스턴스가 생성되어 DOM 상에 삽입될 때 순서대로 호출되는 메서드
constructor()클래스 생성자- 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
- 초기값을 설정할때 주로 사용
- 실제 로딩이 이루어지는
render()- constructor()에서 정의한 초기 상태(state) 값에 접근
- 클래스형 컴포넌트에서 컴포넌트를 화면에 렌더링하는 메서드
- 처음 로딩이 끝난 뒤에 수행되는
componentDidMount()- 렌더링 이후 컴포넌트를 DOM 트리에 삽입(마운트)
- 외부 라이브러리 연동, 화면의 렌더가 이루어질때 백엔드로부터 axios나 fetch 등으로 데이터를 주고받을때 사용
컴포넌트의 업데이트(데이터 변화감지)
props 또는 state가 변경되면 갱신이 발생되며 순서대로 호출되는 메서드
- 데이터가 변경이 되었으니 다시
render()- 사용자가 화면에 다시 새롭게 보여주는 것
- 변경이 완료된 이후 수행되는
componentDidUpdate()- 전달받은 props 값의 변화가 발생하거나 리 렌더링이 발생을 하는 경우 수행
- 컴포넌트 내에서 state의 값이 변하는 경우 수행
컴포넌트의 삭제, 언마운트(컴포넌트가 사라질 때)
컴포넌트가 DOM 상에서 제거될 때에 호출되는 메서드
componentWillUnmound()- 컴포넌트가 마운트 해제되어 제거되지 직전에 호출되는 메서드
- ex. 로그아웃, 브라우저 닫기 전 캐시 삭제 등
클래스형 컴포넌트의 단점
클래스형 컴포넌트의 주요 단점은 복잡성, 번거로움, 성능 저하이다. 클래스형 컴포넌트는 상태 관리와 라이프 사이클 메서드를 위해 추가적인 코드를 작성해야 하며, 이로 인해 코드가 더 복잡해지고 이해하기 어려워진다.
또한, 라이프 사이클 메서드를 제대로 이해하고 사용하기 위해서는 학습 곡선이 높고 실수를 유발할 가능성이 있다. 성능 면에서도 함수형 컴포넌트에 비해 덜 효율적일 수 있다.
함수형 컴포넌트 Life Cycle
함수형 컴포넌트에서 라이프 사이클은 주로 useEffect() 훅을 사용하여 다룹니다. 리액트 16.8 버전부터 도입된 Hooks는 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 해주는 강력한 기능이다. Hooks를 사용하면 클래스형 컴포넌트의 불필요한 복잡성을 줄이고 함수형 컴포넌트에서도 동일한 기능을 구현할 수 있다.
useEffect()를 사용해 클래스 컴포넌트 라이프 사이클 처럼 구현 가능- 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅으로, 클래스형 컴포넌트의
componentDidMount와componentDidUpdate,componentWillUnmount처럼 사용이 가능하다
- 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅으로, 클래스형 컴포넌트의
마운트
- useEffect() 훅 내에서 두 번째 파라미터로 빈 배열(
[])을 전달하면 컴포넌트가 마운트될 때 한 번만 실행되는 효과를 낼 수 있다
업데이트
- useEffect() 훅 내에서 두 번째 파라미터로 의존성 배열을 전달하여 특정 props 또는 state가 변경될 때마다 실행되는 작업을 정의할 수 있다
언마운트
- useEffect() 훅 내에서 반환된 클린업 함수를 사용하여 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있다
참고: 클래스 컴포넌트 생명주기
참고: 링크텍스트
참고: 리액트 Hook
React 공식문서: 컴포넌트 생명주기
React 공식문서: 리액트 Hook
