JSX의 정의와 활용

Reyna·2022년 10월 7일
0

React

목록 보기
2/3

JSX(Javascript XML)

  • JSX는 자바스크립트를 확장한 것으로, 리액트에서 UI를 구성할 때 사용하는 문법이다.
  • 표현력이 뛰어나며 선언형 구조를 잘 나타내며, 문법 오류와 코드량을 줄이기 때문에 더 나은 개발자 경험을 제공한다.
  • JSX로 작성된 코드는 브라우저가 바로 실행할 수 없기 때문에, Babel과 같은 컴파일러를 사용하여 자바스크립트로 변환해주어야 한다.

JSX 활용

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.

 	<Opening tag>
    
       All elements
        
     <Closing tag>

2. 엘리먼트 클래스 사용 시 className으로 표기한다.

  • class는 자바스크립트의 class로 해석된다.

3. 자바스크립트 표현식 사용 시 중괄호를 이용한다.

4. 사용자 정의 컴포넌트는 대문자로 시작한다.

  • 만약 소문자로 적으면 HTML 엘리먼트로 인식할 것이다.

5. 조건부 렌더링에는 3항 연산자를 사용한다.

  • if문은 식이 아니라 문이기 때문에 사용할 수 없다.

6. 여러 개의 엘리먼트를 표시할 때는 map() 함수를 사용한다.

0개의 댓글