Props
: props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
: props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
Jsx에서 Props 렌더링 방법 : JSX 내부에서 { } 기호로 감싸주면 된다.
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다. </div>
};
export default MyComponent;
컴포넌트 사용 시 props 값 지정하는 방법
//부모 컴포넌트 (App.jsx)
import Mycomponent from './MyComponent';
const App = ( ) => {
return <MyComponent name = "은달걀" />;
};
export default App;// 자식 컴포넌트
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다. </div>
};
export default MyComponent;
// 안녕하세요, 제 이름은 은달걀입니다.
Props의 기본값 설정하는 방법 : defaultProps
: props 값을 따로 지정하지 않았을 때 보여 줄 기본값 설정
//부모 컴포넌트 (App.jsx)
import Mycomponent from './MyComponent';
const App = ( ) => {
return <MyComponent/>;
};
export default App;// 자식 컴포넌트
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다. </div>
};
MyComponent.defaultProps = {
name: '홍길동'
};
export default MyComponent;
// 안녕하세요, 제 이름은 홍길동입니다.태그 사이의 내용을 보여 주는 children
//부모 컴포넌트 (App.jsx)
import Mycomponent from './MyComponent';
const App = ( ) => {
return <MyComponent>하이루루</MyComponent>;
};
export default App;// 자식 컴포넌트
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.children}입니다. </div>
};
MyComponent.defaultProps = {
name: '홍길동'
};
export default MyComponent;
// 안녕하세요, 제 이름은 하이루루입니다.Props 비구조화 할당을 통해 내부 값 추출하는 방법
: 위의 예시들은 MyComponent에서 props 값을 조회할 때마다 props.name, props.children과 같이 props.이라는 키워드를 붙이고 있다. 이를 좀 더 편하게 하기 위하여 비구조화 할당(구조분해할당)을 통하여 내부 값을 바로 추출하는 방법이다.
//부모 컴포넌트 (App.jsx)
import Mycomponent from './MyComponent';
const App = ( ) => {
return <MyComponent naem = "은달걀" >23</MyComponent>;
};
export default App;// 자식 컴포넌트
const MyComponent = props => {
const { name, children } = props;
return (
<div>
안녕하세요, 제 나이는 {children}입니다. <br/ >
제 이름은 {name}입니다.
</div>
};
MyComponent.defaultProps = {
name: '홍길동'
};
export default MyComponent;
// 안녕하세요, 제 나이는 23입니다.
// 제 이름은 은달걀입니다.위의 자식 컴포넌트에서 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용이 가능하다.
// 자식 컴포넌트
const MyComponent = ( { name, children } ) => {
return (
<div>
안녕하세요, 제 나이는 {children}입니다. <br/ >
제 이름은 {name}입니다.
</div>
};
MyComponent.defaultProps = {
name: '홍길동'
};
export default MyComponent;
// 안녕하세요, 제 나이는 23입니다.
// 제 이름은 은달걀입니다.PropsTypes를 통한 props 검증
// 자식 컴포넌트
const MyComponent = ( { name, children } ) => {
return (
<div>
안녕하세요, 제 나이는 {children}입니다. <br/ >
제 이름은 {name}입니다.
</div>
};
MyComponent.defaultProps = {
name: '홍길동'
};
MyComponent.propTypes = {
name: 'PropTypes.string'
};
// 이 경우, name 값은 항상 string으로 전달이 되어야 함을 의미한다.
// 만약 name을 숫자나 다른 타입으로 전달할 경우 에러가 난다.
export default MyComponent;isRequired를 통한 필수 props 설정
// 자식 컴포넌트
const MyComponent = ( { name, children } ) => {
return (
<div>
안녕하세요, 제 나이는 {children}입니다. <br/ >
제 이름은 {name}입니다.
</div>
};
MyComponent.defaultProps = {
name: '홍길동'
};
MyComponent.propTypes = {
name: 'PropTypes.string.isRequired'
};
// 이 경우, name 값은 항상 string으로 전달이 되어야 함을 의미한다.
// 만약 name을 숫자나 다른 타입으로 전달할 경우 에러가 난다.
// 부모 컴포넌트에서 props 값을 넘겨주지 않을 경우 에러가 난다.
export default MyComponent;
