JSX

 

 

✅  JSX = XML(HTML) +  JavaScript  

리액트에서 HTML처럼 보이는 코드를 JavaScript 안에 작성할 수 있게 해주는 문법

 

(참고  컴포넌트는 JSX를 반환하는 함수(또는 클래스) 즉 독립된 UI 블록 = 일반적으로 JSX집합이겠다. )

 

1. XML의 구조적 틀: XML은 데이터를 구조화하여 표현하는 데 사용됩니다. XML 문서는 태그를 사용해 계층 구조로 데이터를 표현하죠. JSX도 XML처럼 태그를 사용해 구조화된 형태로 작성됩니다. 예를 들어, <div>, <h1>, <button> 같은 태그가 있습니다.

 

2. JavaScript의 동적 기능: JavaScript는 웹 페이지에 동적인 기능을 추가합니다. 이를 통해 사용자와의 상호작용을 구현할 수 있죠. JSX에서는 JavaScript 코드를 XML-like 구문 안에 직접 삽입할 수 있습니다. 예를 들어, {expression} 문법을 사용해 JavaScript 표현식을 포함시킬 수 있습니다.

 

 

 

---

 

변수의 값을 HTML로 렌더링

 

주의사항 

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. => 값으로서 평가되야한다 if문 사용 불가, 연산자 사용가능

2. 숫자, 문자열, 배열 값만 렌러딩뢴다. => true, undefined,객체,null 이런건 안 된다.

3. 모든 태그는 닫혀있어야 한다.

4. 최상위 태그는 반드시 하나여야한다. -> 마땅히 없으면 <> </> 빈 태그로 감싸기

 

 

 

---

JSX에서 CSS

2가지 방식이 존재

1. 직접 JSX태그 요소 내부에 속성으로 입력하기
2. css파일을 만들고 경로 입력하기

주의사항

JS의 예약어인 class사용이 불가능 해서 이런식으로 className이런식으로 만들기