JSX

JSX

 

JSX는

• JavaScript에 XML을 추가한 확장 문법이다.
• 리액트로 프로젝트를 개발할 때 사용됨 -> 공식적인 자바스크립트 문법이 아님
• 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함

 

 

 

JSX 문법 규칙

 

① 반드시 부모 요소 하나가 감싸는 형태

 

└ 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함

 

⑴ 부모 요소 하나로 감싸줘야하는 이유가 무엇일까요?

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

 

⑵ 무조건 <div>요소를 사용하여 감싸야 할까요?

→ 그렇지 않다. Fragment라는 기능을 사용할 수도 있음. Fragment는 <Fragment> 혹은 <>의 형태로 표현할 수 있음.

 

 

 

② JavaScript 표현

└ JSX가 내부에서 코드를 { }로 감싸면 자바스크립트 표현식을 작성할 수 있음

 

 

 

 

③ 조건부 연산자(삼항 연산자)

└ if문과 for문은 JavaScript 표현식이 아니기 때문에 JavaScript 표현식에서 사용할 수는 없지만, 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문(for문)을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하면 됨

 

 

 

④ ReactDOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용

└ JSX에서 자바스크립트 문법을 쓰려면 { }를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 함

└ 카멜 표기법 (background-color → backgroundColor)으로 작성해야 함

└ HTML에서 CSS 클래스를 사용할 때에는 class라는 속성을 사용하지만, JSX에서는 className을 사용함

 

 

 

⑤ JSX에서 주석

└ JSX에서 {/* ... */}와 같은 형식을 사용함

└ 시작태그를 여러줄로 작성할 때, 내부에서 //의 형식을 사용할 수 있음

 

 

 

⑥ undefined를 렌더링하지 않기

└ 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안됨

 

└ 하지만, JSX 내부에서 undefined를 렌더링하는 것은 괜찮음

 

 

---

 

 

앞으로 공부할 React의 기본문법이니 숙지할 것!!