Elice) JSX

JSX

 

1. JSX 란?

 

JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장

HTML과 비슷하게 생겼으나 JavaScript로 HTML과 다른 부분이 있다.

 

const App = () => {
	return (
    <div>
    <p> Hello World </p>
    </div>
    )
   }

JSX를 실제 사용하게 되면 JS형식으로 Transcompile 된다.

 

 

---

 

 

 

2. JSX의 장점

 

1. 개발자의 편의성 향상

2. 협업에 용이 / 생산성 향상

3. 문법 오류와 코드량 감소

 

! HTML과의 차이점

 

1. HTML 태그 내에서 JavaScript 연산

2. class = className

3. style은 Object로

4. 닫는 태그는 필수로 사용

5. 최상단 element는 반드시 하나여야 한다.

 

// style을 object로 사용하는 예시

<div className = "HelloWorld" style = {{padding : 5, color : "red"}}>
	안녕하세요 </br>
    반갑습니다.
</div>

1) 중괄호를 두개 쓰는 이유 = 첫번째 중괄호는 자바스크립트 표현을 사용하겠는 뜻이며,

두번째 중괄호는 자바스크립트 오브젝트의 시작을 알리는 의미

 

2) br , input의 원래 닫는 태그가 없는 태그들에도 꼭 닫는 태그를 써야한다.

ex) <br /> , <input />

 

3) Inline style의 Property name은 Camel Case로 사용

ex) font-size = fontSize , padding-left = paddingLeft

 

4) 최상단 element

 

const Test = () => {
	return (
    <div> Test1 </div>
    <div> Test2 </div>
    )
   }
   
// 최상단 element가 하나가 아니기 때문에 error가 발생한다.

const Test2 = () => {
	return (
    <>
    <div> Test1 </div>
    <div> Test2 </div>
    </>
    )
   }
   
// <>를 이용하여 최상단 element를 만들어준다.

<> , </> 는 React.Fragment로 최상단 element를 만들어 주기 위한 표시이다.

실제 렌더링에서는 React.Fragmen의 내부 내용만 표시가 된다.