[REACT] JSX / Component

 

 

 

 

 

---

 

JSX

 

JavaScript eXtension

javascript의 확장문법. 

javascript에서 html과 같은 문법을 사용. 

 

 

 

 

---

JSX ?

 

 

React에서 HTML을 표현할 때, JSX를 사용한다.

외관상 HTML같은 markup언어를 리터럴로 입력한는 것으로 보이는데, 빌드시 Babel에 의해 javascript로 변환된다. 

 

 

<div>
   <b>Hello</b> World!
</div>

//babel이 javascript로 변환
"use strict";

React.createElement("div", null, React.createElement("b",
null,"Hello"), "World!");

 

 

 

✔️ JSX에서는 하나의 root 레벨 요소가 있어야한다.

      ? 자바스크립트는 하나 이상을 return 할 수 없기때문에

 

 

---

 

 

 

JSX 규칙

 

 

(Babel에 의해서 JS로 변환되기 위해서 지켜야할)

 

> 속성명은 camelcase

  : onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex

 : 예외적으로 비표준 속성을 다룰 때 활용하는 data-* 속성은 그대로

 

 

> 예약어와같은 속성명 사용불가 (for문, if문 등)

  class사용하려면   'className'  , for사용하려면   'htmlFor'

 

 

 

> 반드시 하나의 태그로  감싸져있어야 함.

  : 감싸는태그가 불필요하다면 <fragment>로 감싸줌 = <> </> 빈태그로 나타낼 수 있음

const right = (
 <>
    <p>list1</p>
    <p>list2</p>
 </>
);

 

 

> 중괄호 { } 로 넣어서 자바스크립트 표현식 활용가능

const product = 'MacBook';

ReactDOM.render(
    <h1>
      {product} 주문하기
    </h1>
 )

 

 

> self-Closing tag 

     <div></div> === <div  />     

 

 

> style적용 camelcase로 작성

function App() {
  const style = {
    backgrounColor: "black",
    color: "aqua",
    fontSize: 24,
  };
  return (
    <div>
      <Hello />
      <div style={style}>hi</div>
    </div>
  );
}

 

 

> 주석 {/* 주석주석 */}

> a태그 #  <a href='#!'> 느낌표 넣어줌

> img  alt값 잘 넣기

> p태그 등에 들어있는 문자중 >는 {'>'} 으로 감싸줘야함

 

 

 

> img

  Public 폴더안에 images 폴더 만들어서 모두 넣어주고 src값으로 /images/(파일이름)

/public
--/images
----iceVanillaLatte.png

<img src='/images/나이트로바닐라크림.jpg' alt="coffee" />

 

 

 

 

 

---

 

 

 

 

component

 

 

 

 

 : react element를 좀더 자유롭게 다루기 위한 하나의 문법/ 재사용 가능한 UI단위 

     (기능이 세부적으로 분리되어 있는 작은 단위)

  > 가장 간단한 방법은 자바스크립트의 함수를 활용 (함수명 첫글자는 대문자로)

  > input을 props라하고 return은 화면에 보여져야할 react요소

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

import Dice from './Dice';

function App() {
  return (
    <div>
      <Dice />
    </div>
  );
}

export default App;

 

ex) nav component만들어서 여러 페이지에 적용하기

//TopNav.js
import React, { Component } from 'react';

class TopsNav extends Component {
  render() {
    return (
        <nav className="navbar">
          <a id='logo' href="#!">
            <img src = "/images/logo.PNG" alt="logo"/>
          </a>
          <ul id='navMenu'>
            <li><a href='#!'>COFFEE</a></li>
            <li><a href='#!'>MENU</a></li>
            <li><a href='#!'>STORE</a></li>
            <li><a href='#!'>WHAT'S NEW</a></li>
          </ul>
        </nav>
    );
  }
}

export default TopsNav;

// List.js
//import React, { Component } from 'react';
import TopsNav  from '../TopsNav';
//import {Link} from 'react-router-dom';
//import './List.scss';

class List extends Component {
  render() {
    return (
      <div>
        <TopsNav />
        <section className="menubar1">
        ~~~~~~~~~~~~~

 

 

 

 

[참고]

Rendering

 : 코드가 눈으로 볼 수 있도록 그려지는 것

 

ReactDom.render 함수 사용

> react요소가 DOM node에 추가되어 화면에 렌더됨

 첫 번째 인자 JSX로 react요소 인자로 넘김

 두 번째 인자는 해당 요소를 렌더하고 싶은 부모요소 전달

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

 

React element

: 리액트로 화면을 그려내는데 가장 기본적인 요소

JSX 문법으로 작성한 요소는 자바스크립트 객체가 됨 = 리엑트 엘리먼트

> ReactDOM.render 함수의 argument로 전달하게 되면, 리엑트가 객체 형태의 값을 해석해서 HTML형태로 브라우저에 띄움