1. 개념

  • 소개

    • XML/HTML-like syntax that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code.
    • 확장자 - .jsx => .js 사용하는 추세 (fb에서는 .react.js)
  • 필요성

    • JSX는 컴파일링되면서 최적화되므로 빠르다

    • Type-safe 하다

      어떠한 연산도 정의되지 않은 결과를 내놓지 않는다. 즉 예측 불가능한 결과를 나타내지 않는다. 예컨대 1+”1”의 연산이 가능하다거나, 문자열 변수에 숫자를 할당하는 것이 가능하다거나 하는 것은 일면 비논리적이라고 볼 수 있다. 이러한 비논리를 엄격히 체크하여 runtime 시 이로 인한 오류를 발생하지 않도록 하겠다는 개념이 type-safe.

      type-safe한 언어(ex. C#, Java)는 보통 이를 컴파일 과정에서 에러를 감지 해준다. type-safe하지 않은 언어(ex. JavaScript)는 이를 그냥저냥 처리한다.


2. 문법

  • XML/HTML-like Syntax

    • 따옴표 "" 로 감싸지 않는다.

    • Container Element가 필수적.

      // Syntax Error
      return(
        <h1>Hello Jaeyoon</h1>
        <h2>Welcome</h2>
      );
      
      // No Error
      return(
        <div>
          <h1>Hello Jaeyoon</h1>
        	<h2>Welcome</h2>
        </div>
      );
      
  • JavaScript Expression

    • {} 로 wrapping 하면 된다

    • 임의 method 생성/사용 - 뒤에 () 붙이면 페이지가 로드될 때도 실행되고 클릭할 때도 실행됨

    • if-else 문 사용 불가 - 대신 ternary (conditional operator) 를 사용한다.

      sayHey(){
        alert("hey");
      }
      render(){
        let text = "Dev-Server"
        return (
        	<div>
            <h1>Hello Jaeyoon</h1>
            <h2>Welcome to {text}</h2> {/* wrapping */}
            <button onClick={this.sayHey}>Click Me</button> {/* method */}
            <p> {1==1? 'True' : 'False'} </p> {/* ternary */}
          </div>
        );
      }
      
  • Inline Style StyleSheet

    • React의 Inline CSS에서는 string 형식이 사용되지 않고 key가 camelCase인 Object를 사용

      render(){
        let pStyle = {
          color: 'aqua',
          backgroundColor: 'black'
        };
        return (
          <div>
            <p style = {pStyle}>I am inline styled</p>
          </div>
        );
      }
      
  • 주석 다는 법

    • {/* comments */} 형식으로 작성.


Ref

React Official Documentation https://reactjs.org/docs/hello-world.html
Velopert React 강좌 3편 https://velopert.com/867