[DEV] 리액트 02 - Props
경고
공부기록용임. 코드나 커리큘럼 방식 등 모든 지적 재산권은 노마드 코더에게 있으며, 무료로 볼 수 있으니 들어가서 여기서 공부할 것!! 갓 니콜라이 노마드 코더님 만세! https://academy.nomadcoders.co
Props
1.기본 Props 전달
function App() {
return (
<div className="App">
// Component의 시작은 대애문자
<Movie title="IronMan"></Movie>
// App Component는 Movie Component에 title이라는 Property에 IronMan이라는 value값을 주었다.
<Movie title="Batman"></Movie>
// 여러개도 가능
</div>
);
}
// 이렇게 Object로 온다.
function Movie(props) {
return <h1>Movie Title is {props.title}</h1>;
}
// es6로 이렇게하는 것도 가능
function Movie({title}) {
return <h1>Movie Title is {title}</h1>;
}
2. 어…Dynamic! 구려.. 맞다 반복을 직접하다니 역겹기 그지없다.
API호출된 리스트를 동적으로 뿌려보자.
const movies = [
{
name: 'Iron Man',
image: 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpre04.deviantart.net%2F1d43%2Fth%2Fpre%2Ff%2F2017%2F050%2F9%2F8%2Fspider_man__homecoming___iron_man_poster_by_bakikayaa-dazn0du.jpg&f=1&nofb=1',
},
......
]
// 이렇게 생긴 놈을 API에서 받아왔다고 치고 ~
function App() {
return (
<div className="App">
{movies.map((movie) => {
return <Movie name={movie.name} image={movie.image} />;
})}
</div>
);
}
// for.map을 이용해서 반복시키고 Movie Component를 리턴한다.
function Movie({ name, image }) {
return (
<div>
<h1>Movie Title is {name}</h1>
<img src={image}></img>
</div>
);
}
// 대애애충 이렇게 받으면 끝 ngFor랑 비슷하구먼! 쉽네
무슨 에러가 뜨긴하지만 잘된다~
하.. 뭐래는거야.. 리스트에 모든 새끼들은
유니크
한 키가 필요하다는군. 지가 하면될껄 에혀..
const movies = [
{
id: 1,
name: 'Iron Man',
image: 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpre04.deviantart.net%2F1d43%2Fth%2Fpre%2Ff%2F2017%2F050%2F9%2F8%2Fspider_man__homecoming___iron_man_poster_by_bakikayaa-dazn0du.jpg&f=1&nofb=1',
},
...
] // 이렇게 id를 만들어주고
function App() {
return (
<div className="App">
{movies.map((movie) => {
return <Movie key={movie.id} name={movie.name} image={movie.image} />;
// key라는 prop에 id값을 넣어주면된다.
// 이 key 값은 Movie Component에서 받아서 쓰지 않아도 된다. 내부적으로만 사용한단다..
})}
</div>
);
}
멋지게 잘반복한다. 쉽네 쉬워
3. Props Type 근데 반복은 좋은데 만약에 Movie Component에 Prop을 잘못 보내거나 없는걸 보내면 어떻게하지?
npm i prop-types
설치!
import PropType from 'prop-types';
// 레이팅을 추가함.
function Movie({ name, image, rating }) {
return (
<div>
<h1>Movie Title is {name}</h1>
<img src={image} alt={name}></img>
<p>{rating} / 5</p>
</div>
);
}
Movie.propTypes = {
name: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
rating: PropTypes.number
}
function App() {
return (
<div className="App">
{movies.map((movie) => {
return <Movie
key={movie.id}
name={movie.name}
image={movie.image}
rating={movie.rating}/>;
})}
</div>
);
}
Movie Component에 Props를 던져줄 때 마다, PropTypes가 체크해주고 없으면 디폴트 값까지 만들어서 던져준다. typescript에 있는 기능 처럼 매우 좋은 녀석인듯.
대문자 소문자가 매우 햇갈려서 초반에 어리버리 탈 수 있음.