[Kossie Coder] 자식 컴포넌트에 데이터 보내기2 - props (props 생략)

// App.js

import React from 'react';
import './index.css';
🌟import Movie from './components/Movie';🌟
function App() {
  const movies = [
    { title: 'Lami1', year: 2001 },
    { title: 'Lami2', year: 2002 },
    { title: 'Lami3', year: 2003 },
  ];
  const renderMovies = movies.map((movie) => {
    🌟return <Movie movie={movie} key={movie.title}/>;🌟 // map을 사용하기 때문에 유니크한 키 필요 
  }); 

  return (
    <div className="App">
      <h1>Movie list</h1>
      {renderMovies}
    </div>
  );
}

export default App;

// Movie.js

import React from 'react';

const Movie = (props) => {
  return (
    <div className="movie">
      <div className="movie-title">{props.movie.title}</div>
      <div className="movie-year">{props.movie.year}</div>
    </div>
  );
};

export default Movie;

 

props 생략

// Movie.js

import React from 'react';

const Movie = (🌟{ movie }🌟) => {
  return (
    <div className="movie">
      <div className="movie-title">🌟{movie.title}🌟</div>
      <div className="movie-year">🌟{movie.year}🌟</div>
    </div>
  );
};

export default Movie;

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */