JSX

JSX ?

- React에서 html과 같이 비슷하게 작성 할 수 있도록 해주는 문법을 JSX라고 합니다.

- 자바스크립트의 확장문법

- 브라우저에서 실행하기 전에 코드가 번들링되는 과정을 바벨을 사용하여 일반 자바스크립트 형태의

코드로 변환됩니다.

- JSX는 자바스크립트의 공식적인 문법이라고 할 수는 없습니다.

 

 

JSX 문법의 특징 및 준수사항

- 컴포넌트에 여러 요소가 있다면 반드시 부모요소 하나가 감싸는 형태여야 합니다. (형제노드 안됨XXX)

  (Virtual Dom방식에서는 컴포넌트 변화를 감지 할 떄 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리구조로

이루어져야 한다는 규칙이 있기 때문입니다.)

- 자바스크립의 값을 JSX 안에서 렌더링 할 수 있습니다. (EX 예제의 asterisk 값을 {asterisk} 에 넣어서 렌더링 할 수있습니다.)

- JSX 내부의 자바스크립트 표현식 내에서 if문을 사용 할 수 없어서 삼항연산자를 사용합니다.

- undefined 를 렌더링 하지 않아야 함,  JSX 함수 내부에서는 undefined 를 렌더링 하는것 자체는 에러가 나지 않으나

undefined 을 return으로 내보낼수 없다, 때문에 ||(or연산자) 등으로 방지 하도록 하자.  (undefined 변수의 값이 할당 되지 않았거나, 객체의 프로퍼티가 존재하지 않는 경우를 나타냄) 

- jsx 에서는 style 을 넣어 줄때에는 

xx이렇게 안됨xx <div style="fontSize : 10px">fff</div>      xxxx   

위와 같은 형식으로 넣어줄 수 없다, 자바스크립트 에서 쓸 수 있는 민감한 기호들이 많기때문,

그래서 object형식으로 넣어 준

<div style={ {color : 'blue' ,  fontSize : '30px'}    }>fff</div>

- 기존에 HTML에서 스타일을 지정할 때 background-color 과 같이 표기 된 이름을 backgroundcolor 로 - 문자를 제거하고

카멜 표기법으로 작성해야 한다.

function App() {

  const style = {

   backgroundcolor :'white' ,

   fontSize : '10px'

  }

- div 등에 class 속성을 정할때 className으로 표기한다

    <div className="reactClass"> '-' </div>

- 반드시 닫아주는 태그를 작성해야 한다!

- 주석은 아래와 같은 형태로 {/*  주석*/} 작성합니다.

{/*  주석

*/}

혹은 시작태그를 여러줄로 작성시 // 로 주석을 작성할 수도있습니다.

      <div className="hnav"  //nav css

      >

 

 

 

 

카멜 표기법은 아래 포스팅을 참고하자

https://leggo.tistory.com/224

카멜 표기법 (Camel Case)

 

 

자료참고 : https://chanhuiseok.github.io/posts/react-3/

[React] React 에서 사용하는 JSX 문법