[React] JSX Syntax

지난 주에 드디어 React를 배우기 시작했다! 그 동안 자바스크립트도 제대로 모르는데 어떻게 React를 사용하나?..하면서 배우기를 약간 주저했는데, 자바스크립트로 투두리스트도 만들고 게임도 만들고 이것저것 하다보니 조금은 익숙해져서 리액트를 바로 시작했다😃 들어보니 리액트는 매운맛이라고 하던데..ㅎㅎㅎ

여기서 가져가야 할 마인드 하나 챙기고 가보자. 비전공자로 개발공부를 시작했기에 새로운 단어나 개념이 나오면 약간 멘붕🤯 상태가 되는 경우가 몇 번 있었다. 그런데 사실 그 개념들을 알고 나면 생각보다 단순하거나 이해되는 경우가 많이 있었다. 새로운 걸 마주할 때마다 오는 두려움, 하지만 막상 해보면 할 만한 건 모든 새로운 것을 배울 때 적용되는 것 같다. 그렇기에 그 동안 잘해왔던 나를 믿고 그냥 해보는 거다! 그렇게 나아가다 보면 두려움은 결국 사라지고, 새로운 지식을 경험이나 지식을 얻을 수 있는걸 너무 잘 알기 때문이다.(때로는 멘붕도 함께 오지만, 다 하나하나 의미가 있다) 톺아보면, 두려움의 실체는 어려운 단어일 때가 많은데, 지금까지 해오던 것의 연장판 혹은 확장판이기에 나는 충분히 이해할 수 있다!

Introduction to JSX

<JS 파일에서 React Import 하기>

var React = require("react");
var ReactDOM = require("react-dom")

ReactDOM.render(WHAT TO SHOW, WHERE TO SHOW IT)

Babel은 컴파일러로, 최신 문법들을 이전 버전의 자바스크립트에서도 사용가능하도록 변경해준다.

따라서 번거롭게 위에처럼 require로 예전 문법을 쓰지 않고, 아래와 같이 작성해도 된다.

import React from "react";
import ReactDOM from "react-dom";

render

ReactDOM.render(<div>hello world!</div>, document.getElementById("root"));

✅ render 문법에는 두 개의 html 요소를 한꺼번에 넣을 수 없다. 그럼 여러개 요소 넣고 싶을 때는 어떻게 해?

👉 

ReactDOM.render(<div><h1>hello</h1><p>world!!</p></div>, document.getElementById("root"));

const fName = "Angela";
const lName = "Yu";
const num = 7;

ReactDOM.render(
  <div>
    <h1>Hello {fName + " " + lName}!</h1>
    <p>Your lucky number is {num}</p>
  </div>,
  document.getElementById("root")
);