React_JSX 규칙

# JSX

---

JSX는 자바스크립트의 확장 문법입니다. 얼핏보면 HTML과 유사하게 생겼지만 실제로는 JavaScript입니다.

 

리엑트 컴포넌트 파일에서 XML형태로 코드를 작성하면 바벨이 번들링 되는 과정에서 일반 자카스크립트 형태의 코드로 변환 합니다. 

 

 

---

JSX의 장점

1. 보기 좋고 가독성이 좋다. 

위에 바벨로 작성한 코드를 비교 해보면 누가봐도 JSX가 쉽고 가독성이 더 좋다는 것을 알 수 있습니다. 또한 HTML과 매우 유사해서 금방 익숙해집니다.

 

2. 높은 활용도

HTML 태그를 사용할 수 있을 뿐만 아니라 컴포넌트를 HTML 태그 쓰듯이 JSX 안에서 작성 할 수 있습니다.

 

---

JSX가 자바스크립트로 제대로 변환이 되려면 지켜줘야 하는 몇가직 규칙이 있습니다! 예시를 통해 하나하나 알아봅시다!!

 

#1. 꼭 감싸져야하는 태그

컴포넌트에 여러 요소들이 있다면 이 요소들은 무조건 부모 요소 하나로 감싸야 합니다. (하나일땐 상관없음)

 

 

만약 이런식으로 감싸진 요소가 없이 출력한다면 오류가 발생합니다. 

 

 

이런 방식을 사용해야 하는 이유는 Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

---

 

#2. JS표현 

JSX는 DOM 요소들을 렌더링 하는 기능  외의 JSX안에서 자바스크립트 표현식을 사용할 수있습니다.

사용방법은 JSX내부에 { }로 감싸주면 됩니다.

 

 

이처럼 변수를 중괄호{ ]를 사용해서 표현할수 있습니다!

---

 

#3. if문 대신 조건부 연산자 /  AND연산자(&&)

JSX 내부에서는 if문을 사용하지 못합니다. 그래서 JSX밖에서 if문을 사용하여 값을 만들어 사용해야 됩니다. 아니면 중괄호{ }안에 삼항 연산자를 써서 사용하면 됩니다.

 

AND연산자는 전자가 true면 후자를 반환하고 false면 전자를 반환시킵니다. 아래 코드 12번줄은 true 여서 후자가 반환되어 맞습니다가 출력됩니다.

 

---

 

#5. 주석처리

JSX 안에서의 주석은 자바스크립트에서의 주석과 차별점이 있습니다.

JSX 주석표시는 {*주석은 이렇게 씁니다*}

 

---

 

#6. 태그는 꼭 닫아야한다

HTML 코드를 작성할 때는 태그를 닫지 않아도 문제없이 작동하지만 JSX는 태그가 항상 닫혀 있어야 합니다.

<input></input> 같이 태그 안에 내용이 들어가지 않는 경우엔 <input /> 이렇게 작성도 가능합니다.

이를 self-closing이라 부릅니다.

---

 

#7. 인라인 스타일링

리액트에서 스타일을 적용할 때는 객체 형태로 작성해야 합니다. 주의 할 점은 font-size 같은 - 문자가 포함되어 있는 속성은 -를 떼고 카멜 표기법으로 표기해줘야 합니다. ex) fontSize, backgroundColor

 

---

 

#8. class 대신 className

JSX에선 class가 아닌 className으로 사용해야 됩니다.