props?
props는 "properties"를 줄인 표현어로 컴포넌트 속성을 설정할 때 사용하는 요소라고 합니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.
JXS에서 props 렌더링
우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name 이라는 props를 렌더링하도록 설정해봅시다.
function MyComponent(props) {
return (
<div>
안녕하세요, 저는 {props.name} 입니다.
</div>
)
}
export default MyComponent
부모 컴포넌트에서 props값 지정하기
부모 컴포넌트인 App.js 에서 MyComponent의 props 값을 지정해봅시다.
import "./App.css";
import MyComponent from "./pages/MyComponent";
function App() {
return (
<div>
<MyComponent name="주녘"></MyComponent> // name ="주녘" 을 추가하였습니다.
</div>
);
}
export default App;
props 기본값 설정 : defaultProps
부모 컴포넌트에서 작성한 name 값을 지우고 저장해봅시다.
현재 name에 값을 지정하지 않았기 때문에 안녕하세요, 저는 입니다. 라고 보이게 됩니다.
이처럼 props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 defalutProps을 알아봅시다.
// MyComponent.js
import React from 'react'
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}
MyComponent.defaultProps = {
name: '기본이름'
};
export default MyComponent
태그 사이의 내용을 보여주는 children
리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있습니다.
바로 children 입니다.
부모 컴포넌트인 App.js 파일을 수정해봅시다.
import "./App.css";
import MyComponent from "./pages/MyComponent";
function App() {
return (
<div>
<MyComponent>리액트</MyComponent>
</div>
);
}
export default App;
위의 코드에서 <MyComponent>리액트</MyComponent> 태그 사이에 작성한 "리액트"라는 문자열을 MyComponent 내부에서 보여주려면 props.children 값을 보여주어야 합니다.
자식 컴포넌트인 MyComponent.js를 수정해봅시다
// MyComponent.js
import React from 'react'
const MyComponent = props => {
return <div>
안녕하세요, 제 이름은 {props.name}입니다.
children 값은 {props.children} 입니다.
</div>
}
MyComponent.defaultProps = {
name: '기본이름'
};
export default MyComponent
비구조화 할당 문법을 사용하여 props 내부 값 추출해보기
props 값을 조회할 때마다 props.name, props.children과 같이 props. 이라는 키워드를 앞에 붙여 사용하고 있습니다.
조금더 편리하게 사용하기 위해 비구조화 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보겠습니다. 😊
// MyComponent.js
import React from 'react'
const MyComponent = props => {
const {name, children} = props;
return <div>
안녕하세요, 제 이름은 {name}입니다.
children 값은 {children} 입니다.
</div>
}
MyComponent.defaultProps = {
name: '기본이름'
};
export default MyComponent
// MyComponent.js
import React from 'react'
const MyComponent = ({name, children}) => {
return <div>
안녕하세요, 제 이름은 {name}입니다.
children 값은 {children} 입니다.
</div>
}
MyComponent.defaultProps = {
name: '기본이름'
};
export default MyComponent
조금 더 간단해진것을 볼 수 있습니다.
propTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용합니다.
컴포넌트의 propTypes를 지정하는 방법은 위 쪽의 defaultProp을 설정하는 것과 비슷합니다.
propTypes 를 사용하기 위해서는 상단에 import 구문을 사용하여 불러와야 합니다.
// MyComponent.js
import PropType from 'prop-types'; // PropType import
const MyComponent = ({ name, children }) => {
return (
(... 이하생략)
);
};
MyComponent.defaultProps = {
name: "기본이름"
}
MyComponent.propType = {
name:PropType.string // name 값을 문자열 형태로만 전달해야함!
}
export default MyComponent;
이런식으로 설정을 해주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다.
App.js에서 name이 문자열이 아닌 다른 값으로 전달한다면 어떻게 될까요?
import './App.css';
import MyComponent from './pages/MyComponent';
const App = () => {
return <MyComponent name={10}>리액트</MyComponent> // name 값을 숫자 10으로 전달해보았습니다.
}
MyComponent.defaultProps = {
name: "기본이름"
};
export default App;
값은 나타나기는 했지만, 콘솔에 경고창이 뜨는 것을 확인할 수 있습니다.
오류 메시지를 확인했으면 name 값을 제대로 설정해주시면 됩니다.
isRequired를 사용하여 필수 propTypes 설정
propTypes를 지정하지 않았을 때 경고메시지를 띄워주는 작업을 해봅시다.
propTypes를 지정할 때 뒤에 isRequired를 붙여주면 끝입니다!
favoriteFruit 라는 문자열을 필수 props로 지정해보겠습니다.
// MyComponent.js
import PropTypes from 'prop-types';
const MyComponent = ({ name, favoriteFruit, children }) => { // favoriteFruit 추가
return (
<div>
안녕하세요, 제 이름은 {name}입니다.
<br />
children 값은 {children}
입니다.
<br/>
제가 좋아하는 과일은 {favoriteFruit}입니다.
</div>
);
};
MyComponent.defaultProps = {
name: "기본이름"
}
MyComponent.propTypes = {
name: PropTypes.string,
favoriteFruit: PropTypes.string.isRequired // 문자열 입력받게
};
export default MyComponent;
만약 favoriteFruit 를 지정하지 않았으면 어떻게 될까요?
favoriteFruit proptype를 입력하라고 경고창이 뜨는 것을 볼 수 있습니다.
