React 기본 문법-컴포넌트 (Component)

목차에 따라 React 기본 문법 중 "컴포넌트"부터 시작해보겠습니다.

1. React 기본 문법
   • 컴포넌트 (Component)

React에서 컴포넌트는 UI를 구성하는 가장 기본적인 단위입니다. JavaScript 함수 또는 클래스로 작성되며, 데이터를 입력받아 React 요소를 반환합니다.

함수형 컴포넌트

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

클래스형 컴포넌트

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

위의 두 컴포넌트는 동일한 역할을 수행합니다. props라는 객체를 통해 속성값을 전달받고, 화면에 표시될 내용을 반환합니다. 이렇게 정의된 컴포넌트는 JSX 태그처럼 사용됩니다.

<Welcome name="Sara" />

이제 다음 주제로 넘어가도록 하겠습니다.