Weekly I Learned Week04
👊 라이프사이클
- 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리
- 각각의 컴포넌트에는 라이프 사이클(생명 주기)라는 것이 있다.
컴포넌트의 수명은 페이지에서 렌더딩 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때까지를 의미한다
라이프 사이클은 총 9개가 존재한다. 이를 크게 세가지 유형으로 나눌 수 있는 데 생성 될 때, 업데이트(수정 될 때), 제거 될 때이다. 이것을 리액트에서는 마운트, 업데이트, 언마운트라고 부른다.
여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.
⚡주의하여 볼 것은 업데이트 부분
업데이트는 다음과 같은 4가지 상황에서 발생한다.
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때
⚡라이프사이클(클래스형 vs 함수형)
리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다.
이제 클래스형은 사용하지 않는다고 리액트에서 공식 발표를 했다고 한다.
함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것
👉 클래스형 라이프사이클
- render() 메소드와 Component 상속 필수
state, props 사용이 불편하고, 많은 메모리 사용한다는 단점이 있다.
👉 함수형 라이프사이클
- 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용
- state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용👊 라이프 사이클 메서드 살펴보기
👉 constructor
자바 같은 언어를 써봤다면 들어봤을 만한 constructor(생성자)이다.
이것은 자바와 마찬가지로 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에서는 초기 state를 정할 수 있다.
클래스형에서는 초기 state를 정할 때 constructor를 사용해야한다.
하지만 훅에서는 useState hook을 사용하면 초기 상태를 쉽게 설정해줄 수 있다.
👉 getDerivedStateFromProps
props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출된다.
getDerivedStateFromProps Hooks 사용 예: React
👉 shouldComponentUpdate
props나 state를 변경했을 때, 리렌더링을 할지 말지 결정하는 메서드이다.
이 메서드에서는 반드시 true나 false를 반환해야한다. 이 메서드는 오직 성능 최적화만을 위한 것이며 렌더링 목적을 방지하는 목적으로 사용하게된다면 버그로 이어질 수 있다.
클래스형도 보통은 PureComponent를 추천한다고 하고 Hooks 에서도 props는 React.memo, state는 useMemo를 활용하면 렌더링 성능을 개선할 수 있다고 한다.
👉 render
가장 기초적인 메서드이기도하고 가장 중요한 메서드이기도 하다.
컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드이기도 하다. 함수형 컴포넌트에서는 render를 안쓰고 컴포넌트를 렌더링할 수 있다.
👉 getSnapshotBeforeUpdate
render에서 만들어진 결과가 브라우저에 실제로 반영되기 직전에 호출된다.
공식문서의 말을 따보자면 이 메서드에 대한 사용 예는 흔하지 않지만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있다고한다.
함수형에서는 아직 이 기능을 대체할만한 hook이 없다고 한다.
참고자료: velopert님의 lifecycle 페이지
👉 componentDidMount
컴포넌트를 만들고 첫 렌더링을 마친 후 실행한다. 함수형 Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다.
여기서 useEffect의 [] 의존성 배열을 비워야지만 똑같은 메소드를 구현할 수 있다.
참고자료: React
👉 ComponentDidUpdate
리렌더링을 완료한 후 실행한다.
업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방하다.
👉 componentWillUnmount
컴포넌트를 DOM에서 제거할 때 실행한다.
componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다. 함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현할 수 있다.
👉 componentDidCatch
컴포넌트 렌더링 도중에 에러가 발생 했을 때 애플리케이션이 멈추지 않고 오류 UI를 보여줄 수 있게 해준다.
출처: Kyun2da.dev
