#6 JSX

JSX(Javascript Syntax eXtension)는 Javascript 확장한 문법이다.  
JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

기본적으로 HTML, JS, CSS 구문을 그대로 이용이 가능하며

{ } 블럭 안에서 변수, 상수, 함수 등을 호출하여 사용 할 수 있다.

 

JSX 기초

(1) App() 함수 밖에 혹은 안에 변수, 상수, 함수 선언가능
(2) return 시에 하나의 Dom만 리턴할 수 있다. (하나의 Dom안에 구조를 생성하라)
(3) if문 사용안됨, 대신 3항 연산자를 사용 ( (조건) ? 참일때 : 거짓일때 )
(4) 조건부 렌더링 (조건 && 값(true))==> 렌더링, false면 렌더링안함
(5) css디자인 
    - 내부에 직접 작성 <div style={mystyle}> => App.js 파일안에 정의
    - 외부 파일에 작성 <div className="my-style"> => App.css에 정의 
    - 라이브러리 사용(부트스트랩, component-styled)

 

App.js 

import "./App.css";

// 변수
let a=10; 

// function
function sum1(a, b){
  return a+b;
}

// arrow function
let sum2 = (a, b) => a+b;

// Start Component
function App() {
  // 변수 
  let helloMessage="Hello React!!";
  let gender="Mr";
  let age=10;
  let a=10, b=30;

  // function
  function sayHello1(val){
    return `Hello ${gender}.${val}`;
  }

  // arrow function
  let sayHello2 = (val) => `Hello ${gender}.${val}`;

  let c;
  console.log(a, b, c);

  // css 
  const mystyle = {
    color: '#ff0000',
  }

  // 리턴할 결과물 제작
  return (
    <div>
      <h1>{helloMessage}</h1>
      <div style={mystyle}>{sayHello1('Kim')}</div>
      <div className="my-style">{sayHello2('Lee')}</div>
      <hr></hr>
      <div>{a}+{b}={sum1(a,b)}</div>
      <div>{a}+{100}={sum2(a,100)}</div>
      <hr></hr>
      <div>{(age>=18) ? '성인입니다.' : '미성년자'}</div>
      <hr></hr>
      <div>{(a===15 && '15입니다')}</div>
      <div>{(b===30 ? '30입니다':'')}</div>
    </div>
  );
}

export default App;

 

App.css

#root {
  padding: 10px;
}

.my-style {
  color: blue;
}