클래스형 컴포넌트, 함수형 컴포넌트, 배열 컴포넌트

> 클래스형 컴포넌트

• 두 종류의 클래스 (Component, PureComponent)를 사용

Component 클래스

• 프로퍼티, state와 생명주기 함수가 들어있는 구조의 컴포넌트를 만들 때 사용

PureComponent 클래스

• Component 클래스를 상속받은 클래스
• shouldComponentUpdate() 함수를 ‘얕은 비교’ 하도록 재정의
• ‘얕은 비교를 통해 데이터가 변경된 경우’에만 render() 함수 호출 (반면 Component 클래스로 만들어진 컴포넌트는 항상 render() 함수를 호출)

> 함수형 컴포넌트

• state가 없는 함수형 컴포넌트(SFC; Stateless Functional Component)
• state를 포함하지 않으며 데이터를 받아 출력할 컴포넌트를 반환

• 함수형 컴포넌트에는 클래스 선언이 없다, state와 생명주기 함수를 사용할 수 없다. 그래서 단순한 구조의 UI 컴포넌트를 제작할 때 많이 사용된다.

> 배열 컴포넌트

• 배열 컴포넌트를 위한 map() 함수 사용 (배열로 저장된 데이터를 바로 jsx로 변경 가능
• 배열 컴포넌트에는 키값을 key로 꼭 정의 ( 키값을 정의하여 출력한 배열 컴포넌트는 다시 출력해야 하는 경우 리액트 엔진이 기존의 컴포넌트를 재활용하여 성능을 높일 수 있기 때문)
• render()함수에서 여러개 JSX 노드 반환 (render()함수는 트리 구조의 노드를 반환, 리액트는 트리 구조의 노드 외에도 배열 구조의 노드를 반환할 수 있다) 리액트 16.3 버전까지 render()함수는 트리 구조의 노드 1개만 반환 할 수 있었다. 만약 여러 개의 노트를 반환하고 싶은 경우 의미 없는 최상위 노드를 추가해야 했다. 16.3 버전 이후 ‘의미 없는 노드를 추가하는 것’ 이 개선 React.Fragment 컴포넌트 추가
• React.Fragment(<></>) : 여러 노드를 반활할 때 사용, HTML로 변환되지 않는다