props
- properties의 줄임말.
- 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용.
// MyProps.js
import React from "react";
import MyPropsSub from "../components/MyPropsSub";
const MyProps = () => {
console.clear();
return (
<div>
{/* Route처리를 적용 받는 페이지에서 이 컴포넌트를 중복 사용시 App.js에서의 설정을 덮어쓰게 된다. */}
{/* <Meta title="Myprops.js" description="여기는 MyPros.js 파일 입니다." /> */}
<h2>MyProps</h2>
{/* 컴포넌트에게 props 전달하기 - 문자열 값은 따옴표로 감싼다. 그 외의 형식은 '{}'로 감싼다. */}
<MyPropsSub />
<MyPropsSub name="민호" age="19" />
<MyPropsSub name="수영" age={21} />
</div>
);
};
export default MyProps;defaultProps
- 컴포넌트에 props를 지정하지 않았을 때를 대비하여 기본값을 JSON으로 정의해 둘 수 있다. (가급적 권장)
// MyPropsSub.js
import React from "react";
/**
* props
* -> 컴포넌트를 사용하는 부모로부터 전달받는 변수값이 포함되어 있는 객체
* -> 필요한 경우에만 선언한다.
* -> 흔히 컴포넌트에게 HTML 속성 같은 형태로 전달된다.
*/
const MyPropsSub = (props) => {
console.group("MyPropsSub");
console.log(props);
console.log(typeof props.name);
console.log(typeof props.age);
console.groupEnd();
return (
<div>
<h3>MyPropsSub</h3>
<p>
제 이름은 <b>{props.name}</b>이고 나이는 <b>{props.age}</b>입니다.
</p>
</div>
);
};
// 속성값이 전달되지 않을 경우에 대비하여 기본값을 JSON으로 정의해 둘 수 있다.
// (defaultProps 객체이름 고정)
// 가급적 무조권 권장~!!!
MyPropsSub.defaultProps = {
name: "이름없음",
age: 20,
};
export default MyPropsSub;PropTypes
- 컴포넌트의 props의 필수 여부를 지정하거나 props의 DataType을 지정할 때 사용
- https://reactjs-kr.firebaseapp.com/docs/typechecking-with-proptypes.html
import PropTypes from "prop-types";- 타입이 틀려도 페이지는 작동하고 콘솔에서만 경고메시지
/** 이 컴포넌트로 전달되는 props 값들에 대한 형식(DataType)과 필수 여부 지정 */
// 규칙에 맞지 않는 props값에 대해 브라우저 개발자 콘솔에 warning 메시지가 출력된다.
MyPropTypesSub.propTypes = {
// name 속성의 데이터 타입을 문자열 지정
name: PropTypes.string,
age: PropTypes.number,
// hobby의 데이터 타입과 필수 여부 지정
// --> 필수 여부 설정은 데이터타입 뒤에 ".isRequired"를 추가 명시
hobby: PropTypes.string.isRequired,
};의문점
- 그냥 jsx를 쓸때보다 두배로 시간이 드는것 같은데 이런 불편을 감수할 만큼 쓰일 필요가 있는지? (놓칠 수 있는 오류를 잡기 위해서?)
해결
- 다시 생각해보니 그냥 jsx는 컴포넌트에서 주는대로 받아왔고
- props는 함수의 파라미터처럼 컴포넌트를 호출할때 원하는 값을 입력할수 있다는 점에서 큰 차이가 있다.
- 또 jsx는 컴포넌트쪽에서 데이터를 받아와야하지만 / props는 호출하는 쪽에서 데이터를 적용 가능한 차이도 있는 것으로 보인다.
Hi