React - JSX 문법

JSX

• 자바스크립트의 확장 문법
• XML과 유사함
• 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 변환됨
• 컴포넌트를 렌더링할 때마다 JSX가 아닌 React.createElement를 사용해야 하면 다음과 같은 상황 발생

{/* JSX 문법 */}
function App() {
    return (
        <div>
            Hello <b>react</b>
        </div>
    );
}

• 자바스크립트로 변환

// javascript 문법
function App() {
    return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

JSX의 장점

• 보기 쉽고 익숙함
  • HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높고 작성하기도 쉬움
• 높은 활용도
  • div, span과 같은 HTML 태그를 사용할 수 있고, 컴포넌트도 JSX 안에서 작성 가능
  • App 컴포넌트를 HTML 태그를 쓰는 것과 같이 작성 가능

JSX 문법

• React 문법
• 자바스크립트 표현 사용
• 감싸인 요소
• if문 대신 조건부 연산자 사용 (3항 연산자 사용 (조건 ? true : false))
• AND 연산자(&&)를 사용한 조건부 렌더링
• undefined를 렌더링하지 않기
• 인라인 스타일링 : 카멜 표기법
• class대신 className 사용
• 꼭 닫아야 하는 태그
• 주석

자바스크립트 표현 사용

• JSX 안에서는 자바스크립트 표현식 사용 가능
• JSX 내부에서 코드를 { }로 감싸면 렌더링 가능

import React from 'react';

function App() {
    const name = "리액트";
    return (
        <div>
            <h1>{name} 안녕</h1>
            <h2>작동 확인중</h2>
        </div>
    );
}

export default App;

감싸인 요소

• 컴포넌트에 여러 요소가 있으면 반드시 부모 요소 하나로 감싸야 함
  • <div> 기능을 사용하고 싶지 않다면 <Fragment> 기능을 사용해서 호출 -> Fragment라는 컴포넌트를 추가해서 불러야 함

import React fron 'react';

function App() {
    return (
        <div> {/* 꼭 감싸주어야 함 */}
            <h1>Hello React</h1>
        </div>
    );
}
export default App;

import React, {Fragment} fron 'react';

function App() {
    return (
        <Fragment> {/* 꼭 감싸주어야 함 */}
            <h1>Hello React</h1>
        </Fragment>
    );
}
export default App;

if문 대신 조건부 연산자 (3항 연산자 (조건 ? true : false))

• JSX 내부의 자바스크립트 표현식에서 if문의 사용은 불가능
• 조건에 따라 다른 내용을 렌더링 해야 할 때는 JSX 밖에서 if문을 사용하여 사용 가능

import React fron 'react';

function App() {
    const name = "홍길동";
    return (
        <div>
            {/* 조건(삼항) 연산자 */}
            {name === '홍길동' ? (
                // 조건 True일 때
                <h3>홍길동 입니다</h3>
            ) : (
                // 조건 False일 때
                <h3>홍길동이 아닙니다.</h3>
            )}
            {name === '이몽룡' ? <h3>이몽룡입니다</h3> : <h3>이몽룡이 아닙니다.</h3>}
        </div>
    );
}
export default App;

다음과 같이 작성하면 브라우저에서 '홍길동입니다.', '이몽룡이 아닙니다.' 라는 문구를 볼 수 있음

AND 연산자(&&)를 사용한 조건부 렌더링

• 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황 발생

• 조건부 연산자 사용

• 조건 && expression

  • 조건이 true이면 expression 반환

  • 조건이 false이면 expression 반환하지 않고 무시

{name === '홍길동' && <h3>홍길동입니다.</h3>}

• 조건 || expression

  • 조건이 0 또는 false이면 expression 반환

  • 0이 아니면 해당 값 출력

const number = 100;
{number || '값이 undefined 입니다.'}

[output] 100

undefined를 렌더링 하지 않기

• React 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안됨
• JSX 내무에서 undefined를 렌더링 하는 것은 가능하지만, React 컴포넌트 내서는 불가능

import React fron 'react';
import './App.css';

function App() {
    const name = undefined;
    return name;
}
export default App;

[output]
App(...): Nothing was returned from render, This usually means a return statement is missing. Or, to render nothin, return null.

인라인 스타일링 : 카멜 표기법

• CSS 속성명에 - 사용할 수 없고, 카멜 표기법(CamelCase) 사용
• background-color > backgroundColor

class 대신 className

• 일반 HTML에서 CSS 클래스 사용할 때는 <div class="myclass"></div>로 표현
• JSX에서는 <div className="myclass"></div> 사용

태그는 반드시 닫아야 함

• HTML 코드 작성 시에는 태그를 닫지 않은 상태로 작성하기도 함
• JSX에서는 태그를 닫지 않으면 오류 발생
• <br />, <p />와 같이 태그를 반드시 닫아야 함

주석

{/* ... */}의 형태로 주석 작성

import React from 'react';
function App() {
        return (
            <div>
                {/* 주석 사용 */}
                // 주석 아님
                /* */ 주석 아님
            </div>
        );
    }
}

export default JSX;