📗[React 주요 개념] 1. 컴포넌트, props

항상 대문자로 시작함.

props

• react가 사용자 정의 컴포넌트로 작성한 element를 발견했을 때, 해당 컴포넌트에 전달하는 단일 객체. (JSX 어트리뷰트와 자식)
• 읽기 전용.(컴포넌트 자체 props는 수정하면 안된다.)
  ex) Welcome 컴포넌트.
  어트리뷰트 name이 props 객체 안에 포함되어 전달됨.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);```

컴포넌트 종류

클래스 컴포넌트

• 자주 사용되지는 않는다고는 함.
• javascript함수 작성

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

함수 컴포넌트

• ES6 class

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

컴포넌트 구성

컴포넌트안에 컴포넌트

최상위에 단일 App 컴포넌트를 가지고 있는 것이 일반적이지만, 기존 앱에 React를 통합하는 경우에...

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

컴포넌트 쪼개기

• 전

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

• 후

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>
  );
}

Class Component가 Functional Component보다 더 많은 기능을 제공

Functional은 이런 것들을 제공하지 못함.

=> Functional Component에서도 할 수 있게 React Hook이 나옴.