LifeCycle API

React와 ExtJS 비교해서 이해하기

React의 모든 컴포넌트는 생명주기(LifeCycle)을 가진다. 말 그대로 컴포넌트의 생성부터 소멸까지를 뜻한다. 컴포넌트 기반의 Javascript 개발에서는 생명주기와 연관된 이벤트들의 사용빈도 수가 굉장히 많기 때문에 확실히 공부하고 넘어가는 것이 좋다.

componentDidMount vs afterrender

컴포넌트가 화면에 나타나게 됐을 때 호출 된다고 설명이 되어있다. ExtJS로 치면 화면에 컴포넌트가 렌더링 된 이후이기 때문에 afterrender와 같다고 볼 수 있다. React에서는 주로 외부 라이브러리를 연동하는데 사용, Ajax 통신으로 데이터를 받아오는 용도 또한 DOM의 속성을 읽거나 변경 하는 작업을 진행한다.

getDerivedStateFromProps vs 없음

컴포넌트가 인스턴스화 된 후, 새 props를 받았을 때 호출된다. 값을 리턴해서 state를 변경해준다. (setState 사용 금지)

shouldComponentUpdate vs beforerender?

컴포넌트 업데이트 전에 호출되는 API다. props 또는 state가 변경되면 re-render를 하게 되는데 return 값으로 re-render를 할지 결정 할 수 있다. 성능 최적화를 위해서 많이 사용되어 진다. ExtJS는 태생적으로 Virtual DOM이 없어서 같은 동작을 하진 못하지만 동작되는 방식이 beforerender랑 유사하다.

false 반환 시 re-render 발생안함.

위에서 말하는 re-render는 Virtual DOM에서의 re-render를 뜻한다.

getSnapshotBeforeUpdate vs 없음

DOM이 업데이트 되기 직전에 호출된다. 사용 빈도수가 많은 API는 아니지만 대표적으로 스크롤 위치 값을 고정 시키기 위해서 사용되어 진다.

componentDidUpdate vs 없음

컴포넌트의 업데이트가 완료되면 호출된다. render가 완료된 시점이고, props와 state의 값도 바뀌어 있다. 인자값으로 전의 props와 state가 존재해서 현재 값과 전의 값을 비교해서 처리해야하는 로직이 있다면 처리 할 수 있다. 또한 이미 render가 완료된 상태이기 때문에 DOM을 조작 할 수 있다.

componentWillUnmount vs destroy

컴포넌트가 소멸되는 시점(DOM에서 제거)에 실행되는 API다. 등록되었던 이벤트나 타이머 또는 외부 라이브러리를 제거하기에 적합한 곳이다. ExtJS에 destroy와 같은 역할을 한다고 보면 된다.

componentDidCatch vs 없음

컴포넌트의 오류 처리를 위해 만들어진 API다. 에러 발생 시 state 값을 변경해주고 render에서 처리해주는 방식이다. 주의 해야하는 부분은 자식 컴포넌트에서 발생하는 에러만 잡아낼 수 있고, 자기자신의 에러는 잡을 수 없다.

처음 글을 작성할 때는 ExtJS와 비교하며 LifeCycle을 이해하려 했지만 Virtual DOM의 유무 차이로 인해 비교할 수 있는 메소드가 거의 없다는게 안타깝다. 그래도 React를 이해하는데 있어서 무엇이 있고 없는지 확실히 구분할 수 있어서 도움이 된다.