JSX 기본(기초) 문법

 

#Javascript 파일내에서 

JSX (JavaScript Xml)는 일반 html 처럼 사용하면 되지만 주의할 사항이 3가지 있음!

 

1. 리액트에서 JSX를 반환할 때는 꼭 하나의 태그만 반환

만약 다수의 태그를 반환하고 싶다면 아래 2가지 예시 처럼 부모 태그로 감싸준다.

 

    1) 텅빈 태그(fragment)로 감싸기

     <>

     </>

   

    2) div 태그로 감싸기

     <div>

     </div>

 

 

2. class를 사용할 경우 => className 으로 사용

 

 

3. Javascript 코드 작성이 가능

xml 태그 내에 Javascript 코드 작성이 가능하고 중간 중간에 넣을 수 있다.

단, Javascript 코드를 작성하려면 중괄호 { ... } 안에서만 사용할 수 있다.

 

 

# 참고로 HTML 코드를 JSX 로 자동 변경해 주는 사이트

JSX에 익숙해 지기 전까지 도움 받을 수 있는 사이트예요~

https://transform.tools/html-to-jsx

HTML to JSX