React 💬6

🎈 Props 🎈

state와 props의 가장 큰 차이점은 props는 불변이라는 것이다.

우리가 container component가 state로 정의되어야 한다는 이유가 된다.

 

 

📌 Props 사용

🔧 component에 불변의 데이터가 필요하다면 props를 main.js. 안에 있는 reactDOM.render() 함수에 추가하거나, 🔧 component 안에 사용하면 된다.

 

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

 

💻

 

 

📌 Default Props

🔧 default 값을 component 생성자에 직접 넣어도 된다.

 

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

 

💻

 

결과는 전의 결과와 다르지 않다, 차이점은 우리는 이제 state만 변경하면 페이지의 데이터를 쉽게 변경할 수 있다는 것입니다.

 

 

📌 Validating Props

🔧 이번에는 App 컴포넌트에 우리가 필요한 모든 props를 넣어보자.

🔧 App.propTypes가 props validation을 위해 사용될 것이다.

🔧 만약에 props가 우리가 명시한 대로 쓰이지 않았다면 console에서 오류 메시지를 내보낼 것이다.

🔧 validation 패턴을 구체화한 후에, App.defaultProps를 세팅하자.

 

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

 

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

 

💻