ReactJS_3_Props

1. 개념

props는 쉽게 말해 부모 컴포넌트가 자식 컴포넌트에게 넘겨준 값을 말한다. Props는 속성(properties)의 줄임말이다. React의 props는 사용자가 컴포넌트 내에서 보존하길 원하는 데이터를 뜻한다. 따라서 컴포넌트 내부에서 props의 값은 보존되어야한다. 만약 props의 값을 수정하고자 한다면 컴포넌트 내부가 아닌, 부모 컴포넌트에서 수정하여야 한다.

 

2. 영화앱

우리는 모든 정보를 가지고 있는 부모 컴포넌트 App 에서 영화 제목들을 Movie Component에 넘기고자 한다.

이 때 props의 개념이 들어가게 된다.

 

/src/App.js

import React from 'react';
import './App.css';
import Movie from './Movie.js';

const movies=[  
  "Matrix",
  "Iron Man",
  "Old Boy",
]

const movieImages =[
  "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg",
  "https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm163-iron-man-movie-poster-demir-adam-poster-1000x1000.jpg",
  "https://image.tmdb.org/t/p/original/rIZX6X0MIHYEebk6W4LABT9VP2c.jpg"
]

function App() {
  return (
    <div className="App">
      <Movie title={movieTitles[0]} poster={movieImages[0]}/>
      <Movie title={movieTitles[1]} poster={movieImages[1]}/>
      <Movie title={movieTitles[2]} poster={movieImages[2]}/>
    </div>
  );
}

export default App;

 

/src/Movie.js

import React, {Component} from 'react';
import './Movie.css';

class Movie extends Component{
    render(){ 
	//console.log(this.props);
        return(
            <div>
            	// props를 통해 부모로부터 값을 받는다
                <MoviePoster poster={this.props.poster}/>
                <h1>{this.props.title}</h1>
            </div>
        )
            
    }
}

class MoviePoster extends Component{
    render(){
        return(
            <img src={this.props.poster} alt=""/>
        )
    }
}

export default Movie

 

리스트형태로 App의 Movie 수정하기

/src/App.js

import React from 'react';
import './App.css';
import Movie from './Movie.js';

const movies:[
    {
      title: "Matrix",
      poster: "https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYzNjNTc4L2ltYWdlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_.jpg"
    },
    {
      title: "Iron Man",
      poster:  "https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm163-iron-man-movie-poster-demir-adam-poster-1000x1000.jpg"
    },
    {
      title: "Old Boy",
      poster: "https://image.tmdb.org/t/p/original/rIZX6X0MIHYEebk6W4LABT9VP2c.jpg"
    }
]

function App() {
  return (
    <div className="App">
      {movies.map(movie=>{
        return <Movie title={movie.title} poster={movie.poster} />
      })}
    </div>
  );
}

export default App;

그런데, React는 대규모 데이터가 있을 경우 키가 필요하다.

/src/App.js

function App() {
  return (
    <div className="App">
      {movies.map((movie, index)=>{
       //key가 없다면 console창에 에러발생
        return <Movie title={movie.title} poster={movie.poster} key={index}/> 
      })}
    </div>
  );
}

export default App;

prop-types 추가하기

$ npm add prop-types

 그리고 propTypes에서 데이터 타입에 맞게 받기

/src/Movie.js

import React, {Component} from 'react';
import propTypes from 'prop-types';
import './Movie.css';

class Movie extends Component{

    static propTypes={
        title: propTypes.string.isRequired,
        poster: propTypes.string.isRequired
    }


    render(){
        return(
            <div>
                <MoviePoster poster={this.props.poster}/>
                <h1>{this.props.title}</h1>
            </div>
        )
            
    }
}

class MoviePoster extends Component{
    static propTypes = {
        poster: propTypes.string.isRequired
    }
    render(){
        return(
            <img src={this.props.poster} alt=""/>
        )
    }
}

export default Movie