[WIL]항해 99 4주차 회고록

React lifecycle

리액트는 컴포넌트 기반의 뷰를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.

위의 이미지는 리액트의 라이프 사이클을 나타낸 화면이다. 이제 이 각각의 메서드들이 어떠한 역할을 하는지 살펴보도록 하겠다.

💻lifecycle 분류

크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다.

여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.

주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다.

props가 바뀔 때
state가 바뀔 때
부모 컴포넌트가 리렌더링 될 때
force.Update()로 강제로 렌더링을 시도했을때

📃마운트

1. construnctor() : 컴포넌트가 새로 생성될 때마다 호출(생성자 메소드)

2. getDerivedStateFromProps() : state를 갱신하기 위한 메소드, render() 직전에 실행 => 성능 저하 우려가 있어 거의 사용하지 않음

3. componentWillMount(): 컴포넌트가 렌더링되기 전에 호출되는 메소드
   => deprecated됨

4. componentDidMount(): 렌더링이 완료된 후 호출되는 메소드

📃업데이트

1. getDerivedStateFromProps()

2. shouldComponentUpdate() : 컴포넌트 리렌더링 발생 전에 호출되는 렌더링 결정 메소드
   => true 반환 시 작업 계속, false 반환 시 중지

3. render() : 컴포넌트 렌더링 메소드

4. getSnapshotBeforeUpdate() : 컴포넌트 업데이트를 DOM에 반영(리렌더링)하기 바로 직전에 호출되는 메소드

5. componentDidUpdate() : 컴포넌트 업데이트 작업 완료 후 실행되는 메소드

📃마운트 해제

1. componentWillUnmount() : 컴포넌트가 DOM에서 제거될 때 호출되는 메소드

📃오류 처리

1. getDerivedStateFromError() : 자손 컴포넌트에서 에러 발생 시 호출되는 메소드 => 렌더 단계에서 수행, 오류 발생시 UI가 다르게 나타나도록 기능 구현 시 사용

2. componentDidCatch() : 자손 컴포넌트에서 에러 발생 시 호출되는 메소드
   => 렌더링 도중(커밋 단계)에서 수행, 일반적인 오류 탐지에 주로 사용됨
   

React Hooks

위에서 말한 라이프 사이클은 리액트의 클래스형 컴포넌트에서만 사용할 수 있었다. 그러나 리액트 16.8버전 이후 부터 등장한 React Hooks로 라이프 사이클 함수를 대체해 함수형 컴포넌트에서도 라이프사이클을 관리할 수 있게 됐다. 그리고 리액트 공식 매뉴얼에서도 함수형 컴포넌트를 더 권장하는데, 클래스형 컴포넌트를 사용할 때 보다 더 간결한 코드와 로직으로 최적화 할 수 있기 때문이다.

💻useEffect

React Hook에서 라이프사이클 구현에 사용되는 함수

useEffect(() => {
	// 여기에 코드를 적자
})

=> 2번째 파라미터를 주지 않으면 모든 컴포넌트가 리렌더링될 때마다 실행(메모리 과다 사용...)

📃componentDidMount() : 렌더링이 완료된 후 호출되는 메소드

useEffect(() => {
	// 여기에 코드를 적자
}, [])

=> 마운트 이후 1회만 실행

📃componentDidUpdate() & getDerivedStateFromProps() : 컴포넌트 업데이트 작업 완료 후 실행되는 메소드

useEffect(() => {
	// 여기에 코드를 적자
}, [props명, state명, ...])

=> 2번째 파라미터 배열에 명시한 변수가 변경될 때만 실행

📃componentWillUnmount() : 컴포넌트가 DOM에서 제거될 때 호출되는 메소드

useEffect(() => {
	// 여기에 코드를 적자
    
    return () => {
    	// 여기에 unmount나 unsubscribe 코드를 적자
    }
}, [props명, state명, ...])

=> effect(함수 혹은 변수 등)가 필요없어지면 return 함수 실행하여 메모리 반환

(언마운트 혹은 구독 취소 시에 사용)

📂 항해4주차 React개인과제

나만의 단어장 만들기(React 기본주차)
https://github.com/dongyunh/hanghae99_my-dictionary