JavaScript Sec04_3 JSX

JSX

---

• 자바스크립트의 확장 문법이자, 자바스크립트와 html을 혼합해서 쓸 수 있는 문법
• 리액트에서 주로 사용하는 표현식
  • 리액트의 컴포넌트를 만드는 데 유용하게 사용하는 문법이다.

 

JSX의 규칙

• 닫힘 규칙
  • 열린 태그가 있으면 반드시 닫힌 태그도 있어야 한다
    • self closing tag : <img />, <br />
• 최상위 태그 규칙
  • 최상위 태그는 return문 안에서 즉, 컴포넌트 안에서 가장 바깥에 위치하는 태그를 의미한다.
  • JSX의 표현식은 반드시 하나의 부모 요소를 가져야 한다.
  • JSX로 컴포넌트로 만들어서 return하려면 반드시 하나의 최상위 태그로 다른 모든 태그를 묶어주어야 한다.

• 만약 최상위 태그를 사용하고 싶지 않다면?
  • 리액트 파일에서 React.Fragment를 불러와 최상위 태그 대신 감싸주면 된다. <React.Fragment> 로 쓰거나 아예 빈 태그로 <> </> 이렇게 감싸줘도 된다.

• react의 기능을 이용하지 않는 헤더나 푸터 같은 컴포넌트에서는 굳이 react를 import할 필요 없다. (import React from ‘react’를 작성하지 않아도 괜찮다.)

리액트 컴포넌트에서는 <import 경로명> 을 사용하여 css를 불러 사용할 수 있다.

style 객체를 이용한 인라인 스타일 적용 방식

JSX 문법을 이용한 조건부 렌더링

• cf) JSX의 {} 중괄호 안에는 숫자나 문자열만 포함할 수 있다. (배열이나 boolean값, 객체를 넣는 것은 불가능)