Props

1.Props란?

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 것이다.

 

Props의 목적은 자식 컴포넌트를 다루는 것이다.

 

2.Props의 이점

 

 

컴포넌트의 중첩,재사용,설정이 가능해진다.

 

3.Props 예제 1

 

App.js

import React from "react";
import faker from "faker";
import CommentDetail from "./CommentDetail";
import ApprovalCard from "./ApprovalCard";

const App = () => {
  return (
    <div className="ui container comments">
      <ApprovalCard>
        <CommentDetail
          author="Sam"
          timeAgo="Today at 4:45PM"
          content="Nice blog post"
          avatar={faker.image.avatar()}
        />
      </ApprovalCard>

      <ApprovalCard>
        <CommentDetail
          author="Alex"
          timeAgo="Today at 2:00AM"
          content="I like the subject"
          avatar={faker.image.avatar()}
        />
      </ApprovalCard>

      <ApprovalCard>
        <CommentDetail
          author="Jane"
          timeAgo="Yesterdoday at 5:00PM"
          content="I like the writing"
          avatar={faker.image.avatar()}
        />
      </ApprovalCard>
    </div>
  );
};

export default App;

 부모 컴포넌트인 App에서 CommentDetail에게

 

author,timeAgo,content,avartar에 대한 정보를 보내주고 있다.

 

또한 ApprovalCard에게 CommentDetail의 정보를 보내주고 있다.

 

ApprovalCard는 CommentDetail을 nesting하고 있다.

 

 

CommentDetail.js

import React from "react";

const CommentDetail = (props) => {
  return (
    <div className="ui container comments">
      <div className="comment">
        <a href="/" className="avatar">
          <img alt="avatar" src={props.avatar}></img>
        </a>
        <div className="content">
          <a href="/" className="author">
            {props.author}
          </a>
          <div className="metadata">
            <span className="date">{props.timeAgo}</span>
          </div>
          <div className="text">{props.content}</div>
        </div>
      </div>
    </div>
  );
};

export default CommentDetail;

 CommentDetail 에서 {props.avatar}, {props.author}, {props.content}를 통해

 

App에서 보내온 정보를 반영하고 있다.

 

ApprovalCard.js

import React from 'react';

const ApprovalCard = (props) => {
  return (
    <div className="ui card">
      <div className="content">{props.children}</div>
      <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;

{props.children}을 통해 App 내의 ApprovalCard에 nesting된

 

CommentDetail의 정보를 받아오고 있다.

 

4.Props 예제 2

 

App.js

import React from "react";
import SearchBar from "./SearchBar";
import youtube from "../apis/youtube";
import VideoList from "./VideoList";
import VideoDetail from "./VideoDetail";

const KEY = "AIzaSyAUL6AzOXGiVDM3ZdOtL1cHFNdUM47RPhI";

class App extends React.Component {
  state = { videos: [], selectedVideo: null };

  componentDidMount() {
    this.onTermSubmit('buildings');
  }

  onTermSubmit = async (term) => {
    const response = await youtube.get("/search", {
      params: {
        q: term,
        part: "snippet",
        maxResults: 5,
        type: "video",
        key: KEY,
      },
    });

    this.setState({
      videos: response.data.items,
      selectedVideo: response.data.items[0]
    });
  };

  onVideoSelect = (video) => {
    this.setState({ selectedVideo: video });
  };

  render() {
    return (
      <div className="ui container">
        <SearchBar onFormSubmit={this.onTermSubmit} />
        <div className="ui grid">
          <div className="ui row">
            <div className="eleven wide column">
              <VideoDetail video={this.state.selectedVideo} />
            </div>
            <div className="five wide column">
              <VideoList
                onVideoSelect={this.onVideoSelect}
                videos={this.state.videos}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

App에서 onVideoSelect와 videos라는 이름으로

 

App 컴포넌트의 state를 setting할 수 있는 onVideoSelect라는 메써드와

 

state의 videos상태를 child component로 내려주고 있다.

 

VideoList.js

import React from "react";
import VideoItem from "./VideoItem";

const VideoList = ({ videos, onVideoSelect }) => {
  const renderedList = videos.map((video) => {
    return (
        <VideoItem
          key={video.id.videoId}
          onVideoSelect={onVideoSelect}
          video={video}
        />
      );
  });

  return <div className="ui relaxed divided list">{renderedList}</div>;
};

export default VideoList;

App에서 내려온 정보를 VideoList에서 다시 VideoItem 컴포넌트로 내려보내고 있다.

 

 

VideoItem.js

import './VideoItem.css';
import React from 'react';

const VideoItem = ({ video, onVideoSelect }) => {
  return (
    <div onClick={() => onVideoSelect(video)} className="video-item item">
     <img
        alt={video.snippet.title}
        className="ui image"
        src={video.snippet.thumbnails.medium.url}
      />
      <div className="content">
        <div className="header">{video.snippet.title}</div>
      </div>
    </div>
  );
};

export default VideoItem;

VideoItem 컴포넌트에서 App의 onVideoSelect 메써드와 video 상태를 내려 받았다.

 

VideoItem 컴포넌트를 클릭하면 App의 onVideoSelect를 video 인자를 넣은 채로 실행하게 된다.