React STEP 8 - EcmaScript6 문법 - 1

⭐ EcmaScript

• 표준화된 스크립트 언어, 숫자는 버전을 의미
• ES6는 많은 기능이 추가 되었고, React에서도 모든 기능을 사용할 수 있습니다.

1. 템플릿 문자열 사용하기

• 문자열과 변수를 합치기 위해서는 문자열을 따옴표로 감싸고 +로 연결
• 따옴표가 아닌 백틱(')으로 전체 문자열과 변수를 묶어 사용할 수 있습니다.
• 변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개행 문자 없이도 사용할 수 있습니다.

class ES6 extends React.Component {
  componentDidMount() {
    var jsString1 = "JavaScript";
    var jsString2 = "입니다. \n 다음줄 입니다.";
    console.log(jsString1+" 프로그래밍"+jsString2)

    let ES6String1 = "ES6";
    let ES6String2 = "입니다. ";
    console.log(ES6String1+" 프로그래밍"+ES6String2);

    let LongString = "ES6에 추가된 String 함수들입니다."
     console.log("startsWith : "+LongString.startsWith("ES6에 추가"));
     console.log("endsWith : "+LongString.endsWith("함수들입니다."));
     console.log("includes : "+LongString.includes("추가된 String"));
  }

  render() {
    let h2Style = {
      fontSize: 16,
      fontWeight: "normal"
    };

    return(
      <h2 style={h2Style}>This is ES6 String </h2>
    )
  }
}

class App6 extends React.Component {
  render(){
    let h1Style={
        fontWeight: "normal"
    };
    return(
        <div>
            <h1 style={h1Style}>React Example</h1>
            <ES6 />
        </div>
    );
  }
}

root.render(
  <App6></App6>
)

 

2. var, let, const

• var는 유연한 방식으로 변수를 재선언, 재할당할 수 있습니다.
• 이런 특징으로 인해 변수의 사용 범위가 불확실해지거나 의도하지 않은 변수의 변경이 발생할 수 있습니다.
• 이러한 var의 단점을 보완하기 위해 let, const가 추가되었습니다.
• var -> 재선언, 재할당을 허용하기 때문에 경고 메세지가 출력되어도 페이지가 정상적으로 표시.
• let -> 재선언 x, 재할당 O
• const -> 재선언x, 재할당x

class Variables extends React.Component {
  constructor(props) {
    super(props);
    this.state={};
  }

  componentDidMount() {
    var varName = "React";
    console.log("varName : " + varName);

    var varName = "React 18.2.0";
    console.log("varName : " + varName);

    let letName = "React";
    console.log("letName : " + letName);

    letName="React 18.2.0";
    // console.log("letName : "+letName);
    // const constName="React";
    // console.log("constName : "+constName);
    // const constName="React 18.2.0";
    // Parsing error : Identifier 'constName' has already been declared
    // constName="React 18.2.0";
    // Uncaught TypeError : Assignment to constant variable
  }
  render(){
    let h2Style={
        fontSize: 16,
        fontWeight: "normal"
    };
    return(
        <h2 style={h2Style}>This is ES6 Variables.</h2>
    );
  }
}
class App7 extends React.Component {
  render(){
      let h1Style={
          fontWeight: "normal"
      };
      return(
          <div>
              <h1 style={h1Style}>React Example</h1>
              <Variables />
          </div>
      );
  }
}

root.render(
  <App7 />
);