라이프 사이클이란?
'Component'가 웹 페이지에 들어갔다가 사라지기까지의 한 과정을 '라이프 사이클(Life Cycle)'이라고 한다. Life Cycle을 이해하기 위해서는 '가상 돔(Virtual DOM)'에 관한 학습이 선행되어야 한다.
'DOM(Document Object Model)'은 html 단위 하나하나를 객체로 생각하는 모델이었다. 가령 'div'라는 객체는 하위의 특정 값을 갖고 있을 것이고, 이러한 맥락을 통해서 "DOM은 트리구조이다."라는 결론을 내린 바 있다.
'DOM'의 트리 중 하나가 수정될 때마다 모든 'DOM'을 살펴보는 것은 매우 비효율적이다. 필요없는 연산이 너무 많이 일어나기 때문이다. 문제점에 대한 개선책으로서 등장하게 된 개념이 바로 '가상 돔(Virtual DOM)'이다. Virtual DOM은 메모리 상에서 돌아가는, 문자 그대로 '가상의(가짜)' DOM이다.
강의만으로는 이해가 잘 되지 않아 구글링을 통해 추가적으로 학습했다.
기본적인 DOM 트리구조에 대한 도표이다.
웹 브라우저에서 특정 부분이 변경되면, 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 하는 방식을 취하는 것이 아니라, Virtual DOM에서 요청 사항에 대해서 수정하는 과정을 처리하고, 최종적으로 바뀐 부분만 실제 DOM에 적용한다.
그림을 그릴 때 마음에 들지 않는다고 '도화지 자체'를 찢어버리는 것이 아니라, 지우개로 수정이 필요한 부분만 지워내고 다시 그리는 방식과 유사한 개념이다. 마음에 드는 부분까지 다시 그려내야 하는 불필요한 과정을 굳이 겪지 않아도 되는 것이다. 너무 좋은 비유이다. 해당 글을 참고했다.
https://devbirdfeet.tistory.com/219
이러한 Virtual DOM의 개념을 전제로 Life Cycle을 이해해야 한다. 'React 공식문서'에서는 Life Cycle의 매커니즘을 다음과 같은 이미지로 설명하고 있다.
강의에서 설명은 들었지만, 역시나 추상적인 개념은 잘 와닿지 않는다. "아~ 이런거구나!"하고 넘어갔다.
라이프 사이클 함수로 보는 라이프 사이클
사실 React에는 두 종류의 Component가 존재한다. 'class형 Component'와 '함수형 Component'가 바로 그것이다. React는 더이상 'class형 Component'를 쓰지 말고 '함수형 Component'를 사용할 것을 선언한 바 있다.
그런데 오늘 공부한 'Life Cycle method'는 'class형 Component'에서만 사용하는 method이다. 'Life Cycle method'는 Component의 생애주기를 적나라하게 보여주는 method이다. '함수형 Component'에는 'React Hooks'이라는 개념이 존재하지만, 생애주기를 일목요연하게 확인하는데 여러 제한 사항들이 존재한다. 따라서 Life Cycle을 이해하겠다는 분명한 목적 하에서, 특별히 class형 component에서만 사용하는 'Life Cycle method'를 공부했다.
해당 이미지는 강의에서 제공한 소스코드를 실행했을 때 현출되는 view이다. 버튼을 눌렀을 때 내부에서 작동하는 방식을 확인함으로써 LifeCycle을 이해했다.
이름이 변경되며 콘솔에 무언가 찍혔다.
constructor()
constructor는 생성자 함수라고 부른다. componenet가 생성되면 가장 먼저 호출되는 함수이다.
부모 component인 'React.Component'로부터 'LifecycleEx'가 확장해온 것을 먼저 확인할 수 있다. this.state를 통해 나 자신의 데이터를 초기화 했다. 이후 constructor에 들어왔다는 문구를 콘솔로 찍어주고 있다.
render()
이후 render를 살펴봤다. 생성된 component 내용이 render에 들어왔다는 것은, DOM에 해당 component를 붙일 것이라는 뜻이다. DOM은 return문 이하의 내용이 되겠다. (강의에서는 이렇게 설명하는데 무슨 말인지 하나도 이해를 못 했다.)
componentDidMount()
component가 화면에 나타나는 것을 'Mount'한다고 표현한다. 따라서 didMount()는 mount가 완료되었다는 것을 의미한다.(=DOM에 완벽하게 올라갔다는 것을 의미한다.) 해당 함수는 첫 번째 렌더링을 마친 후에만 딱 한 번 실행된다. component가 re-rendering할 때에는 실행되지 않는다.
Virtual DOM이 실제 DOM으로 올라간 후에 실행되는 LifeCycle method인 것이다.
componentDidUpdate(prevProps, prevState, snapshot)
패스
componentWillUnmount()
패스
나중에 다시 볼 전체 코드
회고
인내심을 갖고 강의는 모두 들었으나 나의 언어로 정리가 되지 않는다. Virtual DOM이니 rendering이니 솔직히 이해가 안 됐는데 이해한 척하는 것 같아서, 잠시 미뤄두고 차후에 재학습하는 것이 더 솔직한 공부라고 판단했다.
앞으로 component나 css, state 관리 등 구체적인 내용들을 학습하다 보면 오늘 배운 내용도 당연하게 이해되는 그날이 올 것이라고 굳게 믿고 과감하게 넘어가겠다. 지속성이 최고의 가치다. 내일도 화이팅!
