리액트 기초- 4

리액트 기초- 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안에 있는 값을 출력해줘!)

정보를 받아서 사용까지 성공!