[React] 리액트의 LifeCycle

 

리액트에는 컴포넌트의 생성과 업데이트에 따라 호출되는 LifeCycle API가 존재합니다.

이러한 LifeCycle API가 언제 어떻게 동작하는지 알면 프로그램을 구현할 때 알맞은 액션을 알맞은 타이밍에 실행시켜줄 수 있습니다.

 

 

컴포넌트 초기 생성

컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API

 

constructor

컴포넌트 생성자 함수로 컴포넌트가 새로 만들어질 때 호출됩니다.

componentWillMount

컴포넌트가 화면에 나타나기 직전 호출되는 API

v16.3 이후로는 사라진 API로 기존에 이 API를 통해 했던 작업은 constructor 또는 componentDidMount에서 처리가 가능합니다.

 

componentDidMount

컴포넌트가 화면에 나타났을 때 호출되는 API로, 주로 DOM을 사용해야 하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통해 ajax 요청을 하거나, DOM 속성을 읽거나 직접 변경하는 작업을 수행합니다.

 - 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL 등

 - DOM 관련 작업: 스크롤 설정, 크기 읽어오기 등

 

 

컴포넌트 업데이트

props의 변화, 그리고 state의 변화에 따라 업데이트 전, 후에 호출되는 API

 

componentWillReceiveProps

이 API는 컴포넌트가 새로운 props를 받게 되었을 때 호출됩니다. 이 안에서는 주로 state가 props에 따라 변하는 로직을 작성합니다.

이 API 또한 v16.3부터 사라집니다.

해당 기능은 상황에 따라 새로운 API 인 getDerivedStateFromProps로 대체될 수 있습니다.

static getDerivedStateFromProps

이 API는 props로 받아온 값을 state에 동기화하는 작업을 수행하는 경우에 사용합니다.

특정 props에 따라 설정할 state값을 return 함으로써 state값을 업데이트할 수 있습니다.

 - 현업에서 Props 값을 사용할 때 Props 값의 변경을 반영하려는 경우에 사용함

shouldComponentUpdate

이 API는 컴포넌트 최적화 작업에 주로 사용됩니다.

리액트에서 렌더링이 일어나면 virtualDOM에 DOM을 새로 그려주는 작업을 수행하는데, 여기서 실제 업데이트된 부분만을 감지해서 DOM에 업데이트해줍니다. 이 작업에서 현재 컴포넌트의 상태가 변경되지 않아도, 부모 컴포넌트가 리 렌더링 되면 자식 컴포넌트도 리 렌더링 됩니다.

이때, 불필요한 리 렌더링이 일어나는 것을 막기 위해 shouldComponentUpdate를 이용합니다.

특정 조건을 두고 false를 반환하면 render() 함수를 호출하지 않습니다.

componentWillUpdate

이 API는 shouldComponentUpdate에서 true를 반환했을 때만 호출됩니다.

주로 애니메이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업을 수행합니다. 이 API가 호출된 다음에 render() 함수가 호출됩니다.

해당 API는 v16.3에서 사라지고, 이 기능은 getSnapshotBeforeUpdate로 대체할 수 있습니다.

getSnapshotBeforeUpdate

render()가 호출된 후, 실제 DOM에 변화가 발생되기 이전에 호출되는 API입니다. 

업데이트 이전의 DOM상태를 가져올 수 있고, 이 API에서 리턴되는 값은 componentDidUpdate에서 3 번째 파라미터로 받아올 수 있습니다.

componentDidUpdate

render()가 호출된 다음에 발생합니다. 파라미터로는 render 되기 이전의 Props와 State 값, getSnapshotBeforeUpdate에서 반환한 snapshot값을 받아옵니다.

 

컴포넌트 제거

컴포넌트가 더 이상 필요하지 않게 되었을 때 호출되는 API

 

componentWillUnmount

등록했던 이벤트를 제거하고, setTimeout을 사용했다면 clearTimeout을 통해 제거합니다.

또한, 외부 라이브러리를 사용했고 해당 라이브러리에 dispose기능이 있다면 이 API에서 호출하면 됩니다.

 

 

+ 컴포넌트 에러 처리

컴포넌트에서 render 시 에러가 발생했을 때, 이를 처리하는 데에 유용한 API가 있습니다.

 

componentDidCatch

컴포넌트에서 에러가 발생하면 componentDidCatch 가 호출되는데, 이 안에서 state.error를 true로 설정하고 이 값에 따라 return 하는 에러 화면을 처리하면 됩니다. 단, 컴포넌트 자신의 render() 메소드가 아닌 자식 컴포넌트의 render() 메소드에서 발생한 에러를 감지하는 것임에 주의해야 합니다.

 

 

 

https://velopert.com/3631

누구든지 하는 리액트 5편: LifeCycle API | VELOPERT.LOG

본 포스팅은 해당 블로그를 통해 공부하고 정리한 내용입니다.