5-3. JSX (HTML with Javascript)

컴포넌트 반환하려면, 최상위에서 무조건 묶어줘야한다.

최상위 컴포넌트를 사용하지 않으려면

import React from 'react'; 를하고,

<React.Fragment></React.Fragment> 로 감싸주면 된다.

귀찮으면 <></>로 빈태그로 감싸주면된다.

React 기능 사용하지 않으면, React import할 필요가 없다.

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

function App() {
  let name = "soyeong"
  return (
    <React.Fragment>
      <MyHeader />
      <header className="App-header">
        <h2>Hello React! {name}</h2>
      </header>
    </React.Fragment>    
  );
}

export default App;

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

function App() {
  let name = "soyeong"
  return (
    <>
      <MyHeader />
      <header className="App-header">
        <h2>Hello React! {name}</h2>
      </header>
    </>    
  );
}

export default App;

React에서는 class를 className으로 사용한다.(javascript예약어라서)

 

css를 통해서 스타일링 할 수 있다.

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

function App() {
  let name = "soyeong"
  return (
    <div className="App">
      <MyHeader />
      <h2>Hello React! {name}</h2>
      <b id="bold_text">React.js</b>
    </div>
  );
}

export default App;

.App {
  background-color: black;
}

h2 {
  color: red;
}

#bold_text {
  color: green;
}

inline 스타일링으로도 스타일링이 가능하다.

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

function App() {
  let name = "soyeong"

  const style = {
    App: {
      backgroundColor: "black"
    },
    h2: {
      color: "red"
    },
    bold_text: {
     color: "green"
    }
  }

  return (
    <div style={style.App}>
      <MyHeader />
      <h2 style={style.h2}>Hello React! {name}</h2>
      <b style={style.bold_text} id="bold_text">React.js</b>
    </div>
  );
}

export default App;

Javascript 값을 사용하는 방법

{ } 안에 수식, 문자열, 함수 등을 넣어도 된다. (숫자나 문자열만 가능)

근데, false나 배열[] 을 넣으면 렌더가 안된다.

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

function App() {
  let name = "soyeong"

  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}>Hello React!</h2>
      <b style={style.bold_text} id="bold_text">
        {number}는 : {number % 2 === 0 ? "짝수" : "홀수"}
      </b>
    </div>
  );
}

export default App;

{number}는 : {number % 2 === 0 ? "짝수" : "홀수"}

이렇게도 가능하다. (조건부 렌더링)