React - JSX를 사용할때 몇가지 주의사항

정말 기초적인 내용이지만 처음에 조금 헤멜 수 있는 주의사항입니다.

JSX 태그 내부에 변수를 넣는 방법

<tag> {value} <tag> 의 형태로 사용합니다.

ex)

const msg = <h1>{item} - {value}원</h1>

JSX 태그의 속성 값에 변수를 넣는 방법

<tag attr={value}... <tag>의 형태로 사용합니다.

ex)

const msg = 

  <div>

    <h1>{title}</h1>

    <p><img src={imgUrl} /></p>

  </div>

--- 주의 사항 ---

닫는 태그와 관련된 주의 사항

닫는 태그를 생략하면 오류가 발생합니다.

<img> => (x)

<img></img>

JSX를 작성할 때의 주의사항

return에서 오류 발생하는 구문, => 자바스크립트 내부에 html을 작성해야 하기 때문에 발생합니다.

return 

<div><p>이또한 지나가리라</p></div>   ==> (x)

return (

<div><p>이또한 지나가리라</p></div>   ==> (o)

)