[React] 리액트 기초 2 - function 으로 component 만들기, function으로 RoundButton 만들기

function 으로 component 만들기

 

 

 

HTML

 

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

<div id="root2"></div>

<div id="root3"></div>

 

 

 

 

 

JS(Babel)

 

console.clear();

 

function MyTag(props){

  console.log(props.name);

  return <h1>Hello, {props.name}!</h1>;

}

// JSX

 

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

 

// 태그네임은 대문자로 시작해야 함. (my-tag는 불가)

 

 

 

class MyTag2 extends React.Component{

  render(){

    return <h1>Hello, {this.props.name}!</h1>;

  }  

}

 

ReactDOM.render(<MyTag2 name="kim"/> , document.getElementById('root2'));

 

// class와 함수의 차이: class는 함수를 여러개 묶을 수 있는 단위

// class + 함수 이름 + extends React.Component

 

// 리액트로 태그 만들기

//  1. 태그명을 함수로 만든다

//  2. return을 JSX로

 

// 1. class로 태그를 만든다(복잡한 태그를 만들 때 사용)

 

 

// function Mytag(props){

//   return <h1>Hello, {props.name}!</h1>;

// }

 

// const element = <Mytag name ="bangul"/>;

 

// ReactDOM.render(element, document.getElementById('root'));

 

// // <Mytag name ="bangul"/> 을 변수에 담아도 되고, 그대로 render해도 된다.

 

 

 

 

 

function으로 RoundButton 만들기

 

 

HTML

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

<div id="root2"></div>

 

 

JS(Babel)

 

// 새로운 버튼 만들기

function RoundButton(props){

  const buttonStyle = {

    'padding' : '10px',

    'border-radius' : '20px'

  };

  

  return (

    <button style={buttonStyle}>

      {props.children}      

    </button>

  );

}

// 오픈, 클로즈 태그 안에 들어있는 텍스트가 바로 Children

 

ReactDOM.render(<RoundButton>새로운 버튼</RoundButton>, document.getElementById('root'));

ReactDOM.render(

  <div>

    <RoundButton>야옹</RoundButton>

  <RoundButton>고양이</RoundButton>{' '}

    <RoundButton>방울이</RoundButton>

  </div>,

  document.getElementById('root2'));

// JSX에 값을 넣을 때 최상위 엘리먼트는 단 하나여야 함!!!

//  {' '}를 넣으면 여백을 만들 수 있음.