React 기초 문법

JSX 문법 정리

JSX(JavaScript XML)은 JavaScript에 XML을 추가한 확장 문법이다. (리액트에서 사용하는 공식 자바스크립트 문법은 아니다.)

JSX 문법

1. 태그는 항상 닫혀있어야 한다.

2. 함수형 컴포넌트 이름은 항상 대문자로 시작한다.
   (소문자로 시작하는 컴포넌트는 DOM 태그로 처리하기 때문!)

3. 2개 이상의 엘리먼트는 항상 하나의 엘리먼트 안에 담겨있어야 한다. (=하나의 태그로 감싸주어야 한다.)
   빈 태그인 fragment를 사용하면 편리하다. (<fragment></fragement>이지만 <></>로 작성해도 동일한 의미이다.)

4. JSX 내부에서 자바스크립트 변수값이나 함수를 작성할 때는 {} 안에 넣어주어야 한다. ({}안에는 변수나 함수만 작성 가능)

5. 한 번에 하나의 컴포넌트만 렌더링 할 수 있다.
   (index.js 파일에 2개 이상의 컴포넌트를 넣을 수 없다.)

6. 주석 작성 방법은 아래와 같다.

{/* 주석 작성법*/}
// 주석도 사용 가능한데 열리는 태그 내부에서만 사용가능

7. JSX 내부에서 조건부 렌더링할 때 삼항 연산자나 AND 연산자를 이용한다. (if문은 사용할 수 없다.)

---

📌참고자료
https://unit-15.tistory.com/69
https://unit-15.tistory.com/70
https://leedhhhhh.tistory.com/19