[React] JSX 기본규칙

 

JSX란? 자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의합니다.

 

• JSX란?
• JSX 기본규칙
  • 1. JSX에 표현식 포함하기
  • 2. 두 개 이상 태그는 하나의 태그로 감싸기
    • self closing tag
    • Fragment 사용방법
  • 3. Style 설정 방법
  • 4. Class 설정 방법
  • 5. JSX 주석처리
  • 6. return(<div></div>);은 가독성을 위해서 사용한다. 
  • 7. 컴포넌트는 네이밍은 항상 대문자로 

---

JSX란?

자바스크립트 확장 문법으로 React 컴포넌트의 생김새를 정의한다.

Bebel은 JSX문법을 React.createElement()로 호출한다. 

JSX문법이 자바스크립트로 변환되는 것을 확인할 수 있다.

---

JSX 기본규칙

1. JSX에 표현식 포함하기

JSX 중괄호 안에는 유효한 Javascript 표현식을 넣을 수 있다.

함수 호출 결과인 formatName(user)를 JSX 표현식에 넣을 수도 있다.  

JSX를 if, for loop 안에 사용하고 반환할 수도 있다.

 

2. 두개 이상의 태그는 하나의 태그로 감싸기

태그는 꼭 닫혀져 있어야 한다! 

 

두개 이상의 태그를 사용할 경우 하나의 태그로 감싸 져있지 않으면 오류가 발생되는데,

이럴 때 Fragment를 사용하여 불필요한 div 코드를 방지할 수 있다.

Fragment 를 더 짧게 쓰는 새로운 문법이다. <></> 빈 태그

 

3. style 설정 방법

객체를 생성한 후, 네이밍은 모두 CamelCase로 작성한다.

4. class 설정 방법

import로 css를 불러온뒤, class 대신 className 속성으로 작성한다. 

5. JSX 주석처리 

중괄호안에 기존 JS주석처리를 넣으면 된다. 

6. return(<div></div>); 은 가독성을 위해서 사용한다. 없어도 상관없다.

7. 컴포넌트 네이밍은 항상 대문자로 시작한다.

React는 소문자로 시작하는 컴포넌트를 DOM태그로 처리한다.

예를 들어 <div />는 HTML div태그를 나타내지만,

<Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다.