Q. 리액트 클래스 컴포넌트/라이프사이클 ?

🧐 리액트 라이프사이클 순서와 역할?

1. Mount : 컴포넌트 실행 후 DOM이 생성되고 웹 브라우저에 나타날 때

   constuctor: 컴포넌트 생성시 호출되는 생성자
   getDerivedStateFormPorps: props값을 state와 동기화
   render: UI를 렌더링
   componentDidMount: 컴포넌트가 웹 브라우저에 나타난 후 호출

2. Update : 컴포넌트를 업데이트 할 때

   • props가 바뀔 때
   • state가 바뀔 때
   • 부모 컴포넌트가 리렌더링 될 때
   • forceUpdate()를 통한 강제 렌더링

   getDerivedStateFromProps: props값을 state와 동기화
   shouldComponentUpdate: true / false를 통해 리렌더링 여부를 결정, 만약 false일 경우 여기서 사이클을 마침 (업데이트 할 사항이 없다고 판단)
   render : UI를 렌더링
   getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 전에 호출
   componentDidUpdate: 컴포넌트 업데이트 작업이 끝나면 호출

3. UnMount : 컴포넌트를 DOM에서 제거할 때

   componentWillUnmount: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출

🧐 함수형 컴포넌트와 클래스형 컴포넌트의 차이는?

• 예전에는 컴포넌트에 state 필요한가요 ? 물어서 state가 필요하면 클래스형, 필요없으면 함수형으로 개발했다는 말을 들은 적이 있다.

• 그러나 요새 Hooks의 등장으로 판도는 바뀌었고 거의 함수형으로 개발한다.

• 왜냐하면 리액트 클래스형으로 개발하려면 라이프 사이클에 대해서 자세히 알아야 하며,
  클래스의 state나 이벤트 핸들러를 사용할 때 this를 통해 접근해야 하는 번거로움이 있다.

• 또, 메모리 자원을 함수형 컴포넌트보다 덜 사용한다고 하고, 컴포넌트 선언도 함수형이 쉽기 때문에 함수형 컴포넌트를 통한 개발이 대세가 되었다.