[React] 레이아웃 만들 때 쓰는 JSX 문법

 

A. JSX?

 

• JSX(JavaScript XML)는 JavaScript에 XML을 추가한 확장 문법이다.
• XML이란 웹 사이트, DB 및 타사 APP과 같은 컴퓨터 시스템 간의 정보 교환을 지원하는 파일
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 JS 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 JS 형태의 코드로 변환된다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.

• Babel은 JSX를 React.createElement() 호출로 컴파일 하기 때문에
• 아래 두 예제는 동일

B. 작성하기

블로그를 만들며 기본 문법 익혀보자.

• App.js 내부에서 작성해주면 된다.
• div 태그 하나만 놔두고 지워주기

 

nav bar 만들기

• div 태그로 큰 네모 만들어 준다.
• css를 사용하고 싶다면 App.css 에서 작성해주면 된다.
• 일반 html과 css를 그대로 사용

 

1. class 사용시 className

• 기존 html에서는 class로 사용
• JS 내부라서 class로 작성하게 되면 js class로 인식
• 따라서 className으로 작성해준다.

 

2. 변수 및 데이터를 html에 넣을 땐 { 중괄호 } 사용

• Vanilla JS 에선 아래와 같이 길게 작성

• JSX에서는 {} 중괄호를 사용하여 넣어주면 된다.
• className, id 등 대부분의 곳에서 중괄호 사용 가능데이터 바인딩 이라고 부른다.

 

3. style을 넣을 때, {}를 열어서 넣어야 한다.

• 객체 형식으로 {} 내부에 {}를 사용해준다.

• 주의할 점
  • JSX에서는 size를 작성시 크기로 받아들임
  • 따라서, camelCase를 이용하여 작성해준다.

 

4. JavaScript 표현식 삽입 가능

 

• 다만, 속성에 JS 표현식을 포함할 때에는 중괄호 주위에 따옴표를 사용하면 안된다.

• 태그가 비어있다면 />로 즉시 닫을 수 있다.