JSX
JSX는
- JavaScript에 XML을 추가한 확장 문법이다.
- 리액트로 프로젝트를 개발할 때 사용됨 -> 공식적인 자바스크립트 문법이 아님
- 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함
JSX 문법 규칙
① 반드시 부모 요소 하나가 감싸는 형태
// 잘못된 예시 | |
function WrongExample() { | |
return( | |
<h1>Hello</h1> | |
<h5>이것은 잘못된 예시입니다.</h5> | |
) | |
} | |
// 올바른 예시 | |
function GoodExample() { | |
return( | |
<div> | |
<h1>Hello</h1> | |
<h5>이것은 올바른 예시입니다.</h5> | |
</div> | |
) | |
} |
└ 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함
⑴ 부모 요소 하나로 감싸줘야하는 이유가 무엇일까요?
→ Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.
⑵ 무조건 <div>요소를 사용하여 감싸야 할까요?
→ 그렇지 않다. Fragment라는 기능을 사용할 수도 있음. Fragment는 <Fragment> 혹은 <>의 형태로 표현할 수 있음.
② JavaScript 표현
└ JSX가 내부에서 코드를 { }로 감싸면 자바스크립트 표현식을 작성할 수 있음
import React from 'react'; | |
const Example = () => { | |
const name = "hello"; | |
return ( | |
<> | |
<h1>Halo! {name}</h1> | |
<h5>안녕하세요</h5> | |
<> | |
) | |
} |
③ 조건부 연산자(삼항 연산자)
└ if문과 for문은 JavaScript 표현식이 아니기 때문에 JavaScript 표현식에서 사용할 수는 없지만, 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문(for문)을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하면 됨
import React from 'react'; | |
const Example = () => { | |
const name = "Hello"; | |
return ( | |
<div> | |
{name === "Hello" ? (<h1>Coreect</h1>) : (<h1>Wrong</h1>) | |
</div> | |
) | |
} |
④ ReactDOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용
└ JSX에서 자바스크립트 문법을 쓰려면 { }를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 함
└ 카멜 표기법 (background-color → backgroundColor)으로 작성해야 함
└ HTML에서 CSS 클래스를 사용할 때에는 class라는 속성을 사용하지만, JSX에서는 className을 사용함
import React from 'react'; | |
const Example = () => { | |
const style = { | |
fontSize: "12px", | |
backgroundColor: "blue | |
} | |
return( | |
<div style={style}>Hello!!</div> | |
); | |
} |
import React from 'react'; | |
const Example = () => { | |
const style = { | |
fontSize: "20px", | |
backgroundColor: "yellow" | |
} | |
return ( | |
<div className="example">Hello!!</div> | |
); | |
} |
⑤ JSX에서 주석
└ JSX에서 {/* ... */}와 같은 형식을 사용함
└ 시작태그를 여러줄로 작성할 때, 내부에서 //의 형식을 사용할 수 있음
import React from 'react'; | |
const Example = () => { | |
return( | |
<> | |
{/* 안녕하세요 */} | |
<div | |
// 이것은 주석! | |
>Hello!!</div> | |
<> | |
); | |
} |
⑥ undefined를 렌더링하지 않기
└ 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안됨
import React from 'react'; | |
const Example = () => { | |
const hello = "undefined"; | |
return hello; | |
} |
└ 하지만, JSX 내부에서 undefined를 렌더링하는 것은 괜찮음
import React from 'react'; | |
const Example = () => { | |
const hello = "undefined"; | |
return <div>{hello}</div>; | |
} |
앞으로 공부할 React의 기본문법이니 숙지할 것!!
'React > 2022-上' 카테고리의 다른 글
Async / Await (0) | 2022.03.26 |
---|---|
Rest-API vs GraphQL-API (0) | 2022.03.24 |
Template Literals (0) | 2022.03.24 |
Git (0) | 2022.03.23 |
Import & Export (0) | 2022.03.22 |