[React]Components와 props

컴포넌트를 사용해서 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴보자.

 

함수 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다.

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

이 함수는 데이터를 가진 하나의 객체 인자(props)를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이 컴포넌트는 JavaScript 함수이므로 '함수 컴포넌트'라 한다.

 

 

 

클래스 컴포넌트(ES6 class)

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

React의 관점에서 볼 때 위 두 가지 유형은 동일하다.

 

컴포넌트 렌더링

지금까지는 엘리먼트를 아래와 같이 DOM 태그로 나타냈다.

const element = <div />;

아래와 같이 사용자 정의 컴포넌트로 위에서 정의한 Welcome을 사용해도 된다.

const element = <Welcome name="Sara" />;

React에서 사용자 정의 컴포넌트로 작성한 엘리먼트는 JSX의 attributes와 자식을 하나의 객체로 해당 컴포넌트에 전달한다. 이 객체를 "props"라고 한다.

 

EX

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

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

 

+ React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 따라서 컴포넌트의 이름은 항상 대문자로 시작해야한다. <div /> 는 HTML의 div 태그지만, <Welcome />은 컴포넌트를 나타낸다.

 

 

컴포넌트 구성

컴포넌트는 다른 컴포넌트를 잠조하여 출력할 수 있다. Welcome을 여러번 랜더해보자.

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

function App() {
    return (
        <div>
            <Welcome name="Han" />
            <Welcome name="py" />
            <Welcome name="React" />
        </div>
    );
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

 

 

컴포넌트 추철

아래의 Comment컴포넌트를 보자

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

이 컴포넌트는 author(객체), text(문자열) 및 date(날짜)를 props로 받은 후 소셜 미디어 웹 사이트의 코멘트를 나타냅니다. 여기서 몇가지만 추출해보자.

Avatar

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

Avatar은 자신이 Comment 내에서 랜더링 된다는 것을 알 필요가 없기 떄문에 props의 이름을 author에서 일반적인 user로 변경했다. props의 이름은 사용될 내용이 아니라 컴포넌트 자체의 관점에서 짓는 것이 좋다.

 

 

위의 과정들을 하면 아래와 같이 만들어진다.

function formatDate(date) {
  return date.toLocaleDateString();
}

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

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);