[React] JSX 기본 문법 맛보기

서론

리액트 한 책을 다 보고 이제 강의를 보고 있는데, 책에서 배우지 못했던 JSX 문법들을 배울 수 있어서

오늘이 끝나기 전에 간단히 정리해보려고 한다.

 

JSX란?

React에서 사용되는 문법이다.

보기엔 HTML이랑 비슷해보이지만 JSX는 몇몇 규칙들이 존재한다.

 

JSX 문법의 규칙

1. 태그는 꼭 닫혀있어야한다.

<input type="text">

위 코드를 JSX에서 쓴다면 오류가 뜬다.

<input type="text" /> // 1
<input type="text"></input> // 2

따라서 모든 태그를 />나 </ >로 태그를 닫아줘야 한다.

 

2. 두 개 이상의 엘리먼트는 하나의 엘리먼트로 감싸줘야 한다.

<div>Hello</div>
<div>React</div>

이런 식의 코드는 JSX에서 오류가 발생하기 때문에

이 두 엘리먼트를 하나의 엘리먼트로 감싸준다.

<div>
    <div>Hello</div>
    <div>React</div>
</div>

 

만약 스타일이 복잡해지고 table 관련 태그를 쓸 땐 Fragment를 사용할 수 있다.

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

<Fragment>
  <div>
    <h1>안녕하세요 리액트</h1>
  </div>
  <div>
    <h2>React</h2>
  </div>
</Fragment>

Fragment를 사용하려면 먼저 import를 해주고 감싸준 div 대신 Fragment를 적어주면 된다.

이것을 사용하면 렌더링된 웹에선 불필요한 div가 사라진다. (Fragment도 안 보임)

 

JSX 내부에서 자바 스크립트 값을 사용할 때

render() {
  const name = 'react';
  return (
    <div>
      hello {name}
    </div>
  )
}

위 코드처럼 중괄호({})를 사용하여 js 값을 사용할 수 있다.

 

만약 조건부 렌더링을 하고 싶다면 이렇게 사용할 수 있다.

render() {
  return (
    <div>
      {
        1 + 1 === 2
        ? '맞다'
        : '틀리다'
      }
    </div>
  )
}

true일 때만 값을 보여주고 false일 땐 안 보여주고 싶다면

name === 'react' && <div>react</div>

이렇게 사용해준다.

name 변수가 react라면 div 태그를 반환한다는 의미.

 

조건부가 여러 개일 땐 JSX 외부에서 하는 게 일반적이다.

하지만 굳이 내부에서 하고 싶다면

const value = 1;
{
  (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>
  })()
}

이렇게 사용할 수 있고 화살표 함수를 사용해 더 간단하게 표현할 수도 있다.

{
  (() => {
    if(value === 1) return <div>1이다!</div>
    if(value === 2) return <div>2다!</div>
    if(value === 3) return <div>3이다!</div>
    return <div>없다</div>
  })()
}

 

React에서 style 적용

CSS가 아닌 react에서 스타일을 적용시킬 땐 객체 형태로 사용한다.

또한 background-color와 같은 속성은 backgroundColor 이런 식으로 바꾸어 써야 한다.

const style = {
  backgroundColor : 'black',
  padding: '16px',
  color: 'white',
  fontSize: '23px'
}
return (
  <div style={style}>Hello React</div>
);

 

JSX에서 class 사용

JSX에선 class 대신 className 이라는 값을 사용한다. 사실 class라고 해도 작동되긴 하지만 저렇게 적는 게 좋음

<div className="App"></div>

 

담소

서론에서도 말했다시피 React 새 강의를 듣고 있다.

기본은 배웠으니 클론 웹페이지라도 하고 싶은 마음뿐... 내일도 홧팅홧팅