[React] - JSX 규칙

JSX 규칙

• 태그는 꼭 닫혀있어야 합니다.

태그를 열었으면 <div></div> 이렇게 꼭 닫아주어야 합니다.

HTML에서는 input 뜨는 br 태그를 사용할 떄 닫지 않고 사용하기도 합니다.

하지만, 리액트에서는 그렇게 하면 안됩니다.

이렇게 닫아주거나

이렇게 닫아주어야 합니다.

• 두가지 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다.

이렇게 작성하면

이런 에러가 발생하게 됩니다.

이렇게 전체를 감싸주면 되지만, 불필요한 div로 감싸는게 별로 좋지 않은 상황도 있습니다.

그럴 땐, 리액트의 Fragment라는 것을 사용하면 됩니다

태그를 작성할 때 이름 없이 작성을 하게 되면 Fragment가 만들어지는데, Fragment는 브라우저사에서 따로 별도의 엘리먼트로 나타나지 않습니다.

• JSX 안에 자바스크립트 값 사용하기
  • JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 중괄호{}로 감싸서 보여줍니다.
  • style과 css class를 설정하는 방법은 HTML에서 설정하는 방법과 다릅니다.
  • 우선, 인라인 스타일은 객체 형태로 작성해야 하며, -로 구분되는 css는 camelCase 형태로 네이밍 해줘야 합니다

• style과 className
  
  • 그리고, CSS class를 설정할 때에는 class=가 아닌 className으로 설정을 해줘야 합니다.
  • App.css 파일을 열어 내용 전체를 지운 뒤 새로 작성해보겠습니다.
  • App.css 수정 후 App.js파일을 열어 내용을 수정합니다.

• 주석
  • 주석은 JSX 내부에서 {/* 이런 형태 */} 로 작성합니다.
  • 중괄호로 감싸지 않으면 화면에 출력되게 됩니다.
  • // <- 이런 형태로도 주석 사용이 가능합니다.