JSX 기초정보

리액트JS에서 사용되는 JSX 문법에 대한 내용 입니다.

실행환경: https://codepen.io/pen/

실행환경 Settings :

 - JavaScript Preprocessor - Babel

 - Add External Script/Pens - Search -> 2가지 react(콤포넌트컴파일처리), react-dom(렌더링출력처리)

작업미리보가(아래)

 

 

#JS(Babel)코드:

```

/* JSX안에서 css 스타일 설정은 , 속성명이 camelCase 형태로 사용됩니다. */
class Codelab extends React.Component{
  render(){
    let text='안녕하세요. 나는 리액트JS 입니다.'//ES6버전에서는 변수선언시 let 사용. 블럭 scope
    let style = {
      color:'gold',
      backgroundColor: 'black',
    }
    return(
      <div style={style}>{/*주석표현 background-color -> backgroundColor*/}
        {text}
      </div>
    );
  }
}
class App extends React.Component{
 render() {
   return(
     <Codelab/>
     );
 }
}
ReactDOM.render(<App/>, document.getElementById('root'));//HTML 출력 명령

```

#HTML출력

```

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

```

```

 

/* state 유돟 변수값 전달 방식 */
class Counter extends React.Component{
   constructor(props){ //생성자 먼저 실행됨.
    super(props); //props를 상속받아서 아래 this.state 변수에 접근가능.
    this.state={
      value:0
    };
     this.handleClick = this.handleClick.bind(this);//바인딩 처리.
  }
  handleClick() {
    /* 비추천 방식
    this.state.value = this.state.value + 1;
    this.forceUpdate();
    */
    this.setState({
      value: this.state.value + 1
    })
  }
  render(){
    return(
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleClick}>클릭</button>{/*.this.handleClick.bind(this) 생성자에 서 바인딩처리*/}
      </div>
    );
  }
}
class App extends React.Component{
 render() {
   return(
     <Counter/>
     );
 }
}
ReactDOM.render(<App/>, document.getElementById('root'));//HTML 출력 명령

```

```

/* 컴포넌트 매핑
/* 데이터배열처리 자바스크립트내장 Map함수사용 새로운 배열 생성 */
/* 콜백-무명함수를 작성할때 사용하는 함수 방식차이
참조: 리액트의 ES6 함수를 ES5로 변환시켜서 보여주는 사이트 https://es6console.com/ (이 문서 하단에 결과 보기있음.)
*/
class ContactInfo extends React.Component{
  render(){
    return(
      <div>
        {this.props.contact.name} {this.props.contact.phone}
      </div>
    )
  }
}
class Contact extends React.Component{
  constructor(props){
    super(props);
    this.state={
      contactData:[
        {name:'연락처1', phone:'010-0000-0001'},
        {name:'연락처2', phone:'010-0000-0002'},
        {name:'연락처3', phone:'010-0000-0003'},
        {name:'연락처4', phone:'010-0000-0004'},
        {name:'연락처5', phone:'010-0000-0005'},
      ]
    }
  }
  render(){
    const mapToComponent = (data) => {
      return data.map((contact,index)=>{
        return (<ContactInfo contact={contact} key={index}/>)
      })
    };
    return(
      <div>
        {mapToComponent(this.state.contactData)}
      </div>
    );
  }
}
class App extends React.Component{
 render() {
   return(
     <Contact/>
     );
 }
}
ReactDOM.render(<App/>, document.getElementById('root'));//HTML 출력 명령

```

위 작업결과(아래)

 

 

```

/* 콜백-무명함수를 작성할때 사용하는 함수 방식차이
참조: 리액트의 ES6 함수를 ES5로 변환시켜서 보여주는 사이트 https://es6console.com/
*/
let result = numbers.map((num) => {
  return num * num;
  });

let one = a => console.log(a);

let tow = (a,b) => console.log(a,b);

let three = (c,d) => {
 console.log(c);
  console.log(d);
}

let four = () => {
  console.log('파라미터 없는 콜백함수');
};

const mapToComponent = (data) => {
      return data.map((contact,index)=>{
        return (<ContactInfo contact={contact} key={index} />);
      });
    };

```

위 리액트 ES6 문법을 -> 구 ES5 문법으로 확인 하기 https://es6console.com/

 

자바스크립트 es5 -> es6 는 자바로 대응하자면, java7 -> java8로 기능이 추가된 것과 같다.

자바스크립트에서는 애로우(arrow-화살표)함수라고 하고, Java에서는 람다 식 이라고 합니다.

 

Ps. es6 -> es5 변환 예-(아래)

// Arrow Function방식으로 호출할 때
function objFunction() {
  console.log('Inside `objFunction`:', this.foo);
  return {
    foo: 25,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

objFunction.call({foo: 13}).bar(); // objFunction의 `this`를 오버라이딩합니다.

//es6(엑마스크립트6) 애로우 함수 아래
var wwrollplay = setTimeout(() => {
		$(".rollplay").css('display','none');
}, 6000);
//es5(엑마스크립트5) 아래
var wwrollplay = setTimeout(function () {
	$(".rollplay").css('display','none');
}, 1000);