태그

React - Props - 03

React - Props - 03

Communicating with Props

Important Concepts

  1. Component Nesting: 컴포넌트 안에 다른 컴포넌트를 중첩 가능
  2. Component Resuability: 재사용 가능
  3. Component Configuration: 컴포넌트를 만들 때 구성 가능

Add Style

/public/index.html 부분에 추가한다.
<head>
 ...
 <link  rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"  />
</head>

Make comments list

  1. 하나의 comments container 만들기
    // index.js
import React from 'react';
import ReactDOM from 'react-dom';
import faker from 'faker';

const App = () => {
 return (
  <div className="ui container comments">
   <div className="comment">
    <a href="/" className="avatar">
     <img alt="avatar" src={faker.image.avatar()} />
    </a>
    <div className="content">
     <a href="/" className="author">
      Sam
     </a>
     <div className="metadata">
      <span className="date">Today at 6:00PM</span>
     </div>
     <div className="text">Nice blog post!</div>
    </div>
   </div>
  </div>
 )
};

ReactDOM.render(<App />, document.querySelector('#root'))
faker library를 사용하여 아래와 같이 만들 수 있다.
image
  1. 중복되는 html elements를 CommentDetail.js로 빼기
    // index.js
import React from 'react';
import ReactDOM from 'react-dom';
import CommentDetail from './CommentDetail'; // this

const App = () => {
 return (
  <div className="ui container comments">
   <CommentDetail />
  </div>
 )
};

// CommentDetail.js
import React from 'react';
import faker from 'faker';

const CommentDetail = () => {
 return (
  <div className="comment">
   <a href="/" className="avatar">
    <img alt="avatar" src={faker.image.avatar()} />
   </a>
   <div className="content">
    <a href="/" className="author">
     Sam
    </a>
    <div className="metadata">
     <span className="date">Today at 6:00PM</span>
    </div>
    <div className="text">Nice blog post!</div>
   </div>
  </div>
 );
};

export default CommentDetail; // this
위와 같이 작성하면 전과 같은 결과가 출력된다.
  1. props를 이용하여 데이터 넘겨주기
    • props
    • Passing data from a parent component to a child component
    • Goal is to customise or configure a child component
    // index.js
<CommentDetail author="Sam" />
<CommentDetail author="Alex" />
<CommentDetail author="Jane" />

// CommentDetail.js
const CommentDetail = (props) => { // this
 // console.log(props)

 return (
  <div className="comment">
   <a href="/" className="avatar">
    <img alt="avatar" src={faker.image.avatar()} />
   </a>
   <div className="content">
    <a href="/" className="author">
     {props.author} // this
    </a>
    <div className="metadata">
     <span className="date">Today at 6:00PM</span>
    </div>
    <div className="text">Nice blog post!</div>
   </div>
  </div>
 );
};
  2. multiple props 이용하기
    // index.js
<CommentDetail
 author="Sam"
 timeAgo="Today at 4:45PM"
 content="Nice blog post"
 avatar={faker.image.avatar()}
/>

// CommentDetail.js
return (
 <div className="comment">
  <a href="/" className="avatar">
   <img alt="avatar" src={props.avatar} /> // this
  </a>
  <div className="content">
   <a href="/" className="author">
    {props.author} // this
   </a>
   <div className="metadata">
    <span className="date">{props.timeAgo}</span> // this
   </div>
   <div className="text">{props.content}</div> // this
  </div>
 </div>
);
아래의 이미지처럼 comments list가 출력된다.

  1. Approval Card 추가하기
    // index.js
<ApprovalCard>
 <CommentDetail
  author="Sam"
  timeAgo="Today at 4:45PM"
  content="Nice blog post"
  avatar={faker.image.avatar()}
 />
</ApprovalCard>

// ApprovalCard.js
import React from 'react';

const ApprovalCard = props => {
 console.log(props.children);

 return (
  <div className="ui card">
   <div className="content">{props.children}</div> // this(중첩된 element들에 접근가능)
   <div className="extra content">
    <div className="ui two buttons">
     <div className="ui basic green button">Approve</div>
     <div className="ui basic red button">Reject</div>
    </div>
   </div>
  </div>
 );
};
 
export default ApprovalCard;
여기까지의 출력 화면입니다.

  1. Warning message 추가하기
    // index.js
<ApprovalCard> // ApprovalCard안에 html element가 존재하면 props처럼 전달된다.
 <div>
  <h4>Warning!</h4>
  Are you sure you want to do this?
 </div>
</ApprovalCard>
여기까지의 출력 화면입니다.

GitHub and Others

라벨:

댓글

댓글 쓰기

가장 많이 본 글