1. 컴포넌트

리액트의 컴포넌트의 형태 (Tree구조)

컴포넌트는 함수형, 클래스형 2가지입니다.

함수형

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

클래스형

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

수업에서는 함수형 컴포넌트를 사용합니다.

어떻게???

모듈내보내기 - 외부에서 사용할 모듈 이름을 지정합니다.

모듈불러오기 - 부모컴포넌트에서 사용

컴포넌트 합성

• 예를 들어 Welcome을 여러 번 렌더링하는 App 컴포넌트를 만들 수 있습니다.

//상위
function App() {
  
return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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