리액트 공부 day1 - 상속

React.Component 에 있는 기능들을 class App 이 상속받는법

react에서 class를 만들때 2가지 요소가 있어야한다.
 1) constructor :

     부모의 생성자를 호출한다. App의 부모는  React.Component 이다.

     무조건 super(props); 를해주어야 App이 가진 constructor를 실행한다.

 2) render() 

console.clear();

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div>
        <div>안녕하세요. {this.props.name}</div><br />
      </div>
              )
  }
}

ReactDOM.render(<App name="gomigomi" />, document.getElementById('root'));

 출력값 : 

안녕하세요. gomigomi

사각형만들기

/* React.Component 상속하여 class App에 넣겠다.
   react 만들때는 필수
   1. class를 만들때 2가지 요소가 있어야한다.
      1) constructor
      2) render()
*/
// console.clear();

// class App extends React.Component {
//   constructor(props) {
                  /*속성명에 값을 넣으면 props로 넘어온다.*/
//     super(props);
//   }
  
//   render() {
//     return <Square />
//   }
// }

class App extends React.component {
  constructor(props) {
    super(props);
  }
  render() { 
    return <Square />
  }
}


class Square extends React.component {
 constructor(props){
   super(props);
 }
  
 render() { 
   const style = {
     'width' : '100px',
     'height': '100px',
     'background-color' :'red'
   }
   
   console.log(style.width);
   
   return ( 
   <div style={style} />
     );
 }
}

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

 

코드펜에서 오류가 나는데, 다른 프로그램을 이용해서 해보자.