React 04. JSX 이해하기, 기본문법

JSX란

JSX는 JavaScript eXtension의 약자로, 자바스크립트의 확장 버전을 의미한다. 자바스크립트 내부에 html 문법을 그대로 입력하는 방식을 말하는데, 이것을 Babel이 순수 리액트 문법으로 변환시키고 또 리액트 라이브러리가 순수 자바스크립트 코드로 변환시킨다.

요약

• JSX는 자바스크립트 개발을 도와주는 Js의 확장 문법이다.
• JSX는 리액트의 생김새를 정의한다.
• JSX 안에 사용된 것이 html 태그같이 생겼지만, 실제로는 js 리액트 엘리먼트이다.
• Babel이 JSX 문법을 JavaScript로 변환해준다.

JSX 기본 문법

바벨이 JSX 문법을 자바스크립트로 제대로 변환하기 위해서는 기본 문법을 준수해야 한다. 다음의 예시 코드를 보면서 간단히 살펴보자!

App.js

• HTML과 같이 태그는 꼭 닫혀있어야 하며, 내용이 없는 경우 셀프 클로징을 해준다. <br /> <hr /> 태그도 꼭 /로 닫아줄 것!
  
  
• 컴포넌트로 만든 태그는 하나밖에 넘겨주지 못하기 때문에 두개 이상의 태그는 하나의 태그로 감싸져있어야 한다. <div>같은 태그를 사용하면 되지만, 사용하기 적절치 않은 상황이라면 React.Fragment(빈태그)를 사용해준다. React.Fragment는 실제 DOM에 생성되지 않는다.
  - 실무에서는 약식표현으로 그냥 빈태그를 써준다.

      function App(){
          return(
              <React.Fragment>
                 <h1>안녕하세요</h1>
                 <NewHello />
              </React.Fragment>
              
              {/* 약식표현 */}
              <>
                 <h1>안녕하세요</h1>
                 <NewHello />
              </>
           );
       }

• JSX 내부에서 javaScript의 변수를 사용할 때는 중괄호{}로 감싸준다.

      function App(){
      	  const name = 'JSX';
          return(
              <>
             	  <h1>{name}</h1>   
              </>
           );
       }

• CSS style 설정은 위 예시와 같이 App.css에서 작성한 파일을 가져오거나, JSX 안에 직접 작성해줄 수 있다.

  • 직접 작성할 경우 (인라인 형식)
    - css에서 '-'로 명시된 속성이름은 낙타표기법(Camel Case)으로 작성해준다.
    backgrouneColor fontSize

      function App(){
      	  const name = 'JSX';
      	  const style = {
          	backgroundColor : 'yellow',
                fontSize : 18
          }
          
          return(
		<div style ={style}> {name} </div>
           );
       }

• 주석은 {/* 주석내용입력 */} 형태로 작성하며, 이렇게 입력한 주석은 실제 화면에 보이지 않는다.
  - /* 주석내용입력 */처럼 중괄호로 감싸지 않으면 그대로 화면에 노출된다.
  - // 주석내용입력 는 열린 태그의 내부에서 사용 가능하다. => <NewHello //주석내용입력 />