컴포넌트 속성을 설정할 때 사용하는 요소
const MyComponent = (props) => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
export default MyComponent;
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent name="React" />;
};
export default App;
안녕하세요, 제 이름은 React입니다.
MyComponent.defaultProps = {
name: "기본 이름",
age: "20살",
};
부모 컴포넌트에 name과 age 속성을 사용하지 않았을 때 위의 설정된 기본값으로 나타낸다.
const MyComponent = (props) => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다. children은 {props.children}.
</div>
);
};
const App = () => {
return <MyComponent>리액트 냠냠</MyComponent>;
};
props.children
은 리액트 냠냠
이라는 문자열이 나타나게 된다.props 값을 조회할 때마다 props.name, props.children과 같이 키워드를 앞에 붙여줘야 한다.
이러한 작업을 편하게 하기 위해서 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출할 수 있다.
const MyComponent = (props) => {
const { name, children } = props;
return (
<div>
안녕하세요, 제 이름은 {name}입니다. children은 {children}.
</div>
);
};
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. children은 {children}.
</div>
);
};
import PropTypes from "prop-types";
MyComponent.propTypes = {
name: PropTypes.string,
};
name의 값은 무조건 문자열(string) 형태로 전달해야 된다.
자료형이 일치하지 않으면 개발자 도구의 Console에 경고를 표시한다.
만약 name에 3을 넣어도 페이지에 표시는 된다.
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
favoriteNumber의 자료형이 number가 아니면(undefined도 포함) Console에 경고를 표시한다.
defaultProps와 propTypes는 필수 사항은 아니다.
arrayOf() : 특정 PropType으로 이루어진 배열
bool, array, function, number, object, string
symbol: ES6의 Symbol
node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드, children)
instanceOf(클래스): 특정 클래스의 인스턴스
oneOf(['dog', 'cat']): 주어진 array 요소 중 값 하나
oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType 객체
any : 아무 종류
import React, { Component } from "react";
import PropTypes from "prop-types";
class MyComponent extends Component {
render() {
const { name, favoriteNumber, children } = this.props;
// 비구조화 할당
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}입니다. <br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
}
MyComponent.defaultProps = {
name: "기본 이름",
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
export default MyComponent;
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent favoriteNumber={3}>리액트 냠냠</MyComponent>;
};
export default App;
안녕하세요, 제 이름은 기본 이름입니다.
children 값은 리액트 냠냠입니다.
제가 좋아하는 숫자는 3입니다.