[공부] JSX와 TSX

JSX : Javascript 기반, JS를 확장한 문법 JS에서 HTML 문법을 사용 가능, React에서 에러, 경고 메세지를 표시해준다.

JS를 JSX내부에서 사용할 땐 중괄호 사용 → TSX도 마찬가지

 

TSX : Typescript 기반, React Component를 사용할 때, React에서 TS로 HTML을 사용할 수 있도록 해주는 파일

TypeScript XML

XML : eXtensible Markup Language

파일 확장자가 TS면 HTML 기능 사용 불가

 

1. TSX 파일에서 작성된 TS Component 함수는 return의 ()안에 HTML 태그를 포함할 수 있음

return안에서 HTML을 표기하려면 ()로 묶여있어야 한다.

return() 안에는 최상위 부모 태그가 무조건 1개만 있어야 한다. 

 

★ return() 안에서 TS를 사용하려면 {}로 묶어서 작성

{}를 써서 TS를 작성할 땐 필수적으로 HTML 태그 안에 있어야 한다.

return()안의 {}에서 다시 HTML을 표기할 때도 ()로 반환

→ HTML 사용은 ()

→ TS 사용은 {}

 

2. return() 안에서는 제어문을 사용할 수 없다.

ㅡ if문 / for문 사용 불가

ㅡ 변수와 연산자만 사용 할 수 있다.

 

ㅡ if문 대체 : 논리 연산자 / 삼항 연산자

ㅡ for문 대체 : 배열 객체의 map 메서드 사용

 

3. return() 안에서는 HTML 주석 사용 불가

ㅡ {}로 묶어서 TS 주석 사용하기

 

4. TSX는 XML 기반으로 HTML을 표기하기 때문에 문법이 정확해야한다.

ㅡ 모든 태그를 다 닫아주고 HTML 요소는 소문자로 작성

ㅡ HTML 속성은 대소문자 구분