React component props (Cannot assign to read only property 'prototype' of function )

App.js

import './App.css';
import React, {} from 'react';

import MyComponent from './myComponent';


function App(){
  
  return(
    <>
      <MyComponent name = "리엑트"/>

    </>
  )

}


export default App;

 

 

myComPonent.js

function MyComponent() {
    return (
            <div>나의 component</div>
          );
  }


export default MyComponent;

 

결과 

 

myComponent.js (화살표 함수로 변경 및 props 전달)

//화살표 함수
const MyComponent = (props) => {


  return (
          <div>
          {props.name}<br/>
          {props.children}
          </div>

        );
}


export default MyComponent;

 

console.log를 확인해 보면 props가 Object로 들어가있고 name에 App.js의 '리엑트' , JS값이 들어가있다.

App.js

import './App.css';
import React, {} from 'react';

import MyComponent from './myComponent';

//JSX

function App(){
  
  return(
    <>
      <MyComponent name = "리엑트">JS</MyComponent>
    </>
  )

}



export default App;

 

만약 props에 값이 들어가 있지 않는다. 그러면 아무값도 나오지 않기 때문에 

defaultProps 기능 사용  (myComponent.js)

 

import PropTypes from 'prop-types';

 

MyComponent.defaultProps = {
  name : "prop에 값이 비어 있습니다.",
}

 

App.js (MyComponent에 아무값도 넣지 않)

import './App.css';
import React, {} from 'react';

import MyComponent from './myComponent';

//JSX

function App(){
  
  return(
    <>
      <MyComponent/>
    </>
  )

}



export default App;

 

 

 

App.js에서  name에서  숫자를 넣을 경우 

PropTypes.string  으로 강제로 Type Casting에러 발생하게 하기

 

 

일단  myComponent.js에 있는 화살표 함수를  class형식으로 변경하기 (기존에 있는 코드는 주석)

 

먼저  PropTypes 를 import를 한다.

import PropTypes from 'prop-types';

 

그리고  class형식으로 마이그레이션

class MyComponent extends Component{
  render(){
  const {name,children} = this.props;
  console.log({name, children});
  return (

    <div>
    {name}<br/>
    {children}
    </div>
  );
}
}

PropTypes String 추가

//propTypes
MyComponent.prototype = {
  //name: PropTypes.string,
  name : PropTypes.string
};

 

App.js에서  함수로 App 호출 

 

import MyComponent from './myComponent';

function App(){
  
  return(
    <>
      <MyComponent name = {10}>JS</MyComponent>

    </>
  )

}

prototype를 읽지 못한다는 에러가 뜸....

 

prototype이 아니라 propTypes 임....  (자동완성을 하면 propTypes 이 대문자로 나와서 이부분 주의하자.... )

 

//propTypes
MyComponent.propTypes = {
  //name: PropTypes.string,
  name : PropTypes.string
};

실행을 해보면 type 캐스팅 오 뜸 

 

App.js에 있는  MyCompnent를  String값으로 변경 ...  실행이 잘됨 

function App(){
  
  return(
    <>
      <MyComponent name = {10}>JS</MyComponent>

    </>
  )

}

 

잔체코드 

myComponent.js

import PropTypes from 'prop-types';
import React, {Component} from 'react';
// function MyComponent() {
//     return (
//             <div>나의 component</div>
//           );
//   }


//화살표 함수
// const MyComponent = ({name, children}) => {

//   //const {name, children} = props;
//   //console.log(props);
//   return (

//           <div>
//           {name}<br/>
//           {children}
//           </div>
//         );
// }

class MyComponent extends Component{
  render(){
  const {name,children} = this.props;
  //console.log({name, children});
  return (

    <div>
    {name}<br/>
    {children}
    </div>
  );
}
}


//defaultProps
MyComponent.defaultProps = {
  name : "prop에 값이 비어 있습니다.",
};

//propTypes
MyComponent.propTypes = {
  //name: PropTypes.string,
  name : PropTypes.string
};



export default MyComponent;

 

 

App.js 

import './App.css';
import MyComponent from './myComponent';



function App(){
  
  //const name = "리액트";
  return(
    <>
      <MyComponent/>
      {/* <MyComponent name = "리엑트">JS</MyComponent> */}
      {/* <MyComponent name = {10}>JS</MyComponent> */}

    </>
  )

}



export default App;