[React JS] 리액트 Props에 대하여

기억할 점

컴포넌트 > render > return > JSX

 

(JSX: 리액트로 작성하는 html)

-----------------------------------------------------------------------------------------------------------------------------------

 

리액트의 주요 컨셉 2가지

state와 props

 

부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 준다

어떻게? props를 통해서

 

영화들의 '제목'을 자식 컴포넌트인 Movie컴포넌트에 보내고 싶다면?

 

App.js

Movie > title 이 있고, Movie.js에서 title을 props로 불러온다. 

Why? Moivie컴포넌트는 title 이라는 요소가 있으니까

요소를 접근하는 방법은 "this.props.title"

 

Movie.js

 

타이틀, 영화 포스터 정보를 메인에 다 넣고, 그것을 각각 컴포넌트에 props를 이용해 정보를 출력

 

큰 컴포넌트 -> 전체 정보를 가지고 있음

각기 자식 컴포넌트에게 정보를 전달

 

컴포넌트 구조

App.js

Movie.js

실행 페이지

 

 

 

https://www.inflearn.com/course/reactjs-web/dashboard

리액트 처음이시라구요? React JS로 웹 서비스 만들기! - 인프런