망할고양이의 도피처

props

props는 properties를 가리키는 용어입니다. 컴포넌트의 속성을 설정할 때 사용하는 요소입니다. 

컴포넌트를 불러와 사용하는 상위 컴포넌트에서 설정할 수 있습니다. (강좌에서는 상위 컴포넌트 : App 입니다.)

component 하위에 props.js 파일을 하나 생성하도록 합니다. 

Props.js

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );

Apps.js를 아래와 같이 수정 합니다. 

Props.js에서 props값을 출력하도록 작성하고 Apps.js에서 props.name 값을 전달합니다. 

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props name="abcd"/>
    </div>
  );
}

export default App;

Apps에서 전달한 abcd 값을 삭제하면...?

import './App.css';
import Props from './component/Props';
function App() {
  return (
    <div className="App">
      <Props/>
    </div>
  );
}

export default App;

값이 절달되지 않아 값의 출력이 없습니다. 그럼 기본값을 설정하는 defaultProps를 사용해보겠습니다. 

Props.js를 다시 수정하겠습니다.

export default function Props(props){

    return(
        <>
        <div>props를 사용해 볼께요.</div>
        <div>props의 이름은 {props.name} 입니다. </div>
        </>
    );
}

Props.defaultProps = {
    name : "기본값"
};