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,
}
'ReactJS > Nomad Coders' 카테고리의 다른 글
7.0부터 (0) | 2022.03.27 |
---|---|
6.0부터 (1) | 2022.03.24 |
[영화 웹 서비스]CREATE REACT APP (CRA) (0) | 2022.03.18 |
[영화 웹 서비스]State (1) | 2022.03.18 |
[영화 웹 서비스]The Basics of React (0) | 2022.03.16 |