[React] JSX란 무엇이며, 어떻게 사용하는가??

(설명)

JSX는 HTML이나 XML과 매우 비슷하게 생겼다.

하지만, HTML도 아니고 XML도 아니다.

자바스크립트의 확장 문법이다(공식 문법은 아니다)

나중에 babel-loader를 통해 자바스크립트로 변환된다.

(장점)

1. 가독성이 좋다  - 자바스크립트에 비해, JSX를 사용하면 보기 쉽고, 작성하기 쉽다.

2. 오류 검사가 가능하다 - babel-loader에 의해 오류를 감지할 수 있다.

3. 거부감없이, 쉽게 작성할 수 있다 - HTML과 유사하기 때문에 쉽게 작성이 가능하다.

(사용법)

1. 컴포넌트는 반드시 태그 하나로 묶기

- 컴포넌트에 여러 요소가 있으면, 반드시 하나의 태그로 감싸야 한다. 

- 그 이유는 컴포넌트 내부는 DOM 트리 구조 하나로 구성되어야 하기 때문이다.

- <Fragment>로 감싸면, 불필요한 div를 렌더링하는 것을 생략할 수 있다.

2. 자바스크립트 코드 삽입하기

- { 자바스크립트 표현식을 작성하려면 JSX 내부에서 중괄호{ } 안에 작성하면 된다.

3. if문 대신 삼항 연산자

- JSX 내부 자바스크립트 표현식에서 if문 사용 불가하므로 삼항 연산자를 사용할 것.

4. class 대신 className 사용

- class를 작성하면 경고 발생. class는 이미 존재하는 키워드이기 때문. className을 사용할 것.

5. 태그는 반드시 닫아야 한다.

- <br>, <input> 등의 태그는 HTML에서 닫지 않아도 작동했다. 

- 하지만, 리액트 JSX에서는 반드시 <br /> 또는 <br></br>과 같이 닫아야 오류가 발생하지 않는다.

6. 주석

- 주석은 { */ 주석임... */ } 으로 작성한다.

- 또는 주석 단축키(Ctrl + /)으로 주석을 하면 좀 더 편리하다.

- 흔히 알고 있는 // 나 /* */ 이 주석을 하게 되면 텍스트로 인식되어 그대로 화면에 표시된다.

7. &&을 사용한 조건부 렌더링

- 삼항 연산자를 쓰면 참일때 A화면 출력 거짓일때 B화면 출력을 했다.

- 하지만, 특정 조건을 만족하지 않을 때 아예 화면을 보여주고 싶지 않다면 어떻게 할까?

-  {condition ? '참이에요' : null} 과 같이 삼항연산자를 사용해도 되지만,

- {condition && '보여주세요'} 와 같이 작성해도 된다.

- 쉽다. 앞 condition이 참이면 뒤 '보여주세요'가 나오겠지만, 거짓이면 뒤에는 체크하지 않는다.

8. 인라인 스타일링 

-  CSS 스타일을 자바스크립트 객체 형식으로 생성하여 적용한다.

- 해당 키는 camelCase 형식을 사용한다.

위에 다음과 같이 선언.

const style {

backgroundColor : 'black',

border : 1px solid 'yellow'

...

} 

사용시에는 다음과 같이 적용.

<div style={style}>BODY</div>