React_기본 문법

import "./App.css"

//import sample from "./assets/sample.png"

//

//공통으로 사용하는 변수

let title = "Menu";

let names = ["홍길동", "이순신", "강감찬"];

let attr = {href: "http://www.google.com", target: "_blank"};

const App1 = (props) => {

  console.log("App1", props);

  return <a>App1입니다.</a>

}

function App(){

  return (

    <div>

      <h2>jsx 사용 1 - 기본</h2>

      숫자는 중괄호로 출력, 계산 : {100 +1}

      <br></br>

     

      Boolean값(true, false, null)은 직접 출력 안 됨 : {3 > 2}

      <br></br>

       Boolean값(true, false, null)을 이용한 문자열 출력 : {3 > 2 ? "true" : "false"}

      <br></br>

      3항 연산자: {1 ? "A1" : "B1"}

      <br></br>

      <h2>jsx 사용 2 - 배열, 반복, 이벤트, 조건부 랜더링</h2>

      문자열 변수 : {title}

      <br></br>

     

      배열1: {names}, 원소: {names[0]}

      <br></br>

      배열2: {" "}

      {[

        <p key={Math.random()}>Hello</p>,

        <p key={Math.random()}>World</p>,

      ]}

      <br></br>

      JSON: {"사용 불가"}

      <br></br>

     

      링크: <a {...attr}>구글</a>                                 {/* **********************중요*************************** */}

      <br></br>

      반복: {names.map((row, idx) => {

        return <span key={Math.random()}>{row}</span>

      })}

      <br></br>

     

      이벤트 camel 표기법 사용:

      <button onClick={() => console.log("OK")}>OK</button>

      <p style={{ fontSize: "40px", backgroundColor: "red" }}>스타일</p>

      <br></br>

      조건부 랜더링

      {title === "Menu" && <App1></App1>}

      <p style={{

        fontSize: "40px",

        backgroundColor: title === "Menu" ? "yellow" : "red"

      }}>스타일2</p>

    </div>

  )

}

export default App;