[React] 사각형을 이용해서 버튼 만들기, ES 6 변수 선언

사각형 이용해서 버튼 만들기

 

HTML

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

 

JS(Babel)

class App extends React.Component{

  constructor(props){

    super(props);

    // constructor -> 생성자, 설계도, 틀. 엘리먼트를 생성한다.

  }

  render(){

    return <Mybutton buttonName='안녕' />

  }

}

 

class Mybutton extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    return <Square>{this.props.buttonName}</Square>

  }

}

 

class Square extends React.Component{

  constructor(props){

    super(props);

  }

  render(){

    const style = {

      width: "100px",

      height: "100px",

      "background-color":"red",

      border: "10px solid black",

      margin: "10px"

    };

    

    return <div style={style}>{this.props.children}</div>

//   square 태그 안의 글이 나오게 된다.

  }

}

 

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

 

// 데이터는 위에서 아래로 흐른다.( App -> Mybutton -> Square 순으로 호출)

 

 

 

ES 6, 변수 선언

JS(Babel)

 

console.clear();

var a = 1;

const b = 2;

// B는 한번 세팅하면 바꿀 수 없는 읽기 전용 변수(READ-ONLY)

// 값이 한번 입력되고 바꿀 일이 없을 때 사용.

// 그 외에 let을 사용.

let c = 3;

 

// ES 6 -> 자바스크립트의 비교적 최신 문법

 

 

for (let i = 0; i<=10; i++){

  console.log(i);

}

 

console.log(i);

// 오류 출력, let i 는 for 문 밖에 영향을 끼치지 못함.