React 스터디 2장: JSX

리액트에서 사용되는 JSX가 무엇인지 공부하고, 기본 문법을 정리한다.

1) JSX란?

자바스크립트 확장 문법으로, 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

/* 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코드를 이용한 쪽이 코드작성이 쉽고, 가독성도 좋아보인다.

 

2) JSX 문법

2-1) 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다.
즉, 아래와 같은 코드는 동작하지 않는다.

import React from 'react';

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

export default App;

아래와 같은 에러 내용이 발생한다.

./src/App.js
SyntaxError: /home/sungil/WebstormProjects/hello-react/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (6:4)

  4 |   return (
  5 |     <h1>리액트 안녕!</h1>
> 6 |     <h2>리잘 동작하니</h2>
    |     ^
  7 |   );
  8 | }
  9 |

해당 코드가 정상동작하도록 하기 위해서는 요소 여러개를 아래와 같이 하나로 감싸야한다.

<div> 혹은 <Fragment>등을 이용하여 아래와 같이 감싸주면 된다.

• Fragment는 리액트 v16 이상부터 도입된 기능

/* <div> 이용 예시*/

import React from 'react';

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

export default App;



/* <Fragment> 이용 예시*/

import React, { Fragment } from 'react';

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

export default App;

리액트에서는 Virtual DOM에서 컴포넌트 변화를 감지해낼 때 효율적으로 비교할 수 있도록하기 위해 아래의 제약사항을 걸고있다.

• 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다.

각 컴포넌트를 <div>같은 태그로 묶어서 return시켜야만 위 제약사항을 지킬 수 있는것으로 보인다. 

 

2-2) 자바스크립트 표현

JSX내 안에서 아래와같이 자바스크립트 표현식을 사용할 수 있다.

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

위와 관련하여, 자바스크립트의 변수 종류로는 아래 3가지가 있다.

• const
• let
• var(ES6이전)

const는 상수이고, let과 var은 값이 변할수 있다.

단, let은 scope가 블록이고, var은 scope가 함수 단위이다.

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

즉, var을 사용한 경우, scope가  함수 단위이기 때문에, if문 안에서 새롭게 선언한 var a가 if문 밖에서까지 유효하다.

ES6부터는 const, let만 사용하기 때문에, 블록단위로만 생각하면 될 것 같다.

 

2-3) 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다.
JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 이용해야한다.

import React from 'react';

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

export default App;

 

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

AND 연산자를 이용하여, 특정 값이 일치하지않는경우, 어떠한것도 렌더링하지 않는 코드 예시이다.

import React from 'react';

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

export default App;

 

리액트에서  false를 랜더링할 때는 아무것도 렌더링하지 않는다.

 

2-5) undefined 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 랜더링하는 상황을 만들면 안된다.

undefined가 반환되지 않도록 아래처럼 OR(||)영산자를 이용하여 처리할 수 있다.

import React from 'react';

function App() {
  const name = undefined;
  return (
      name || '값이 undefined입니다.'
  );
}

export default App;

 

2-6) 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어주어야한다.

따라서 스타일이름중 background-color처럼 '-'가 포함되는 경우 camelCase로 작성해야한다.

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

 

2-7) CSS 적용

일반 HTML에서 CSS를 div에 적용할때 아래와 같은 방법으로 적용한다.

<div class="myclass"> </div>

JSX에서는 class가 아닌 className으로 설정해주어야한다.

// App.css
.style1 {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

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

// App.js

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

function App() {
  return (
      <div>
        <p className="style1">This is style1</p>
        <p className="style2">This is style2</p>
      </div>
  );
}

export default App;