JSX 문법

JSX란? 

우선 JSX의 가장 기본적인 변수를 선언해 보았다.

const element = <h1>Hi, Kim</h1>;

변수 element에 문자열도 HTML도 아닌 문법을 담아주었다.

 

 이런 코드를 JSX라고하며, JavaScript를 확장한 문법을 뜻한다. JSX는 자바스크립트의 모든 기능이 포함되어있고, 필수적인것은 아니지만 자바스크립트코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각되는 문법이다.

 

JSX문법

JSX의 문법은 다음과 같은 규칙을 가진다 반드시 태그를 열었으면 닫아줘야하며, 하나의 태그안에 담아줘야한다.

render() { X                        render() { O
  return(                             return(
  	<div>                              <div>
   	</div>                               <div>
    <div>                                </div>
    </div>                             </div>
  );                                  );
}                                    }

Error

이렇게 작성하게 될 경우 반드시 오류를 발생시킨다.

 

아래는 기본적인 문법이다.

const name = "Josh Perez";
const element = <h1>Hi, {name}</h1>;

위의 코드와 같이 중괄호 안에는 JS 표현식을 넣을 수 있다. 

function formatName(user) {
 return user.firstName + ' ' + user.lastName;
}

const user = {
 firstName: 'Abc',
 lastName: 'Def'
};

const element = (
 <h1>
   Hi, {formatName(user)}!
 </h1>
)

ReactDOM.render(
  element,
  document.getElementById('root')
);

//ReactDOM이 다른 js파일에 가있을경우
export default element;

 

JSX 객체 표현

두 예시는 동일하다.

const element = (
  <h1 className="testCase1">
    I'M Test Code!!!!!
  </h1>
)

또는 React.createElement()을 사용한 코드와 사용하지 않았을때 표현되는 코드를 작성해보았다.

const element = React.createElement(
  'h1'
  {className: "testCase1" },
  `i'am Test Code!!!!!`
);

//위 코드는 아래의 코드를 단순화한 코드이다.
const element = {
  type: 'h1',
  props: {
    className: 'testCase1'
    children: 'i'am Test Code!!!!!'
  }
};

 

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

JSX내부에 자바스크립트 변수를 보여줘야 할 때에는 중괄호( { } )로 감싸서 작성한다.

import React from 'react';

function App() {
  const name = 'Mouse';
  return (
    <div>
      <span>{name}</span>
    </div>
  )
}

 

JSX에 Css및 이름표 붙이기

import React from 'react';

function App() {
  const name = 'Mouse';
  const style = {
  	backgroundColor: 'black',
    color: 'green',
    font-weight: 'bolder',
    padding: '1em',
  }
  return (
    <div className="test">
      <span style ={style}>{name}</span>
    </div>
  )
}

 

아니면 다음과 같이 설정할 수 있다.

 

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

function App() {
  const name = 'Mouse';
  return (
    <div className="test">
      <span style ={style}>{name}</span>
      <input 
        id="btn"
        type="submit"
        value="누르기"
      />
    </div>
  )
}