[React] jsx 문법

함수호출과 객체생성을 위한 문법적 편의를 제공하는 java script의 확장.
JSX는 HTML과 JS가 합쳐진 것이라고 생각할 수 있을것 같다.

브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 Babel을 사용하여 일반 자바스크립트 형태의 코드로 변환(Transcompile)된다.

JSX 규칙

1. 태그는 꼭 닫혀있어야 한다.

html에서 <br> <input> 태그와 같은 것들이 닫는태그가 없어도 문제가 되지 않지만,
jsx에서는 닫혀있어야함으로 <br/> <input/> 이와같이 작성해야 한다.

2. 최상단 element는 반드시 하나이다.

 function App() {
   const username = '혜진';
   return (
 
       <div>안녕하세요.</div>
       <div>저는 {username}입니다.</div>
   );

    function App() {
      const username = '혜진';
      return (
        <>
          <div>안녕하세요.</div>
          <div>저는 {username}입니다.</div>
        </>
      );
    }

위의 두 코드를 비교해보면,
첫번째 코드의 최상단 element가 1개가 아니고 2개이기 때문에 경우는 에러가 난다.
두번째 코드처럼 하나의 element로 감싸줘야 한다.

3. JSX 내부에서 자바스크립트를 사용할 때는 { } 중괄호를 사용해야 한다.

2번의 예시를 보면, username은 자바스크립트로 선언된 변수이고 이 변수를 사용한다면, { }중괄호를 사용하면 변수의 값을 사용할 수 있다.

4. 내부 스타일을 사용할 경우, 객체 형태로 만들어줘야 한다.

style의 속성은 카멜 표기법으로 작성한다.
ex) background-color -> backgroundColor

    <div 
       style={{
          backgroundColor:'green',
          color: 'yellow'
        }}>안녕하세요.
    </div>

5. class속성을 지정할 때 class → className

    <div className="App"> </div>

6. 주석 작성 방법은 작성위치에 따라서 다르다.

ㄴ javascript와 동일하게 한 줄주석은 //
여러 줄은 /* */로 처리
ㄴjsx에서는 여러줄 주석을 {/* */} 이와같이 중괄호로 감싸준 형태로 사용한다.

7. 조건부 연산자(삼항 연산자)를 사용
   jsx 내부의 자바스크립트 표현식 내에서 if문 사용할 수 없다.

function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'? (
          	<h1>리액트</h1>
          ) : (
          	<h2>리액트가 아님</h2>
          )}
      
   </div>
      
  );
}

style에 왜 중괄호가 2개일까?

이 부분이 처음 접했을 때 가장 많이 궁금했던것 같다.
style={ { } }
겉에있는 괄호는 java script임을 알리는 것이고,
style은 객체 형태로 작성을 해야하기 때문에 안의 괄호는 객체임을 표시하는 중괄호이다.