Skip to content

3. Props

Jump to bottom
hejin edited this page Dec 4, 2016 · 3 revisions

1) Hello Props World

Props의 기초인 Hello world를 만들어 봅시다~ 편의상 하나의 js에 클래스를 모두 넣었습니다.

UI 개발자의 놀이터인 CodePen.io를 사용하시면 좋습니다.

index.html

<div id="root"></div>

App.js

class App extends React.Component{
  render(){
    return (
      <div>
        <h4>{this.props.name}</h4>
        <pre>
          {this.props.children}
        </pre>
      </div>
    );
  }
}

ReactDOM.render(<App name="React Tutorial">Hello world</App>, document.getElementById("root"));

결과화면

Props란?

props란 컴포넌트 내부의 immutable data. 즉, 변화되지 않는 데이터입니다.

무슨말인가 싶죠? 쉽게 얘기해서 컴포넌트를 사용할때 넘겨주는 인자값(Parameter)입니다.

위 예제에서는 ReactDOM.render부분에서 App컴포넌트를 사용할때 인자값으로 name의 "React Tutorial"값을 전달했습니다.

App 컴포넌트에서는 this.props객체에 인자값들을 전달받습니다.

따라서, 전달받은 name의 값을 App 컴포넌트 안에서는 this.props.name으로 접근하여 사용할 수 있는 것이죠

this.props.children은 뭔가요?

this.props.children은 컴포넌트 사용시에 Body 부분을 의미합니다.

해당 예제에서는 App 컴포넌트의 Body부분입니다.

2) Props의 기본값

컴포넌트에서 받는 인자값인 props의 기본값을 지정할 수 있습니다.

props의 기본 값을 지정하는 방법은 클래스 정의 하단부에 클래스이름.defaultProps를 설정합니다.

App.js

class App extends React.Component{
  render(){
    return (
      <div>
        <h4>{this.props.name}</h4>
        <pre>
          {this.props.children}
        </pre>
      </div>
    );
  }
}

App.defaultProps = {
  name : 'Empty Name'
};

ReactDOM.render(<App>Childrens</App>, document.getElementById("root"));

결과화면

App컴포넌트를 사용할때 name을 지정하지 않았지만, 기본값으로 "Empty Name"이 표현된 것을 확인할 수 있습니다!!

3) Props의 타입 검증

이제는 props의 타입 검증에 대해서 알아보겠습니다.

React에서는 props의 타입을 명시적으로 지정하여, validation을 할 수 가 있습니다!!

class App extends React.Component{
  render(){
    return (
      <div>
        <h4>{this.props.name}</h4>
        <pre>
          {this.props.children}
        </pre>
      </div>
   );
 }
}

App.defaultProps = {
  name : 'Empty Name'
};

App.propTypes = {
  name : React.PropTypes.string.isRequired,
  isReadOnly : React.PropTypes.bool,
  callback : React.PropTypes.func
};

ReactDOM.render(<App>Childrens</App>, document.getElementById("root"));

위와 같이 name의 타입으로 문자열을 지정했고 추가로 필수여부를 표시하였습니다.

또한, isReadOnly에는 boolean타입으로, callback은 function타입으로 명시할 수 있습니다.

그럼 결과가 어떻게 나올까요??

결과화면

아무런 변화가 나지 않았습니다...;;

이유는 추가한 js파일이 minified된 파일이라서 그렇습니다. 즉, react관련 js파일들을 min을 제거하고 추가하도록 합니다.

결과화면

보시는바와 같이 App컴포넌트를 사용할때 별도의 name을 지정하지 않았다고 에러가 발생합니다!!

타입검증, validation이라면서 이게 다냐구요? 네... 답니다...

사실 React에서 타입검증이라는 것은 우리가 예상했던 Validation처리가 아닙니다.

(필수 입력인데 사용하지 않으면, Alert 메시지를 사용자에게 대문짝만하게 표시하는 등)

그럼 왜 사용할까요?

React 타입 검증은 우리가 컴포넌트를 만들고 사용할때

이 컴포넌트의 인자값이 무엇이 필수로 필요한지

이 컴포넌트의 인자값 타입은 무엇인지

한눈에 파악하기 위한 용도가 가장 큽니다~

따라서, 추가적으로 console표시하는 것은 개발 중일때 (즉, minified를 사용하지 않을때) 경고(에러)를 발생합니다

Clone this wiki locally