[React] JSX 문법 정리해보자

요즘 리액트와 자바스크립트를 집중적으로 공부하고 있다.

 

본 포스팅은 김민준 강사님의 누구든지 하는 리액트: 초심자를 위한 react 핵심강좌 라는 강의를 듣고 정리를 해보았다.

 

강의는 여기!

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

 

일단 JSX란 뭘까? 얼핏보기엔 HTML 같기도하고 자바스크립트 같기도한데.... 

 

JSX(JavaScript XML)은 JavaScript 에 XML을 추가한 확장문법이다.

(리액트에서 사용되는 공식적인 자바스크립트 문법은 아니다)

또한 JSX를 사용하면 하나의 파일에서 자바스크립트와 HTML을 동시에 작성하기 때문에 편리하고 가독성이 높다.

 

이제 JSX의 문법에 어떤것이 있는지 알아보자!

 

JSX 문법

 

꼭 닫혀야하는 태그

 

태그가 꼭 닫혀있어야한다. 만약 <div> 태그를 열었다면 </div> 로 태그를 꼭 닫아줘야한다.

html에서 <br>같은 태그도 습관적으로 닫아주지 않을 때가 있는데 리액트에서는 닫아주지 않으면 오류가 생긴다.

 

감싸져있는 엘리먼트

 

두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야한다. 쉬운 이해를 위해 코드를 적어보겠다.

import React, { Component } from 'react';

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

export default App;

만약 이렇게 <div> 두개를 쓰고 닫아주지 않는다면 오류가 생긴다. 오류를 해결하기 위해서는

import React, { Component } from 'react';

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

export default App;

이렇게  <div>로 감싸주면 되는데! 만약 엘리먼트 개수가 많아지거나 스타일 설정을 해준다는 등 여러 변수들로 인해 코드가 꼬이게 될 가능성도 생길 수도 있기 때문에 Fragment를 사용하는 것을 추천한다.

import React, { Component, Fragment } from 'react';

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

export default App;

 

JSX 안에 자바스크립트 값 사용하기

 

JSX 내부에서 자바스크립트 값을 사용 할 때의 코드를 보면

import React, { Component } from 'react';

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

export default App;

이렇게 name 선언을 하고 사용 할 수 있다.

 

const, let , var의 차이점은

https://leedhhhhh.tistory.com/18

[ES6] const, let, var 차이점 알아보기

 

 

조건부 렌더링

 

JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND 연산자를 사용한다.

반면에 if 문을 사용 할 수는 없다. (사용하려면 IIFE(즉시 실행 함수 표현) 을 사용해야한다.)

코드로 예제를 한번 살펴보자

 

- 삼항연산자

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>정답!</div>)
            : (<div>오답!</div>)
        }
      </div>
    );
  }
}

export default App;

* 삼항연산자 : 조건식 ? 반환값1 : 반환값2 

물음표(?) 앞의 조건식에 따라 결과값이 true면 반환값1을 반환하고, 결과값이 false면 반환값2를 반환

 

- AND 연산자

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>정답!</div>)
        }
      </div>
    );
  }
}

export default App;

* AND연산자 : A && B 

A와 B가 모두 true일 경우 true

 

- IIFE

import React, { Component } from 'react';

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>
    );
  }
}

export default App;

화살표 함수로 바꿔보자

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

화살표함수란!?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

여기에 정리가 잘 되있다!  ES6에서 아주 많이 사용되므로 필수로 알아두어야한다.

 

 

style과 className (class)

 

JSX에서의 style

import React, { Component } from 'react';

class App extends Component {
  render() {
    const style = {
      backgroundColor: 'orange',
      padding: '16px',
      color: 'black',
      fontSize: '36px'
    };

    return <div style={style}>개발자 동스</div>;
  }
}

export default App;

결과!

html 에서는 텍스트형태로 적었지만 리액트에서는 객체 형태로 작성해줘야한다.

 

또한 엘리먼트 내부 클래스를 설정 할 때는 html에선 <div class = "" > 이렇게 작성했지만 리액트에서는 class 대신

className을 사용해준다. 예시코드로 살펴보면

 

- App.css

.App {
  backgroundColor: 'orange',
  padding: '16px',
  color: 'black',
  fontSize: '36px'
}

- App.js

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

class App extends Component {
  render() {
    return (
      <div className="App">
        개발자 동스
      </div>
    );
  }
}

export default App;

결과는 위와 같다.

 

 

주석처리

import React, { Component } from 'react';

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

export default App;

주석은 {/* ~~~~~~~~~~ */} 사이에 넣거나 태그 사이에 // 로 넣을 수 있다.