( React )컴포넌트 2, JSX

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 html 코드를 작성 */}
    </div>
  );
}

export default App;

위의 코드를 바탕으로 html 태그를 작성하고 클릭 버튼을 눌렀을 때 alert창이 나타나게 만들기

import React from "react";

function App() {
  // <---- 자바스크립트 영역 ---->
  // function handleClick() {
  //   alert("클릭");
  // }

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      / ! JS영역에서 함수 선언 후 props형태로 전달하는 방식 ! /
      <p>이것은 내가 만든 App컴포넌트 입니다</p>
      <button onClick={handleClick}>클릭</button>

      / ! 이벤트 핸들러를 JSX 내에서 인라인으로 정의하는 방법 ! /
      <p>이것은 내가 만든 App컴포넌트 입니다</p>
      <button
        onClick={function handleClick() {
          alert("클릭");
        }}
      >
        클릭
      </button>
    </div>
  );
}

export default App;

---

JSX

JSX란?

• JavaScript를 확장한 문법
• JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법

const element = <h1>Hello, world!</h1>;

HTML을 품은 JS ⇒ JSX!

• 어째서 JSX냐? html은 XML에 속함 => XML이 포함된 JavaScript 즉 JSX가 됨

JSX 주의사항

• 무조건 한개의 엘리먼트를 반환하기 (같은 선상에 있으면 안됨, 자식요소로 넣든가 하셈)

• JSX에서 javascript 값을 가져오려면 중괄호 { }를 사용하기

function App() {
	const cat_name = 'perl';
  return (
    <div>
      hello {cat_name}!
    </div>
  );
}	

• class 가 아닌 className을 사용 id속성은 그대로 id

• 인라인으로 style 주기

// 기본 예시
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

// 객체도 자바스크립트이기 때문에 중괄호를 두 번 사용


// 스타일 객체를 변수로 만들고 사용하는 예시
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}