[React] JSX 알아보기

◈ JSX 사용해 보기

JSX 문법을 이용하여 컴포넌트를 만들어보자. MyHeader.js라는 파일을 만들 것인데, 이때 jsx는 js 안에 포함되는 것이므로 확장자는 둘 중에 무엇으로 하든 상관 없다.

const MyHeader = () => {
  return <header>헤더</header>
};

export default MyHeader;

이렇게 MyHeader.js 파일의 내용을 작성해 준 후, 

import MyHeader from './MyHeader';

App.js에서 이런 식으로 import를 해준다. 이때 주의해야할 점은 MyHeader가 리턴하는 것이 반드시 있어야 한다는 것이다. 리턴하는 것이 없으면 에러가 발생한다.

 

◈ JSX 규칙

1. 반드시 모든 태그를 닫아줘야 한다.

-열린 태그로만 작성하면 에러가 발생한다. 닫힘 태그가 없는 태그들(ex. <img>,<br>) 등은 반드시 끝에 /로 닫아줘야 한다.(셀프 클로징 태그)

 

2. 최상위 태그 규칙

-반드시 최상위 태그로 다른 모든 태그들을 감싸줘야 한다. (보통 <div></div>)

-최상위 태그로 다른 태그들을 감싸고 싶지 않다면 React.Fragment 기능을 써야한다. 상단에 

import React from 'react';

이렇게 써주고, 감싸고 싶지 않은 컴포넌트를 <React.Fragment></ReactFragment> 혹은 빈 태그 <></>로 감싸준다.

 

◈ CSS 스타일링

1. App.css에 작성 후, import 해오기

App.css

.App {
  background-color: black;
}

h2 {
  color: red;
}

#bold_text {
  color: green;
}

App.js

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

function App() {

  return (
    <div className="App">
      <MyHeader />
      <h2>안녕 리액트</h2>
      <b id="bold_text">React.js</b>
    </div>
  );
}

export default App;

 

2. 객체를 만들어 inline-style 활용하기

App.js

import MyHeader from './MyHeader';


function App() {

  const style = {
    App: {
      backgroundColor: 'black',
    },
    h2: {
      color: 'red',
    },
    bold_text: {
      color: 'green',
    }
  }
  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕 리액트</h2>
      <b style={style.bold_text}>React.js</b>
    </div>
  );
}

export default App;

 

결과는 두 방법 모두 동일함.

◈ JSX에 JS 사용하기

JSX 문법은 중괄호 표기법{}을 이용하여 변수를 동적으로 출력할 수 있다.

const App = () => {
  let name = "홍길동"; 
  return (
    <div>
      <header>
        <h2>안녕 리액트 {name} </h2>
      </header>
    </div>
  );
}

 화면에 "안녕 리액트 홍길동"이 출력된다. {}안에는 함수를 넣는 것도 가능하다. 그러나 {} 안에는 최종적으로

숫자나 문자열이 들어가야 하며, false나 []배열을 넣으면 렌더링이 되지 않는다.

function App() {

  const style = {
    App: {
      backgroundColor: 'black',
    },
    h2: {
      color: 'red',
    },
    bold_text: {
      color: 'green',
    }
  }
  const number=5;
  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>안녕 리액트</h2>
      <b style={style.bold_text}>
        {number}는 {number % 3 === 0?"짝수":"홀수"}
        </b>
  
    </div>
  );
}

삼항 연산자를 활용하여 조건에 따라 원하는 값을 렌더링할 수도 있다. 이런 것을 조건부 렌더링이라고 한다.(중요)