React JS 기초 03. JSX

아 진짜 공부하기 싫다.. 눕고 싶다...

 

• 이전까지 정리한 createElement는 번거로운 방식이다.
• React element를 생성하는 더 편리한 방식을 사용해야 한다.
  더 편리한 도구로 JSX 사용
  JSX란? Javscript를 확장한 문법을 의미

 

---

✨ 기존에 쓴 문법을 JSX방식으로 수정하기!

 

① React.createElement를 JSX로 수정하기

//기존코드
const h3 = React.createElement(
  "h3",
   {
     id:"title",
     onMouseEnter: () => console.log("mouse enter"),
   },
   "Hello, Im a span"
  );

//JSX
 const Title = (
    <h3 id="title" onMouseEnter= {() => console.log("mouse enter")}>
      Hello, Im a span
    </h3>
  );

jsx는 일반 html 코드와 매우 비슷하다.

 

 

② 버튼부분도 수정

//기존코드
  const btn = React.createElement(
    "button", 
    {
      onClick: () => console.log("i'm clicked"),
      style: {
        backgroundColor: "tomato",
      }
    },
    "click me"
  );

//JSX
  const Button = (
    <button
      style={{
        backgroundColor: "tomato",
      }}
      onClick={() => console.log("i'm clicked")}
    >
      click me
    </button>
  )

button의 스타일 및 함수를 모두 태그 안에 간단하게 쓸 수 있다.

 

 

③ 하단의 array부분도 수정 (하지만 이 부분도 추후에 수정)

const container = React.createElement("div", null, [Title, Button]);

가장 마지막인 content영역에 선언한 변수 Title과 Button을 적어준다.

 

 

④ 코드를 수정하고 새로 고침을 하면...

에러가 발생하는 이유?

브라우저가 온전히 JSX를 이해하는 것이 아니기 때문이다.

브라우저가 JSX를 이해할 수 있게 Babel을 설치해야한다. 

 

 

⑤ 임시로 babel링크를 추가해주고 <script type="text/babel"> 또한 함께 추가 해야한다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

 

 

💡 하지만... ?

③번의 container 문법도 JSX로 수정 후 Title과 Button을 포함 시키기 위해서는 const Title과 const Button을 함수로 바꿔줘야 한다.

 

최종적으로...

  //Title 컴포넌트 (일반 함수형)
  function Title()  {
    return (
      <h3 id="title" onMouseEnter= {() => console.log("mouse enter")}>
        Hello, Im a span
      </h3>
    )
  }

//Button 컴포넌트(화살표 함수 형태)
  const Button = () => (
    <button
      style={{
        backgroundColor: "tomato",
      }}
      onClick={() => console.log("i'm clicked")}
    >
      click me
    </button>
  )

일반 함수형태든 화살표 함수 형태든 원하는 함수 형태로 쓰면 되지만, 화살표 함수가 더 쉽다~ (주관적인 의견^^)

 

  const Container = () => (
    <div>
      <Title />
      <Button />
    </div>

📌 컴포넌트의 첫글자는 반드시 대문자여야함

📌 소문자로 작성하면 JSX는 html 태그로 해석하니 주의

 

 

⑥ ReactDOM.render로 컴포넌트를 렌더

ReactDOM.render(<Container/>, root);