리액트 JSX 에서 html 렌더링 방법 추가

 

 

 

객체리터럴을 사용할 수도 있고

import "./styles.css";
const test = {
  a: <div>Hello</div>,
  b: <div>안녕하세요</div>,
  c: <div>Bonjour</div>
};
export default function App() {
  let key = "a";
  return <div className="App">{test[key]}</div>;
}

 

함수에 따로 html 리턴을 만들어서 사용할 수도 있다.

import { useState } from "react";
import "./styles.css";

export default function App() {
  function A() {
    return (
      <div>
        <div>안녕하세요.</div>
        <div>우지입니다.</div>
      </div>
    );
  }
  const [state, setState] = useState(true);
  return <div className="App">{state && A()}</div>;
}