※ 공식문서를 읽고 정리한 글입니다.

Components

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

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

• 컴포넌트는 'props'라 하는 임의의 입력을 받아 React 엘리먼트를 반환하는 것으로, 자바스크립트의 함수와 유사함
• 실제로 함수로 구현하는 함수 컴포넌트와 클래스를 사용하는 클래스 컴포넌트가 있음
  코드가 간단한 함수 컴포넌트를 더 많이 사용

function Welcome(props) {
  props.name = "Sans" //컴포넌트 내에서 입력값을 바꾸려는 시도를 해서는 안됨
  return <h1>Hello, {props.name}</h1>;
}

• 컴포넌트 함수는 반드시 순수함수(입력값을 바꾸지 않고 입력값이 같으면 동일한 결과 반환)형태로 동작해야 함

Component rendering

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

• React에서 엘리먼트는 사용자가 정의한 컴포넌트로도 표현 가능
• 사용자 정의 컴포넌트로 작성한 엘리먼트를 리액트가 발견하면 JSX 속성과 자식(=props)를 해당 컴포넌트에 단일 객체로 전달하게 됨
• 컴포넌트의 이름을 작성할때 항상 대문자로 시작해야함 (소문자로 시작할시 html 태그로 인식)

컴포넌트의 합성

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

• 컴포넌트는 자신의 출력값에 다른 컴포넌트를 참조할 수 있음
  예문에서 Comment 컴포넌트는 UserInfo, UserInfo 컴포넌트는 Avatar 컴포넌트를 참조하고 있음
• 여러개의 재사용 가능한 컴포넌트들을 만들고 이를 활용함으로써 코드 유지보수를 편하게 할 수 있음

출처:
https://ko.reactjs.org/docs/components-and-props.html