[movie_app_2] 컴포넌트, props

프로젝트를 시작하기 전에, 컴포넌트들을 만든다.

react는 js 안에 html 이 존재하는 구조 -> jsx라고 한다. : 컴포넌트를 만들때 사용하는 언어 

각 컴포넌트마다 다른 파일에 작업(을 선호)

render() : 이 컴포넌트가 무엇을 보여주는지 알려주는 함수

js 파일에서 reactDOM을 사용해서 웹에 컴포넌트를 지정된 엘리먼트 자리에 렌더하는것!

작성된 컴포넌트를 다른 컴포넌트에 넣을 수 있고 import 하여 다른 파일의 컴포넌트 안에도 넣을 수 있다!

react의 주요 컨셉 2개 - state, props

props : 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달

array map을 사용 : 엘리먼트가 많을수록 key를 주어야함.

movies.map((movie, index) => {

return <Movie title={movie.title} poster={movie.poster} key={index} />

})

index는 map에서 현재 제공하는 리스트의 숫자를 의미함.

검색 결과 unique한 문자열로 지정해도 된다.

propTypes를 통해 형식 지정 : 자식 컴포넌트가 있는 파일에 !

react 업데이트로 인해, propTypes가 분리되었다. yarn add prop-types 해줌

import PropTypes from 'prop-types';

propTypes를 import 한 뒤

static propTypes = { //PropTypes라고 썼다가 에러났당.

title: PropTypes.string,

poster: PropTypes.string

}

이런식으로 형지정

title: PropTypes.string.isRequired 로 필수인지 아닌지도 체크

검색 결과 defaultProps를 사용할 수도 있음. props가 없을 때 default로 들어가는 값을 지정

타입이 유동적인 경우를 위해서 oneOfType을 설정할수도 있음.

static propTypes = {

title:PropTypes.oneOfTypes([

PropTypes.string,

PropTypes.double

])

}

이런식으로인듯

자식 엘리먼트로 들어오는 모든 props에 대해서 검사해야되는건 아닌것같다.

개인적으로 먼저 만들어보고, 검색하면서 배우는 학습방법이 나한테 잘 맞는것같다..ㅎㅎ

---

노마드코더 https://academy.nomadcoders.co/  의 [실전]ReactJS로 웹 서비스 만들기를 수강하며 정리한 내용입니다.