컴포넌트

리액트는 여러 컴포넌트의 조합으로 이루어져있다.
컴포넌트는 동일한 구성을 사용하게 될 때 재사용이 가능하다.

헤더, 사이드바, 푸터 등 여러 컴포넌트로 유저 인터페이스가 구성되어있다.

Component in code

컴포넌트는 자바스크립트와 동일한 .js 확장자 파일을 사용할 수 있다.
(jsx 또는 tsx 파일도 가능하지만 나중에 알아보도록 하자)

Component Types

컴포넌트는 두 가지 종류가 있다.

1. 함수형 컴포넌트 (Stateless Functional Component)

자바스크립트 함수
함수형 컴포넌트는 함수형으로 나타난 컴포넌트로 return 구문으로 간편하게 사용가능하다.
(현재 React에서는 함수형 컴포넌트 사용을 권장하고 있다.)
return 구문으로 HTML을 반환하여 클래스보다 비교적 간단하다.

ex)

function Welcome(props){
	return <h1>Hello, {props.name}</h1>
}

2. 클래스형 컴포넌트 (Stateful Class Component)

클래스를 상속받는 클래스 컴포넌트
render 메서드를 통해서 HTML을 반환하여 보여준다.
(함수형으로 배워야 하겠지만, 실무에서 클래스형으로 개발되어 있는 소스도 볼 기회가 있으므로 알아두면 좋다.)

ex)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }

그래서 Component를 요약하자면

컴포넌트는 UI의 부분을 구성한다. (여러 컴포넌트로
재사용이 가능하고 컴포넌트 내부에 컴포넌트가 들어갈 수 있다.
두 종류가 있으며 함수형, 클래스형 컴포넌트로 나뉜다.