스터디 6주차 주간 공부 - React JSX

React beginning

JSX

JSX란 자바스크립트의 신텍스 익스텐션이다. React와 같이 사용되기 위한 문법이다. 브라우저는 JSX를 바로 해석하지 못하기 때문에 JSX 컴파일러가 필요하다.
JSX의 최소 구성 단위를 JSX element라고 한다. HTML과 똑같은 형태이지만 javascript file에서 읽힌다. 그 결과로 우리는 변수, 함수, 객체 등에 JSX elements 들을 할당할 수 있다.

const navBar = <nav>I am a nav bar</nav>;

nesting

네스팅을 할수 있고, 줄바꿈을 사용하려면 () 으로 감싸줘야 한다. 그러나 주의할 점은 하나의 outer tag가 있어야 한다는 것. 안그러면 error.

const myDiv = (
  <div>
    <h1>
      Hello world.
    </h1>
  </div>
)

render

ReactDOM의 render() 메서드로 캔버스에 렌더를 시켜준다. 두개의 arguments를 받는다.!

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

// Write code here:
ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'))

The Virtual DOM

리액트의 강점 중에 하나가 변화가 있는 element들만 DOM에 렌더를 해준다는 점인데, 불필요한 렌더를 하지 않음으로써 속도도 향상할 수 있다. 이를 가능하게 해준게 virtual DOM이다.

jsx & javascript

js로 사용하고 싶을 때 {}로 감싸준다.

const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
}; 
 
const panda = (
  <img 
    src={pics.panda} 
    alt="Lazy Panda" />
);
 
const owl = (
  <img 
    src={pics.owl} 
    alt="Unimpressed Owl" />
);
 
const owlCat = (
  <img 
    src={pics.owlCat} 
    alt="Ghastly Abomination" />
); 

엥 JSX 표현식에서는 조건문을 쓸 수 없다고?

외부에서 조건문 사용하기

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

function coinToss() {
  // This function will randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
  doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};
let img;

// if/else statement begins here:
if(coinToss() === 'heads'){
  img = <img src={pics.kitty} />
}else{
  img = <img src={pics.doggy}/>
}
ReactDOM.render(img, document.getElementById('app'))

또는 JSX 표현식 내부에서 삼항연산자를 사용할 수 있다.

const img = 
<img src={pics[coinToss() === 'heads' ? "kitty" : "doggy"]} />;

또는 && 논리곱 연산자를 사용

const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      {!judgmental && <li>Nacho Cheez Straight Out The Jar</li> }
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

그외 배열,key 등과 함께 사용..

JSX 문법 안쓰고 리액트 코드를 쓸 수 있다고?

ㅇㅇ

const h1 = React.createElement(
  "h1",
  null,
  "Hello, world"
);
ReactDOM.render(h1,document.getElementById('app'))