리액트를 다루는 기술, 컴포넌트의 라이프사이클 메서드

프론트엔드/리액트를 다루는 기술

Hyeon_E 2023. 6. 20. 00:35

모든 리액트 컴포넌트에는 라이플사이클(수명 주기)이 존재함

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남

컴포넌트를 처음으로 렌더링 할때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트 하기 전후로 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지할 수도 있음. 이럴때 컴포넌트의 라이프사이클 메서드를 사용

라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있음

함수형 컴포넌트에서는 사용할 수 없지만 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있음

라이프사이클 메서드의 종류는 총 9가지

Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드

Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드

이 메서드들은 컴포넌트 클래스에서 덮어 써 선언함으로 사용할 수 있음

라이프사이클은 마운트, 업데이트, 언마운트 카테고리로 나눔

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)라고 함

마운트할 때 호출되는 메서드

업데이트

컴포넌트는 다음과 같은 총 네가지 경우에 업데이트 함

props가 바뀔 때: 부모 컴포넌트가 넘겨주는 props가 바뀔 때 컴포넌트에 전달하는 props 값이 바뀌면 컴포넌트 렌더링이 됨
state가 바뀔 때: 컴포넌트 자신이 들고 있는 state가 setState를 통해 업데이트 될때 렌더링이 됨
부모 컴포넌트가 리렌더링될 때: 자신에게 할당된 props나 자신이 들고 있는 state가 바뀌지 않아도 부모 컴포넌트가 리렌더링 되면서 자식 컴포넌트 또한 리렌더링 됨
this.forceUpdate로 강제로 렌더링을 트리거할 때

이렇게 컴포넌트를 업데이트할 때는 다음 메서드를 호출함

업데이트할 때 호출하는 메서드

업데이트를 발생시키는 요인(props 변경, state 변경, 부모 컴포넌트 리렌더링)
getDerivedStateFromProps: 이 메서드는 마운트 과정에서도 호출되며 업데이트가 시작하기 전에도 호출됨
- props 변화에 따라 state 값에도 변화를 주고 싶을때 사용
shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드
- 이 메서드에서는 true 혹은 false 값을 반환해야 하며 true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고(render호출) false를 반환하면 작업을 중지함(작업 취소). 즉, 컴포넌트가 리렌더링 되지 않음.
- 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출함
render: 컴포넌트를 리렌더링함
getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
웹 브라우저상의 실제 DOM 변화
componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

언마운트

마운트의 반대 과정. 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 함

언마운트할 때 호출하는 메서드

라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드임

이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용함

추가로 컴포넌트 업데이트 성능을 개선할 때는 shuldComponentUpdate가 중요하게 사용됨

서드파티란?

프로그래밍을 도와주는 플러그인이나 라이브러리, 프레임워크 등을 만드는 회사를 뜻함

플러그인, 라이브러리, 프레임워크는 공통적으로 개발하는 것을 도와준다는 의미가 있음

좀더 편하고 효율적으로 개발할수 있도록 도와주는 거임

따라서 프로그래밍개발과 개발자 사이에 플러그인, 라이브러리, 프레임워크 등을 서드파티라고 하고 이를 만드는 회사를 서드파티라고 하기도 함. 즉 제 3자가 중간다리 역할로서 도움을 주는 것이 서드파티