JSX

Javascript + XML, ECMA Script 6 표준 사용, JSX내에 스타일시트를 포함함, 웹의 CSS와 많은 개념을 공유하지만 독자적인 포맷, CSS파일로 작성 불가

 

 

JSX 사용 시 주의 점

 1. 컴포넌트에서 여러 Element를 렌더링 할때 꼭 Container element안에 포함시켜야 한다.

"

Container element : <div>, <article>, <section>, <header>, <footer>, <form>, and more.

"

예를들어 reder 함수안에 <div>를 사용하지 않고 코드 사용시 에러가 발생한다.

이유는, Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 ㅅ ㅜ있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이뤄져야 한다는 규칙 때문

 

 2. jsx안에서 javaSript를 표현 할때,  {} 로 wrapping 하면 된다.

 render(){

     let text = "Hi"

     return(

       <div>{text}</div>

  );

}

 

 3. if else 문은 jsx에서 사용불가, 이에대한 대안으로 tenary expression condition ? true : flase 사용된다.

 render(){

     return(

       <p>{1==1? 'True' : 'False'</p>

  );

}

 또는,

  1===1 && <div>맞다!</div>

 4. JSX안에서 Style을 설정 할때는, string형식을 사용하지 않고  key가 camelCase인 객체가 사용된다.

   예를 들어, background_Color => backgroundColor

 render(){

     let style={

      color : 'aqua',

      backgroundColor: 'black'

  };

 return(

       <div style={style}>React CodeLab</div>

  );

}

 

5. JSX안에서 class를 설정 할 떄는 class=가 아닌 calssName=을 사용해야한다

 render(){

     return(

       <div className="box">CodeLab</div>

  );

}

 

6.  ES6를 적용, 변수의 저장공간을 두개로 나눴다(let, const)

 기존의 var의 경우 스코프의 설정 후, 내부의 스코프가 하나 더 생겨도 큰 스코프 안에서 변수가 공유된다. 이것은 함수형 체계인 자바스크립트의 문제이기도한데, 변수의 중복도 중복인데 재활용측면에서도 별로 좋지 않다.

 ES6의 경우 const, let을 통해 변수의 활용을 명확하게 나타낼 수 있다.

const : 한번선언 한 후, 변경되지 않음

let : 유동적인 값