class vs function component

• React에서는 class를 통해 element를 생성하며, 이는 일반적인 class 생성자 함수와 같이 new를 통해 객체를 생성하고, 내부에 있는 render 메서드를 호출하여 리턴된 JSX를 babel로 컴파일하여 element를 반영한다. 이 과정에서 React Element 객체를 만들기 위해 필요한 각종 프로퍼티와 메서드들이 정의되어 있다.

• 생성된 element 객체 내의 JSX 문법은 Babel에 의해 컴파일되어 React.createElement로 치환된 뒤 호출되며, 이 과정을 통해 실제 DOM에 반영된다. 이때, state는 직접 constructor를 통해 생성해주었을 때만 정의되며, 그렇지 않으면 React가 랜더링을 할 때 state가 정의되지 않았으면 프로퍼티를 생성하지 않는다.

• 리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트를 사용할 수 있으며, 함수형 컴포넌트는 상태를 가지지 않지만 Hook을 이용해 상태를 만들 수 있고, 클래스형 컴포넌트는 생성 시 props를 받아 this.props로 초기화하여 사용한다.

• 클래스형 컴포넌트는 생명주기를 관리하기 위해 Component 클래스의 static 메서드를 사용하며, 이 중 getDerivedStateFromProps 메서드는 현재 가져오는 props로 상태를 업데이트하여 동기화하고 싶을 때 사용한다.