1. 생명주기 - 클래스형 컴포넌트

1) 설명

① 생명주기란?

• 리액트의 모든 컴포넌트들은 생명 주기를 가지고 동작한다.
• 단순히 만들고 실행!에서 끝나는 것이 아니라 만드는 순간부터 실행 종료 사이사이 모든 순간들을 메소드로 나누어 관리한다.
• 이것들을 컴포넌트 라이프 사이클(생명주기) 메소드라고 한다.
• 컴포넌트 라이프 사이클 메소드는 클래스형 컴포넌트에서만 직접 사용이 가능하지만 함수형 컴포넌트에서 Hooks 기능을 이용해서 사용할 수 있다.

② 종류

• 컴포넌트는 크게 세 가지 주기를 가진다.
• 컴포넌트를 브라우저에 그리는 마운트(Mount),
• 컴포넌트를 브라우저에 그린 후 변경 사항을 그리는 업데이트(Update),
• 컴포넌트를 브라우저에서 제거하는 언마운트(Unmount) 과정을 가지고 있다.

2) 마운트(componentDidMount)

• 마운트란 DOM이 생성되어 브라우저에 나타나는 과정을 말한다.
• 즉, 컴포넌트를 만들고 브라우저에 표시되게 하는 것 까지의 과정을 마운트라고 할 수 있다.

3) 업데이트(componentDidUpdate)

• 업데이트 과정을 거친 컴포넌트는 리렌더링을 통해서 브라우저에 나타나게 된다.
• 업데이트는 컴포넌트에 변경사항이 발생될 때 업데이트를 실시하는데, 이는 다음 네 가지 경우에 업데이트를 실시한다.
• ① props의 변경
• ② state의 변경
• ③ 부모 컴포넌트의 리렌더링
• ④ this.forceUpdate()를 통한 강제 렌더링(솔직히 이거 빼고 3가지로 봐도 될 듯)

4) 언마운트(componentWillUnmount)

• 언마운트는 DOM에서 컴포넌트를 제거하는 과정이다.
• 당연하지만 삭제 과정은 컴포넌트를 삭제하는 것이라 삭제하기 직전만이 컴포넌트를 제어할 수 있다.

2. 생명주기 - 함수형 컴포넌트

1) 설명

① useEffect

• useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 하도록 만드는 Hook이다.
• 라이프 사이클 메소드인 componentDidMount나 componentDidUpdate, componentWillUnmount와 비슷하게 작동한다.
• 이 Hook가 함수형 컴포넌트에서 라이프 사이클 메소드를 사용할 수 있는 방법 중 하나가 된다.

② useEffect로 생명주기 관리

• 첫 번째 인자로 실행시킬 콜백함수를, 두 번째 인자로 의존성 배열을 주는데 이 의존성 배열을 어떻게 관리하느냐에 따라 생명주기를 컨트롤하는 것이 된다.
• 의존성 배열이 없다면 매 렌더링마다 콜백함수가 실행된다.

2) 마운트

useEffect(() => {
  alert('렌더링 완료');
}, []);

• 앱이 최초 렌더링 시에만 작동하고 업데이트 시에는 작동하지 않는 것을 볼 수 있다.
• 의존성 배열에 값을 아무 것도 넣지 않으면 앱이 마운트 될 때만 작동한다.

3) 업데이트

useEffect(()=>{
	alert('렌더링 완료');
}, [값]);

• 값이 업데이트 될 때마다 작동하는 것을 볼 수 있다.

4) 언마운트

useEffect(() => {
  alert('렌더링 완료');

  return ()=>{
    alert('clean-up 함수 호출');
  };
}, [값]);

• clean-up함수(이하 정리 함수)는 컴포넌트를 언마운트하거나 업데이트 직전에 수행할 작업을 지정한 함수이다.
• 예를 들어 어떤 컴포넌트를 언마운트한다면 그 컴포넌트에서 사용하던 메모리를 풀어주거나 하는 등의 작업들을 위해 정리 함수를 이용하게 된다.
• 정리 함수는 useEffect 함수 내에서 return으로 함수를 반환하는 방식으로 사용한다.
• 이렇게 하면 컴포넌트가 (값 변경에 의해)업데이트 되어서 렌더링 하기 직전마다 정리 함수가 호출된다.