JSX 문법

JSX에는 몇 가지 규칙들이 있다.

 

🔥 여러 element들은 하나의 element로 감싸야 한다.

import React from 'react';

function App() {
  return (
    <h1>JSX 문법</h1>
    <h2>감싸기!</h2>
  );
}

export default App;

위의 코드를 작성하고 터미널을 보면 에러가 발생한다.

보라박스는 개인 정보를 가린것이다!

"must be wrapped in an enclosing tag" 문구를 확인할 수 있다. 여러 element들이 하나의 element에 감싸져 있지 않기 때문이다. 이 코드를 수정해보자!

 

import React from 'react';

function App() {
  return (
    <div>
      <h1>JSX 문법</h1>
      <h2>감싸기!</h2>
    </div>
  );
}

export default App;

코드를 수정하였다! div 태그로 기존의 element들을 감싼 것을 확인할 수 있다. 

div 태그 말고도 <></>태그로도 감싸줘도 된다. 이 경우 Fragment라는 컴포넌트를 사용한 것이다.

 

에러가 발생하지 않고 잘 실행이 되었다.

 

import React from 'react';

function App() {
  return (
    <>
      <h1>JSX 문법</h1>
      <h2>감싸기!</h2>
    </>
  );
}

export default App;

위와 다르게 div 태그 말고도 <></>태그로도 감싸줘도 된다. 이 경우 Fragment라는 컴포넌트를 사용한 것이다.

 

Fragment를 사용했을 때도 잘 실행되는 것을 확인할 수 있다.

 

🔥 { }를 사용해서 자바스크립트의 표현을 사용할 수 있다.

import React from 'react';

function App() {
  const dinner = '카레'
  return (
    <>
      <h1>오늘 저녁은 {dinner}!</h1>
      <h2>옷에 묻지 않게 조심하자!!</h2>
    </>
  );
}

export default App;

{dinner}에 변수 dinner의 값이 들어간 것을 확인할 수 있다.

 

✔자바스크립트 변수의 범위

변수	범위	변경 가능 여부
var	함수	⭕
let	블록
const		❌

🔥 조건에 따라 다른 내용을 표현할 대 JSX 밖에서 if문을 사용하거나 { } 안에 조건부 연산자(삼항 연산자)를 사용하면 된다.

import React from 'react';

function App() {
  const study = '리액트'
  return (
    <>
      {study === '리액트'?
      (<div>리액트 공부 중</div>):
      (<div>딴짓 중</div>)
      }
    </>
  );
}

export default App;

study의 값이 '리액트'이거나 아닐 때 출력되는 문구가 다르다.

 

아래는 study 값을 변경했을 때 출력된 값이다!

 

🔥 AND 연산자(&&)를 사용한 조건부 렌더링이 가능하다.

import React from 'react';

function App() {
  const study = '리액트'
  return (
    <>
      {study === '리액트' && <h1>리액트 공부 중!</h1>}
    </>
  );
}

export default App;

위와 같은 코드는 study 변수의 값이 '리액트'이기 때문에 h1 태그를 출력한다.

import React from 'react';

function App() {
  const number = 0;
  return (
    <>
      {number && <h1>0이다!</h1>}
    </>
  );
}

export default App;

number는 false 값을 가진다. 따라서 h1 태그는 출력되지 않는다.

하지만 0 값은 출력이 된다.

 

🔥 undefined를 렌더링 하면 안 된다.

import React from 'react';

function App() {
  const value = undefined;
  return value;
}

export default App;

위의 코드에서 value의 값은 undefined이고, value를 리턴한다.

아무것도 렌더링 되지 않았다고 나온다. 이런 경우는 return이 선언되지 않았거나, null을 리턴한 경우이다.

 

import React from 'react';

function App() {
  const value = undefined;
  return value || 'undefined를 반환합니다.';
}

export default App;

코드를 이런식으로 고친다. 그럼 value의 값이 undefined일 때 문구를 출력한다.

🔥 스타일을 적용할 때는 객체 형태로 넣고 스타일 이름은 카멜 표기법을 사용해야 한다.

 

import React from 'react';

function App() {
  const study = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'pink',
    fontSize: '60',
    fontWeight: 'bold',
    padding:'22'
  };
  return <div style={style}>{study}</div>;
}

export default App;

style 객체를 미리 선언하고 div의 style 값으로 사용하였다.

import React from 'react';

function App() {
  const study = '리액트';
  return <div style={{
    backgroundColor: 'black',
    color: 'pink',
    fontSize: '100px',
    fontWeight: 'bold',
    padding:'22'
  }}>{study}</div>;
}

export default App;

코드를 이렇게 바꾸어 쓸 수도 있다. div의 style을 바로 넣어주었다.

 

🔥 class 대신 className을 사용한다.

JSX에서는 class가 아니라 className을 사용한다.

.react {
  background: pink;
  color: black;
  font-size: 100px;
  font-weight: bold;
  padding:22;
}

src/App.css 파일에 위의 코드를 추가해 주었다.

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

function App() {
  const study = '리액트';
  return <div className='react'>{study}</div>;
}

export default App;

src/App.js 파일이다.

App.css 파일을 import 하고 className에 값을 지정해 주었다.

 

🔥 태그를 꼭 닫아주어야 한다.

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

function App() {
  const study = '리액트';
  return (
    <>
      <div className='react'>{study}</div>
      <input>
    </>
  );
}

export default App;

위의 코드를 보면 input 태그가 닫혀 있지 않은 것을 확인할 수 있다.

Unterminated JSX contents라고 에러가 뜨는 것을 확인할 수 있다.

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

function App() {
  const study = '리액트';
  return (
    <>
      <div className='react'>{study}</div>
      <input></input>
    </>
  );
}

export default App;

코드를 잘 닫아 주었다.

 

에러 없이 잘 실행되는 것을 확인할 수 있다.