[영화 웹 서비스]Props

isolation 

 

encapsulation

 

 

부모 App 에서 자녀 MinutesToHours, KmToMiles 등의 자식 컴포넌트에게 부모 컴포넌트의 데이터를 필요로 하지 않는다.

 

*부모 컴포넌트로부터 자식 컴포넌트로 데이터 보내기

 

-함수형 컴포넌트

 

-버튼 틀(스타일)을 만들어 놓고, 이후에 "새로운" 정보를 이 Btn 컴포넌트에 전송한다.  

 

<함수명 변수이름="전해줄 값" />

함수에서 props(매개변수) 에서 매개변수는 < /> 로부터 전달 받는 properties

 

reactjs는 자동으로 < />에 넣는 모든 property(prop)들을 오브젝트 안으로 넣는다

함수에서 props는 오브젝트이다. 아까 전달받은 모든 것들을 갖는 오브젝트이다. 

{props.변수이름}으로 오브젝트 안의 여러 변수 중 원하는 변수에 접근 가능

 

하나의 컴포넌트 만으로도 다른 UI를 만들 수 있다. 즉, 재사용 가능하다. 

props라는 것 자체를 {}처럼 중괄호로 표현 가능하다.

{변수이름}으로 사용하면 props.을 사용하지 않고도 원하는 변수에 접근 가능하다

 

property를 오브젝트로부터 꺼내는 것이다

function Btn(props){

    {props.변수이름}

}

 

function Btn({변수이름}){

    {변수이름}

}

 

function Btn(props = default값){

    {props.변수이름}

}

-prop이 정해지지 않은 경우가 있기 때문에, 초기값(default)를 줄 수 있다.

 

Memo

 

onClick={함수}를 커스텀 컴포넌트에 넣는다면, 이벤트 리스너가 아니라 prop이다.

이벤트 리스터는 <button> tag에 달아야 한다.

*컴포넌트 안의 내용들은 "prop"이다. 실제 HTML 태그와 헷갈리지 않기!!!

컴포넌트의 prop으로 원하는 뭐든지 사용 가능하다. text,boolean,function 등

 

 

React Memo(memorize)

- 해당 컴포넌트가 다시 그려지는 것을 원하지 않을 때 사용

- 만약 "props가 변경되지 않는다면", re-render 할지 말지 정할 수 있음

 

const MemorizedBtn = React.memo()

<MemorizedBtn text="continue" />

이렇게 사용한다면, props가 변경되지 않는 한, re-render되지 않는다

 

부모가 어떤 state라도 변경이 있다면, 모든 자식들은 다시 그려진다(re-render)

-> 추후에 어플리케이션이 느려지는 원인이 될 수도 있다. 

 

 

Prop Types : prop의 타입을 지정할 수 있고, 틀리면 warning이 나온다. 

<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script> 작성하고 나서

console창에 proptypes라고 쳐보면 어떤 타입이 있는지 확인 가능하다. 

- isRequired : 항상 꼭 있어야 하는 부분

 

함수이름.propTypes = {

    prop 이름 : type

}

 

예)

Btn.propTypes = {

    text : PropTypes.string.isRequired, 

    fontSize : PropTypes.number,

}