1-2. props(properties)

props?

컴포넌트 속성을 사용할 때 사용하는 요소

먼저 1-1에서 사용했던 MyComponent.js파일을 수정해 보겠습니다.

import React from 'react';

const MyComponent = props => {

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

export default MyComponent;

이렇게 출력됩니다.
이제 App.js로가서 props를 설정하여 봅시다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent name="송한솔"/>
    </div>
  );
};

export default App;

이처럼 props를 통해 MyComponent의 name값에 ‘송한솔’을 줄 수 있습니다.

props의 기본값 설정하기(defaultProps)

이전에 생성한 MyComponent.js를 수정하여 defaultProps를 설정하겠습니다.

import React from 'react';

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

MyComponent.defaultProps = {
    name: '이름'
}

export default MyComponent;

그래도 여전히 '송한솔'이 출력되는 것을 볼 수 있습니다.

이는 기본값을 사용하기보다 설정해준 값을 우선하여 사용하기 때문입니다.
이제 App.js에서 props를 제거하여 봅시다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
		{/* <MyComponent name="송한솔"/>제거 */}
	    <MyComponent/>
    </div>
  );
};

export default App;

<MyComponent name = “송한솔”/>을 제거하니 기본값으로 설정한 ‘이름’이 출력됩니다.

defaultProps는 이처럼 값이 정해지지 않더라도 무언가를 출력해야할 때 사용할 수 있습니다.