TIL #2 - React Life Cycle (생명 주기)
📌 오늘 공부 내용
🔱 리액트 라이프 사이클
📜 목표
- 리액트 라이프 사이클에 대해 이해한다.
- 어떠한 메서드들이 있는지 알아둘 것
- 이 개념이 왜 중요한 지에 대해 안다.
🗨️ 라이프 사이클이란?
단어의 뜻으로 유추해봐도 알 듯이 어떠한 것의 태어나고 죽는 그 과정을 말한다는 것을 얼핏 알 수 있다.
그러면 이 용어가 리액트에서 어떻게 사용 되는걸까?
리액트는 컴포넌트 단위로 개발을 진행한다. 클래스형 컴포넌트, 함수 컴포넌트를 사용하게 되는데
컴포넌트들은 자신만의 생명주기를 가지고 태어나고 소멸하게 된다.
이 각 컴포넌트의 라이프 사이클을 이해하고 다루는 것은 개발을 진행함에 있어 매우 중요하다.
그러기 위해서는 컴포넌트 생명주기에 관여하는 대표적인 메서드들에 대한 이해가 필요하다.
먼저 설명할 메서드들은 클래스형 컴포넌트에서만 동작한다.
함수 컴포넌트에 대해서는 뒤에서 설명해보겠다.
생명주기 메서드들은 크게 마운트, 업데이트, 언마운트 이 세 가지로 구분해서 사용된다.
마운트
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
업데이트
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
언마운트
- componentWillUnmount
이렇게 나누어지게 되며, 각 단계에 맞는 메서드들이 사용된다.
사실 해당 메서드들은 사용 할 일이 많지 않은 메소드들이다.
그러니 너무 모두 외우려고 하기보다는 이 맥락을 이해하는데 더 집중해보겠다.
✔️ 마운트
constructor
- 생성자
- 컴포넌트가 생성되면 가장 먼저 실행되는 메서드이다.
- 초기 state 값을 정할 수 있다.
getDerivedStateFromProps(nextProps, prevState)
- props로 받아 온 값을 state에 동기화시켜줄 때 사용한다.
- 최초 마운트, 업데이트 될때 render 메서드를 호출하기 직전에 호출된다.
render
- JSX를 렌더링
- 컴포넌트를 렌더링 할 때 필수적인 메서드이다. (클래스형 컴포넌트)
- 데이터를 가공해서 보여주기
componentDidMount
- 이 메서드가 호출된 시점에선 UI가 화면에 나타난 상태
- 컴포넌트의 첫 번째 렌더링이 끝나게 되며 호출되는 메서드이다.
✔️ 업데이트
❓ 컴포넌트는 언제 업데이트 될까?
- props가 변경될 때
- state가 변경될 때
- 부모 컴포넌트가 리렌더링될 때
위 경우에 해당되면 라이프사이클의 업데이트 메서드들이 호출 된다.
getDerivedStateFromProps(nextProps, prevState)
- 마운트 때 와 동일하다.
- props나 state값이 갱신되면 이 메서드가 불린다.
shouldComponentUpdate
- 컴포넌트가 리렌더링을 해야할지 말아야할 지를 결정하는 메서드이다.
- 반드시 true || false 만을 반환해야 한다.
render
- 마운트 때와 같다.
- 이때의 렌더링은 리렌더링이다.
getSnapshotBeforeUpdate
- 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져온다.
- 특정 값을 반환하게 되면 componentDidUpdate 메서드의 3번째 파라미터 값으로 전달된다.
componentDidUpdate
- 리렌더링이 완료된 이후 호출.
- 이 시점의 화면은 변화가 모두 반영되어 나타나게 된다.
- getSnapshotBeforeUpdate 메서드와도 연관되어 세번째 파라미터로 반환된 값을 전달 받을 수있다.
✔️ 언마운트
componentWillUnmount
- 컴포넌트가 Web broswer에서 사라지기 전에 호출 된다.
- 컴포넌트에 할당해 두었던 setInterval이나 다른 이벤트들을 이 단계에서 제거해야 한다.
여기까지가 클래스형 컴포넌트의 라이프 사이클이다.
함수 컴포넌트의 라이프 사이클
함수 컴포넌트 라이프 사이클은 클래스형 컴포넌트 라이프 사이클 메서드와 비교해보면서 설명해보겠다.
우선 constuctor은 함수 컴포넌트 내부가 실행되는 것과 같다.
render 은 return이 같은 역할을 해준다.
특이한 점은 useEffect hook 이 클래스형 컴포넌트에서 있었던 여러 메서드들의 역할을 한꺼번에 해준다는 점이다.
useEffect 는
- componentDidMount - 마운트
- componentDidUpdate - 업데이트
- componentWillUnmount - 언마운트
위 세가지 메서드의 역할을 수행한다.
함수 컴포넌트에서의 라이프 사이클을 나타내보자면
- 함수 컴포넌트 호출
- 함수 컴포넌트의 내부 실행
- return() 실행, 자식 컴포넌트 실행 및 화면 렌더링
- useEffect() 실행 (마운트, 업데이트, 언마운트)
이 되겠다.
클래스형 컴포넌트에 비해서 확실히 간결해졌죠? 여기에는 React Hooks 의 역할이 크다고 생각합니다.
실제로 React Hooks를 이용한 개발을 권장하는 정도이니까요.
👨💻 마무리
우선 이 개념이 왜 중요한지에 대한 것이 가장 궁금했다.
학습을 하다보니 라이프 사이클에 대한 이해가 되어야 렌더링, 리렌더링에 알맞은 메서드들을 알맞게 사용하고 불필요한 렌더링도 막을 수 있겠다 느꼈다.
함수 컴포넌트의 메서드들은 익숙하지만, 클래스형 컴포넌트의 라이프 사이클 메서드들은 사용해 본 적이 없는 메서드들이라 새로운 느낌이였다.
이렇게 두 개의 컴포넌트에 따라 라이프사이클에 사용되는 메서드들이 다르다는 것을 알게 되었고, 라이프 사이클 자체에 대해 공부해보는 것도 처음인 것 같은데 이 맥락에 대해 깊게 이해하고 싶다는 생각이 든다.
리액트의 여러 개념들 중에서도 중요한 개념중 하나로 꼽히는 만큼 충분히 숙지해야겠다.
'성장기록 > TIL' 카테고리의 다른 글
| TIL #6 - SSR과 CSR (1) | 2023.01.09 |
|---|---|
| TIL #5 - fork 한 레포지토리 잔디 심기 (0) | 2023.01.08 |
| TIL #4 - CSS-in-JS 란? (0) | 2023.01.07 |
| TIL #3 - 함수형 프로그래밍이란? (0) | 2023.01.05 |
| TIL #1 - 자바스크립트 이터러블/이터레이터 프로토콜 (0) | 2023.01.02 |