본 내용은 VELOPERT님의 '누구든지 하는 리액트 : 초심자를 위한 react 핵심 강좌' 강의를 듣고 복습하기 위해 작성한 내용입니다.

React - JSX 기본문법

JSX는 리액트에서 VIEW 를 구성하기 위해 사용 되는 문법이다.

HTML과 유사하지만 조금 다른 문법 규칙이 존재하고 있다.

꼭 닫혀야 하는 태그

태그는 꼭 닫혀 있여하 한다. <div> 태그를 열었으면 </div>를 통하여 태그를 꼭 닫아주어야 한다. 태그를 닫지 않았다면 리액트는 오류를 발생시킬것 이다.

import React, { Component } from  'react';

class App extends Component {
    render() {
        return (
            <div>
                <input type="text"> // 오류 발생!
            </div>
        );
    }
}

export default App;

import React, { Component } from  'react';

class App extends Component {
    render() {
        return (
            <div>
                <input type="text" /> // 태그를 꼭 닫는다.
            </div>
        );
    }
}

export default App;

감싸져 있는 엘리먼트

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.

// src/App.js
import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
             Hello
            </div>
            <div>
             Bye
            </div>
            // 에러 발생!
        );
    }
}

두개의 <div>태그 밖으로 또 하나의 <div>태그로 감싸 주어야 에러가 발생하지 않는다.

다음 코드를 보자.

// src/App.js
import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <div>
                 Hello
                </div>
                <div>
                 Bye
                </div>
            </div>
        );
    }
}

다음과 같이 작성하면 에러는 더 이상 발생하지 않는다.

또 다른 방법으로 <Fragment> 태그를 사용하여 두 개의 엘리먼트들을 감싸 줄 수 있다. 앞선 방법과의 차이는 외부 <div>태그를 만들지 않고 감싸준다는 장점이 있다. (react v16.2 적용)

// src/App.js
import React, { Component, Fragment } from 'react';

class App extends Component {
    render() {
        return (
        <Fragment>
            <div>
             Hello
            </div>
            <div>
             Bye
            </div>
        </Fragment>
        );
    }
}

JSX 내부에 자바스크립트 사용하는 방법

// src/App.js
import React, { Component, Fragment } from 'react';

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

{} 내부에 변수명 등 자바스크립트를 사용할 수 있다.

* var, let, const 차이점 *

function foo() {
    var a = 'hello';
    if(true) {
        var a = 'bye';
        console.log(a); //bye
    }
    console.log(a); // bye
}

var는 함수 단위 스코프이므로 다음과 같이 변수가 초기화된다.

function foo() {
    let a = 'hello';
    if(true) {
        let a = 'bye';
        console.log(a); //bye
    }
    console.log(a); // hello
}

let 과 const는 블록 단위 스코프이므로 if밖으로 초기화된 값이 적용 되지 않는다.

var : 더 이상 잘 사용하지 않는다.

let : 유동적인 값

const : 한번 선언하고 변경하지 않는 값

조건부 렌더링

JSX 내부에서 조건부 렌더링 할 때는 보통 삼항 연산자를 사용하거나,AND 연산자를 사용합니다. 반면 IF문은 사용할 수가 없습니다.(사용하고자 하면 IIFE(즉시실행함수표현)을 사용해야합니다.)

삼항 연산자

import React, { Component } from `react`;

class App extneds Component {
    render() {
        return (
            <div>
                {
                    1 + 1 === 2
                        ? (<div>맞아요!</div>)
                        : (<div>틀려요!</div>)
                }
            </div>
        )
    }
}

export default App;

AND 연산자

import React, { Component } from `react`;

class App extneds Component {
    render() {
        const name = 'tedi';
        return (
            <div>
                {
                    name === 'tedi' && <div>테디다!</div>
                }
            </div>
        );
    }
}

export default App;

IIFE

import React, { Component } from `react`;

class App extneds Component {
    render() {
        const value = '1';
        return (
            <div>
                {
                   (function() {
                       if (value === 1) return <div>1이다</div>
                       if (value === 2) return <div>2이다</div>
                       if (value === 3) return <div>3이다</div>
                       return <div>없다</div>
                   }) () 
                }
            </div>
        );
    }
}

export default App;

화살표 함수

import React, { Component } from `react`;

class App extneds Component {
    render() {
        const value = '1';
        return (
            <div>
                {
                   (() => {
                       if (value === 1) return <div>1이다</div>
                       if (value === 2) return <div>2이다</div>
                       if (value === 3) return <div>3이다</div>
                       return <div>없다</div>
                   }) () 
                }
            </div>
        );
    }
}

export default App;

티스토리

React - JSX 1 (기본문법)