React/Lecture
[Kossie Coder] 자식 컴포넌트에 데이터 보내기2 - props (props 생략)
Lami
2022. 1. 13. 02:20
// 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 */