[REACT] JSX

 

JSX : 자바스크립트 확장 문법

 

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
 
export default App;

- 위와 같이 작성한 코드는 babel-loader를 사용하여 자바스크립트로 변환함

 

장점

- 보기 쉽고 익숙함  -> HTML 코드와 비슷함

 

기본 문법

1. 컴포넌트에 여러 요소가 있다면, 무조건 부모 요소 하나로 감싸야 함

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <h1>Hello React!</h1>
        </div>
        <div>
          <h2>Welcome</h2>
        </div>
      </div>
    );
  }
}

 

- Fragment 사용 : 콘솔창에 <div> 코드가 보이지 않음, 즉 <div> 지옥을 방지

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>
          <h1>Hello React!</h1>
        </div>
        <div>
          <h2>Welcome</h2>
        </div>
      </Fragment>
    );
  }
}

 

2. 자바스크립트 표현

class App extends Component {
  render() {
    const name = 'React';
    return (
      <div>
        hello {name}!
      </div>
    );
  }
}

 

3. 조건부 연산자 : 모든 조건부 연산자은 사용 불가능이지만, 아래 2개만 가능 

- 삼항 연산자

class App extends Component {
  render() {
    return (
      <div>
        {
          3 + 5 === 8 
            ? (<div>정답</div>)
            : (<div>오답</div>)
        }
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        {
          3 + 5 === 8 && (<div>정답</div>)
        }
      </div>
    );
  }
}

 

- if문을 사용할 수 없음

  -> JSX 밖에서는 가능

  -> JSX 안에서는 IIFE를 사용

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

4. CSS / style

- App.css

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

 

- App.js

import './App.css'
 
class App extends Component {
  render() {
    return (
      <div className="App">
        리액트
      </div>
    );
  }
}

- JSX안에서 style 설정

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'black',
      padding: '16px',
      color: 'white',
      fontSize: '12px'
    };
 
    return (
      <div style={style}>
        hi there
      </div>
    );
  }
}

 

5. class 대신 className 사용

- class 키워드는 이미 자바스크립트에 존재하는 키워드이기 때문

 

6. 주석

class App extends Component {
  render() {
    return (
      <div>
        {/* 주석은 이렇게 */}
        <h1 // 태그 사이에>
        리액트</h1>
      </div>
    );
  }
}