1_es6, es7 학습, JSX 문법

출처: 리액트를 다루는 기술-VELOPERT

들어가며

---

es6, es7 문법

es6

• 모듈을 불러오는 방법.

  모듈을 불러오는 키워드 import.

  import fs from 'fs';

이전)

var React = require('react');
​
var Component = React.Component;
​

지금)

import React, {Componenct} from 'react';

• 클래스 개념

  클래스 없 vs 클래스 있

• var와 const, let 키워드

  *기본적으로 const 사용, 해당 값을 바꾸어야 할 때 let 사용하면 됨. *

  • var키워드: 해당 값을 사용할 수 있는 코드 영역이 함수 단위이다.

    const와 let의 해당 값을 사용할 수 있는 코드 영역은 블록 단위이다.

    const와 let은 블록 내부에서 중복 선언 불가.

  • const 키워드: 한 번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드.

    ​ 한 번 선언하겸 재설정 불가

  • let 키워드: 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드

    ​

• 화살표 함수 - 함수를 표현하는 새로운 방식, 함수를 파라미터로 전달할 때 유용

  일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다

  화살표 함수는 자신이 포함한 외부 scope에서 this를 계승받는다

  http://jeong-pro.tistory.com/110

  ​

es7

---

JSX문법

JSX= 자바스크립트의 확장 문법. 나중에 코드가 번들링되면서 Babel-loader를 사용하여 자바스크립트로 변환한다. 변환하면서 컴포넌트를 트리 구조의 객체로 정의할 수 있다.

• 감싸인 요소- 부모 요소 하나로 꼭 감싸야 함.

  why? virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록.

  컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있기 때문.

• Fragment 컴포넌트- 부모 요소 하나로 감싸야 하는데 (div같은 걸로 감싸고 싶지 않을 때) Fragment 컴포넌트 이용하면 됨.

  코드: Component와 함께 Fragment 불러와서 사용

  
  import React, {Component, Fragment} from 'react'; //이렇게 import
  ​
  class App extends Component {
  ​
  render() {
  ​
  return (
  ​
      <Fragment>  //fragment로 감싸기
  ​
  <h2> hello </h2>
      </Fragment>  //fragment로 감싸기
  ​
  );}}
  ​

  ​

• 자바스크립트 표현식 사용 가능 - 자바스크립트 표현식을 작성하려면 JST 내부에서 코드를 {}로 감싸면 됨.

  
  import React, {Component, Fragment} from 'react'; 
  ​
  class App extends Component {
  ​
  render() {
  const text='DDDDDDDD'; 
  return (
  ​
    <div>
  <h2> hello {text} </h2> //{}로 감싸서 표현
      </div>
  ​
  );}}
  ​

  ​

• if문 대신 사용하는 조건부 연산자 (삼항 연산자 , &&연산자)

  JSX 내부의 자바스크립트 표현식에서 if문 사용 불가 but, 삼항/&&연산자를 통해 조건에 따른 것 렌더링 가능

  코드:

  
  import React, {Component, Fragment} from 'react'; 
  ​
  class App extends Component {
  render() {
  const text='DDDDDDDD'; 
  const condition=true;
  return (
  ​
    <div>
  <h2> hello {text} </h2> //{}로 감싸서 표현
      {
      condition ? '참':'거짓' //condition값 true이므로 참 렌더링됨
      condition && '보여주세요' //condition값 true이므로 참 렌더링됨
                          //fale라면 아무것도 렌더링 되지 않음
      }
      </div>
  ​
  );}}
  ​

• 인라인 스타일링: 스타일 적용할 때 문자열 형태로 적용할 수 없어서 CSS 스타일을 자바스크리트 객체 형식으로 만들어 적용해야 함.

• 리액트에서 클래스 설정할 때는 class 대신 className 키워드로 설정해야 함.

• 언제나 태그 닫기 (html에서는 안닫는 input, br같은 태그도)

• 주석 //주석 (x) / * */ (x)

  • 코드:

    
    <div
    style={style}
        //self closed 태그에서만 작동되는 주석. 가능
    /*이렇게도 주석 가능*/
    />
    //여기선 안됨.
    /*여기서도 안됨. */
    </div>

  ​

  ​

---