<Xml/> in React : JSX

html 적용된 모습

---

🔽 React에서 Xml(JSX) 사용 예시

 

genres만 색이 다른 것은 아직 사용을 안해서 그렇다.

 

---

html과 다른 점 (1)

주의해야 할 것은, html에서 쓰던 대로 class라고 쓰면 안되고,

대신 className이라고 적어줘야 한다.

아래처럼 class라고 쓰면 class Component의 class와 혼동하기 때문에 에러가 난다.

---

html과 다른 점 (2) : Label for

 

html에서는 <label for="exam"> 예시 </label> 처럼 쓰지만

Javascript에서는 for가 loop를 의미한다.

마찬가지로 혼동 될 수 있기때문에

label for="" 대신에

label htmlFor=""로 써야한다.

 

---

html과 다른 점 (3) : Style의 적용

style 적용의 경우 double {} 에 넣어야한다.

🔽아무 style 적용되지 않은 img와,

style={{ borderRadius:"5px" }}  이 적용된 img 예시

원본

사진끝에 둥글게 처리되었다.

---

🔽 혹은, css 파일을 따로 만들 수 있다.

CSS:style in React