ReactJS - Props로부터의 Dataflow | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

Dataflow with props - props에서 오는 데이터

메인 컴포넌트 앱은 영화 이미지들을 가져올 것이다.

그리고 그 영화들은 카드 형태로 보여진다.

-> 메인 컴포넌트는 무비 리스트가 있다는 뜻이다.

-> 그리고 그 리스트 안에 영화카드엔 해당 영화의 정보가 각각 담길 것이다.

-> 부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 줄 것이다.

-> 어떻게 부모자 자식에게 정보를 주느냐? 바로 props를 통해서이다.

영화리스트를 만들어 보자.

4개의 영화를 넣었고, 이 영화들의 '제목'을 자식 컴포넌트인 movie에게 보내고 싶다면?

<Movie /> 안에 배열 형태로 넣어준다.

이제 movie 컴포넌트는 '제목'이라는 데이터를 얻게 되었다.

이제, movie 컴포넌트로 가게 되면,

render 다음에 console.log(this.props)를 작성...

웹 브라우저에서 살펴보자.

console에서 우리가 입력한 제목들을 확인할 수 있다.

우리는 제목을 적고, 각각 영화에 다른 제목을 부여했다.

그리고 각 영화의 props는 부여한 제목과 같다.

내가 이미 어떤 object(props)가 있으면, {this.props."title"}라고 입력해주면 된다.

4개에 이미지에 해당하는 제목이 뜬다.

(이미지는 동일)

리액트는 부모 컴포넌트가 자식 컴포넌트에게 정보를 준다.

이 경우에는 movie에 title을 부여했고,

movei.js에서 title을 props로 불러온다.

왜냐? movie 컴포넌트는 title이라는 요소가 있으니까.

그리고 요소들을 액세스하는 방법은, "this.props.title"이다.

<<JSX의 경우 명령을 실행시키려면 괄호를 꼭 쳐야한다!!!!>>

이제 이미지 리스트를 만들어 보자.

movieImages라는 배열에 이미지 url을 붙여넣는다.

title={movieTitles[]}

poster={movieImages[]}

앞에서 한 영화 제목과 방식은 같다.

이렇게 새로운 props가 생성됨.

이제 부모 컴포넌트는 타이틀과 포스터를 자식 컴포넌트에게 줄 것이다.

movie 컴포넌트는 포스터만 movieposter 컴포넌트에게 줄 것이다.

<Movieposter poster={this.props.poster}/>

일단 props를 출력해보자.

예상대로 poster와 title이 함께 나온다.

이 poster props를 movie poster 컴포넌트로 보내야 한다.

출력해보자.

잘된다.

긴 링크 대신, this.props.poster을 사용하면 끝!

짜잔!!!