TIL025 | Component와 Props

Component

프론트앤드 개발에서 Component 라는 단어를 많이 사용하게 되는데, component(컴포넌트)란 재사용 가능한 UI 단위이다.

컴포넌트를 정의하는 방법은 함수를 사용하는 방법과 클래스를 사용하는 방법 2가지가 있다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 함수 컴포넌트


class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// 클래스 컴포넌트

Props

위에서 정의한 컴포넌트는 html의 태그와 유사한 형태로 사용할 수 있다.

<Welcome></Welcome>

우리가 정의한 컴포넌트를 사용할 때, html의 속성처럼 원하는 요소를 얼마든지 추가할 수 있다.

<Welcome title="WEB" sub="WorldWideWeb"></Welcome>

Welcome 컴포넌트에서 parameter로 해당 속성을 받아서 사용할 수 있는데, 이것을 props라고 말한다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

부모 컴퍼넌트의 props를 받아올 때, 함수 컴포넌트일 경우 {props.속성이름} 형태로, 클래스 컴포넌트일 경우 {this.props.속성이름} 형태로 받아온다는 차이점이 있다.

Component 분리하기

재사용할 가능성이 있는 부분은 컴포넌트로 만들어주는 것이 좋다.

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

위의 코드에서 .Avatar 부분을 컴포넌트로 만들 수 있다.

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

Avatar 컴포넌트에서 user의 avatarUrl과 name이 필요하므로, Comment 컴포넌트에서 props.author 정보를 user라는 attribute로 넘겨주었다.

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

Avatar 컴포넌트를 감싸고 있는 .user-info를 다시 컴포넌트로 만들 수 있다.

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar user={props.user} />
      <div className="user-info-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 컴포넌트가 간결해진 것을 알 수 있다.

references

https://ko.reactjs.org/docs/components-and-props.html
https://yeri-kim.github.io/posts/react-component-props/