JSX

- JSX는 자바스크립트의 확장 문법

- JSX형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드를 번들링하는 과정에서, 

바벨을 사용하여 일반 JS형태 코드로 변환된다.

- 하나의 컴포넌트를 만들 때 요소 여러 개를 꼭 하나의 요소로 감싸주어야 함 => 가상 DOM을 생성하면서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록, 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야한다는 규칙이 있기 때문에

 

function App() {
  return (
    <Fragment>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}

export default App;

 

function App() {
  return (
    <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}

export default App;

 

- JSX에서 다음과 같이 자바스크립트 표현식을 쓸 수 있음

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}

export default App;

 

- JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없음. 다만 삼항 연산자로 조건 처리는 가능.

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

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

export default App;

 

- && 연산자를 통해 조건부 렌더링을 할 수 있다.

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '뤼왝트';
  return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>
}

export default App;

 

- 리액트에서 DOM요소에 스타일 적용시에는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야함

- 스타일 이름은 카멜 케이스로 표기해야함

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '리액트';
  const style = {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize: '48px',
    fontWeight : 'bold',
    padding : 15
  };
  return <div style={style}>{name}</div>
}

export default App;

 

- css클래스를 사용할때에는, className 속성 사용하면 된다. 

App.css

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight : bold;
  padding: 16px;
}

 

index.js

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '리액트';
  return <div className="react">{name}</div>
}

export default App;

- JSX는 태그를 닫지 않으면 오류가 발생한다. 

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
    <div className="react">{name}</div>
    <input></input>
    </>
  );
}

export default App;

 self-closing태그를 사용하여 닫아주어도 된다.

 

- 주석은 다음과 같이 사용한다.

import React, { Fragment } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      {/* 주석은 이렇게 작성합니다. */}
      <div 
        className="react"
      >
        {name}
      </div>
    </>
  );
}

export default App;

{ /* .... */ }