props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
import MyComponent from './MyComponent'
const App = () => {
return <MyComponent name = "React" />;
};
export default App;
name에 React가 props로 전달되었다.
name 값을 지우게 된다면
props에 값이 전달되지 않는다.. props로 값을 따로 지정하지 않았을때 보여 줄 기본값을 설정할 수 있다.
const MyComponent = (props) => {
return <div>안녕하세요, 제 이름은{props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name: '기본이름',
};
export default MyComponent;
위 사진과 같이 나온다면 defaultProps 설정 성공!