[React.js] JSX

JSX (JavaScript XML)

: 자바스크립트의 확장문법이자 자바스크립트와 html을 혼합해서 쓸 수 있는 React에서 주로 쓰는 표현식

 

 

1. 닫힘 규칙

: 여는 태그가 있으면 닫는 태그도 있어야 한다.

: a, image, br 같은 경우는 열자마자 바로 닫는 self closing tag로 사용이 가능하다. (ex. <image/>)

 

 

2. 반드시 하나의 부모를 가져야 한다.

: JSX에서 컴포넌트를 만들어서 리턴하려면 반드시 하나의 부모로 묶어서 리턴해야 한다.

 

: 하지만 하나의 부모로 묶고 싶지 않을 때는 React.Fragment를 사용해 준다.

React.Fragment를 사용하기 위해 우선 React를 import 해주고 최상위 태그에 <React.Fragment>로 지정해 준다. 빈태그로도 가능하다.

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

function App() {
  return (
    <React.Fragment>
      <h2>안녕 리액트</h2>
      <b id="bold_text">React.js</b>
    </React.Fragment>
  );
}

export default App;

 

3. 클래스명 지정

: JSX에서는 클래스명 지정 시 className을 사용한다.

<div className="App">

 

4. 스타일링

1) css파일 import 하여 사용

//App.js
import './App.css'; //css파일 import

function App() {
  return (
    <div className="App">
      <h2>안녕 React</h2>
      <b id="bold_text">React.js</b>
    </div>
  );
}

export default App;

/* App.css */
/* 클래스명으로 지정 */
.App{
  background-color: black;
}

/* 태그명으로 지정 */
h2{
  color: red;
}

/* id로 지정 */
#bold_text{
  color: green;
}

 

2) 인라인 스타일링

: css파일을 만들지 않고도 js파일에서 객체를 만들어서 인라인 스타일로 지정이 가능하다.

: 카멜 표기법으로 작성해야 한다. (background-color => backgroundColor)

//App.js

function App() {
  const style={
    App:{
      backgroundColor:"black" //카멜케이스
    },
    h2:{
      color: "red"
    },
    bold_text:{
      color: "green"
    }
  };

  return (
    <div style={style.App}>
      <h2 style={style.h2}>안녕 React</h2>
      <b style={style.bold_text}>React.js</b>
    </div>
  );
}

export default App;

 

 

5. JavaScript의 값 사용

: JSX는 {}를 사용해 자바스크립트의 변수 외에도 표현식, 함수도 포함할 수 있다.

: 하지만 숫자나 문자열이 아닌 것은 render가 되지 않는다.

//App.js
import './App.css';

function App() {
  let name = "홍길동";

  const func = () =>{
    return "func";
  };

  return (
    <div className="App">
      <h2>안녕 {name}</h2>
      <h2>표현식 {1+2}</h2>
      <h2>함수 {func()}</h2>
      <h2>나타나지않음 {[]}</h2>
      <h2>나타나지않음 {false}</h2>
    </div>
  );
}

export default App;

: 숫자나 문자열을 리턴하는 변수, 표현식, 함수는 화면에 값이 렌더링 되지만 배열, boolean의 값들은 렌더링 되지 않음을 확인할 수 있다.

 

*조건부 렌더링*

: 삼항연산자를 사용해 조건에 따라서 각각 다르게 렌더링 되는 조건부 렌더링도 가능하다.

//App.js
import './App.css';

function App() {
  let name = "홍길동";

  const number = 5;

  return (
    <div className="App">
      <h2>안녕 {name}</h2>
      <b id="bold_text">{number}는 {number %2 === 0? "짝수" : "홀수"}</b>
    </div>
  );
}

export default App;

 

 

 

참고

[1] 인프런 한입 크기로 잘라 먹는 리액트(React.js) : JSX