props란

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

JSX 내부에서 props 렌더링

import MyComponent from './MyComponent'

const App = () => {
	return <MyComponent name = "React" />;
};

export default App;

name에 React가 props로 전달되었다.

name 값을 지우게 된다면

props에 값이 전달되지 않는다.. props로 값을 따로 지정하지 않았을때 보여 줄 기본값을 설정할 수 있다.

defaultProps

const MyComponent = (props) => {
    return <div>안녕하세요, 제 이름은{props.name}입니다.</div>;
};

MyComponent.defaultProps = {
    name: '기본이름',
};
export default MyComponent;

위 사진과 같이 나온다면 defaultProps 설정 성공!