React lifecycle, useEffect, react mount

이번 포스팅에서는 리액트 라이프 사이클에 대해서 공부하고, 함수형 프로그래밍과 클래스형 프로그래밍에서 각각 어떻게 사용하는지 익혀보겠습니다. 

리액트 라이프사이클

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

라이프사이클의 분류

생성될 때 = 마운트

 

업데이트할 때 = 업데이트

1. props 가 바뀔 때

2. state 가 바뀔 때

3. 부모 컴포넌트가 리랜더링  될 때

4. this.forceUpdate로 강제로 랜더링을 트리거 할 때 

 

제거할 때 = 언마운트

---

함수형 라이프 사이클 구현

useEffect

2번째 인자에 아무것도 없을 때, 실행되는 시점

1) 컴포넌트가 마운트 된 후

2) 컴포넌트가 업데이트되고 난 후

3) 컴포넌트가 언마운트 되기 전

 

2번째 인자에 빈 배열을 넣었을 때 실행되는 시점

1) 컴포넌트가 마운트 된 후

 

clean-up 함수로 사용

컴포넌트가 Unmount될 때 정리하거나 unscribe 해야할 것이 있다면 useEffect의 return 값으로 전달

useEffect(()=>{
	console.log("");     
    return(() => exampleAPI.unsubscribe());
})

 

2번째 인자 배열에 값들을 넣었을 때 실행되는 시점

1) 컴포넌트가 마운트 된 후

2) 2번째 배열에 명시한 변수가 변경될 때 실행

 

클래스형 라이프 사이클 구현

<요약>

• componentDidMount() 는 최초로 컴포넌트 객체가 생성될 때 한 번 수행
• componentDidUpdate() 는 컴포넌트의 속성 값 또는 상태값이 변경되면 호출
• componentWillUnmount() 는 이 컴포넌트가 소멸될 때 호출
• render() 는 초기에 화면에 그려줄 때, 그리고 업데이트가 될 때 호출

 

1. constructor

초기 state 설정

 

2. getDerivedStateFormProps

props로 받아온 값을 state에 동기화 시키는 용도로 사용

 

3. shouldcomponentUpdate
props나 state를 변경했을 때 리랜더링 여부를 결정하는 매서드 

-> pureComponent로 사용하는 게 좋다. 

-> hooks 에서는 React.memo(Porps) useMemo(state)사용 

 

4. render

컴포넌트를 렌더링 할 때 필요한 메서드

 

5. getSnapshotBeforeUpdate
이 메서드는 render에서 만들어진 결과가 브라우저에 실제로 반영되기 직전에 호출된다. 공식문서의 말을 따보자면 이 메서드에 대한 사용 예는 흔하지 않지만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해볼 수 있다고한다.

 

6. componentDidMount

이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행한다. 함수형 Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다.

 

7. componentDidUpdate
이것은 리렌더링을 완료한 후 실행한다. 업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방하다.

 

8. componentWillUnmout

이 메서드는 컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다. 함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현할 수 있다.

9.componentDidCatch

마지막으로 맨 위의 사진에는 보이지 않지만 componentDidCatch라는 메서드가 존재한다. 이 메서드는 컴포넌트 렌더링 도중에 에러가 발생 했을 때 애플리케이션이 멈추지 않고 오류 UI를 보여줄 수 있게 해준다.

 

<참고사이트>

https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/

리액트 라이프사이클의 이해