Study/React
리액트 기초- 4
그징그징
2018. 8. 8. 13:55
리액트 기초- 4
(https://academy.nomadcoders.co/courses/enrolled/216871)
(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv)
노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다.
(Dataflow with Props)
React는 Data가 위에서 아래로 흐릅니다.
아래에서 위로는 가지 못하는 것이죠.
부모컴포넌트가 자식컴포넌트에 정보를 넘겨줄것입니다.
-> props
App.js 에서
문자열 배열을 생성해서
Movie.js의 Movie 컴포넌트로 문자열을 넘겨보겠습니다.
movies 라는 이름의 문자열 배열 생성 후
title={movies[0]} 형식으로 값을 자식 컴포넌트에 넘겨줍니다.
( {movies[0} -> JSX )
Movie.js
에서 값을 어떻게 받을수있을까요?
Movie.js에
this.props를 콘솔로 확인해봅니다.
(title뿐만아니라 동시에 정보를 더 넘길수 있습니다. -> Movie컴포넌트 총 4개여서 4번인거 입니다. 배열에 4개라 그런게 아니라!)
title 속성 안에 값이 넘어 온것을 확인 했습니다.
Movie.js의 Movie 클래스
<h1> </h1> 태그 안을 수정해줍니다.
{this.props.title} ->JSX
(흘러 내려온 정보 중 title안에 있는 값을 출력해줘!)
정보를 받아서 사용까지 성공!