props

class Codelab extends React.Component {  //Codelab라는 하위 컴포넌트이다. 
  render(){
     
   
    return(
        

        

hellow {this.props.name} 

  ///네임이라는 컴포넌트를 받는다.
        

{this.props.children}

   ///칠드런은 사이에 있는것을 받음
        

    );
  }
}

class App extends React.Component{      ///최상위 컴포넌트
  render(){
    return(
     this.props.name}>{this.props.children }
    );   ///{this.props.children }에는 i am your children들어간다.
  }  //왜냐면 컴포넌트 태그 사이에 들어가는것이 디스 칠드런에 들어가기 때문이다.
}

ReactDOM.render( i am your children, document.getElementById('root'));

 

 

map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 처리해서 그 결과로 새로운 배열을 생성합니다.

callbank 새로운 배열의 요소를 생성하는 함수, 세가지 인수를 갖는다.
thisArg 함수 내부에서 사용 할 this 값을 설정.

import React from "react";

class CustomButton extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: "클릭 안했음"
    };
  }
  handleClick = () => {
    this.setState({ clicked: "틀릭함!!" });
  };

  render() {
    return (
      

      
      

    );
  }
}

export default CustomButton;
클릭에 관하여

import React from "react";
import "./styles.css";
import CustomButton from "./CustomButton";

class App extends React.Component {
  render() {
    return (
      

        
        
        
        

Hello CodeSandbox

        

Start editing to see some magic happen!

      

    );
  }
}
export default App;