3 분 소요

JSX

쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX입니다. “React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.” (나무위키曰)

JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법으로, 리액트 개발에 엄청난 도움을 주고 있습니다.

문법

1. 태그는 최상위 태그로 감싸줘야 합니다. 꼭 하나의 요소로 묶어야 합니다.

  • 에러의 예제
    • <h1>태그가 2개인데 묶지 않고 사용했습니다. 이런 경우는 에러가 발생합니다
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>안녕하세요?</h1>
      <h1>안녕하세요?</h1>
    );
  }
}

export default App;
  • <div>태그로 감싸는 방법입니다.
import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요?</h1>
      </div>
    );
  }
}

export default App;
  • <Fragment>태그로 감싸는 방법입니다.
    • ```태그는 <div>태그보다 무거워서 권장하지 않습니다.
import React, { Component, Fragment } from "react";

class App extends Component {
  render() {
    return (
      <Fragment>
        <h1>안녕하세요?</h1>
      </Fragment>
    );
  }
}

export default App;
  • <> </>를 사용하는 방법입니다.
    • 이와 같은 방법을 사용하면 스타일링에도 문제가 없고, Fragment를 불러오지 않으니 무겁지도 않습니다
import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <>
        <h1>안녕하세요?</h1>
      </>
    );
  }
}

export default App;

2. JSX 안에서 자바스크립트를 사용하고 싶을때는 {}를 사용합니다.

JSX는 return안에 작성하기 때문에 그 밖에는 자바스크립트 언어를 작성해도 됩니다. return안에는 JSX문법을 작성하기 때문에 이때부터 자바스크립트 언어를 사용하려면 { }를 작성해야합니다. { }의 마지막에는 [;]을 작성하면 오류가 있으니 주의해주세요.

import React, { Component } from "react";

class App extends Component {
  render() {
    const text = "안녕하세요";

    return (
      <>
        {alert("자바스크립트에요~")}
        <h1>{text}</h1>
      </>
    );
  }
}

export default App;

3. JSX의 {}안의 주석은 /* */만 사용 가능합니다.

  • return문 밖에서는 // 주석처리가 가능합니다.
import React, { Component } from "react";

class App extends Component {
  render() {
    /* 두줄 주석 서용 */
    const text = "안녕하세요"; //한줄 주석 사용

    return (
      <>
        <h1>{text}</h1>
      </>
    );
  }
}

export default App;
  • return문 안에서는 /* */만 사용이 가능합니다.
import React, { Component } from "react";

class App extends Component {
  render() {
    const text = "안녕하세요";

    return (
      <>
        <h1>{text /* 변수사용 */}</h1>
      </>
    );
  }
}

export default App;

4. 조건부 렌더링

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없습니다. 그렇기 때문에 JSX 밖에서 if 문을 사용해서 값을 설정하거나 {}안에서는 조건부 연산자 - 삼항연산자를 사용해야합니다.

import React from "react";

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

export default App;
  • 삼항연산자의 중첩도 사용 가능합니다
function Component() {
  return (
    <div>
      {1 === 1 ? (
        <p>참이면 보여줄 HTML</p>
      ) : 2 === 2 ? (
        <p>안녕</p>
      ) : (
        <p>반갑</p>
      )}
    </div>
  );
}
  • 논리연산자 &&, ||도 이용 가능합니다.

    이 코드는 잘 동작하는데, 자바스크립트에서 true && expression 은 항상 expression 으로 평가되고, false && expression 은 항상 false 로 평가되기 때문입니다.

    따라서 조건이 true 라면 && 다음에 오는 요소가 노출됩니다. 만약 조건이 false 라면, React는 이를 무시하고 건너뜁니다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

const messages = ["React", "Re: React", "Re:Re: React"];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById("root")
);

5. JSX 스타일링

JSX에서 자바스크리브 문법을 사용 하려면 {}를 사용해야합니다. 그리고 스타일 속성명과 값을 작성하려면 객체방식이어야 하기때문에 두번의 중괄호가 필요합니다.

<태그명 style=></태그명>

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <>
        <h1
          style=
        >
          스타일링
        </h1>
      </>
    );
  }
}

export default App;
  • 변수에 값을 넣어 사용도 가능합니다.
import React, { Component } from "react";

class App extends Component {
  render() {
    const h1Style = {
      backgroundColor: "black",
      color: "pink",
    };

    return (
      <>
        <h1 style={h1Style}>스타일링</h1>
      </>
    );
  }
}

export default App;

6. 외부 스타일시트의 class 가져와서 사용 가능합니다.

자바스크립트에서 class란 예약어가 사용되고 있기 때문입니다. 그래서 className을 이용해서 css를 적용합니다.

<태그명 className="클래스명"></태그명>

* test.css 라는 파일을 만듭니다. .black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

* 위의 css를 불러오는 방법입니다.

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

class App extends Component {
  render() {
    return (
      <>
        <h1 className="black-nav">스타일링</h1>
      </>
    );
  }
}
export default App;

위의 css 예제에서 css를 작성한후 밑의 예제와같이 className을 이용해 class를 불러왔습니다.

댓글남기기

참고

최대 1 분 소요