REACT_템플릿 문자열

- ES(ECMA 스크립트) 는 표준화된 스크립트 언어이고 ES 뒤에 붙은 숫자는 버전을 의미한다

2011년부터 사용된 ES5가 웹 표준처럼 사용되고 있다. 2015년 발행된 ES6은 많은 유용한 기능이 추가됐고, 

javascript는 이 기술 규격을 따른다. react도 javascript 기반의 언어이기 때문에 ES6의 모든 기능 사용가능하다

 

@ startsWith(), endsWith(), includes() 는 ES6에 추가된 String 함수들이다

startsWith()  변수 앞에서부터 endsWith()는 변수 뒤에서부터 일치하는 문자열이 있는지 찾음

includes()는 위치에 상관없이 변수에 특정 문자열이 포함돼 있는지 판단한다

함수 조건에 부합하면 true, 부합하지 않으면 false를 반환한다

 

- R009_Es6.js

import React, {Component} from 'react';

class R009_Es6 extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        var jsString1 = '자바스크립트';
        var jsString2 = '입니다\n 다음 줄입니다';
        console.log(jsString1 + ' 문자열' + jsString2 + '~');
        var Es6String1 = 'ES6';
        var Es6String2 = '입니다';
        console.log('${Es6String} 문자열${Es6String}!!____ 다음줄 입니다');
        var LongString = "ES6에 추가된 String 함수들입니다";
        console.log('startsWith : ' + LongString.startsWith("ES6에 추가"));
        console.log('endsWith : ' + LongString.endsWith("함수들입니다"));
        console.log('Includes : ' + LongString.includes("추가된 String"));
    }
    render() {
        return(<h2>[THIS IS ES6 STRING]</h2>)
    }
} 
export default R009_Es6;

 

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Es6 from './R009_Es6.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <Es6/>
    </div>
  );
}

export default App;

 

 

결과