JSX

• import
  모듈을 불러와 사용하는 것은 원래 브라우저에 없던 기능
  브라우저가 아닌 환경에서 js를 실행할 수 있게 해주는 Node.js에서 지원하는 기능.
  이러한 기능 브라우저에서도 사용하기 위해 bundler 사용.
  대표적 번들러로 웹팩.
  번들러 도구를 사용하면 import한 모듈들을 모두 합쳐 하나의 파일 생성
  파일들 불러오는 것 웹팩을 loader기능. (css-loader, babel-loader: js파일 불러오면서 최신 js 문법 es5문법으로 변환. 호환 위해)

• JSX란?
  jsx는 js의 확장 문법이며 xml과 비슷
  jsx형식으로 작성된 코드는 번들링 되는 과정에서 바벨을 사용해 일반 js 형태로 변환됨.

// JSX
function App(){
  return (
    <div>
    	Hello <b>react</b>
    </div>
  );
}

// 일반 js
function App(){
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

jsx 사용해 쉽고 가독성 높게 ui 렌더링 할 수 있음. html코드 작성과 비슷.
js는 요소 일일이 만들어야 함.
jsx는 리액트로 개발시에 사용되므로 공식 js문법이 아님.
jsx에서는 html태그 뿐만 아니라 컴포넌트도 내부에 작성할 수 있음
컴포넌트를 마치 html태그 쓰듯이 작성.

리액트 컴포넌트에서 요소 여러개를 하나의 요소로 감싸야 함.
ㄴ <div>, <Fragment>등으로.

virtual DOM에서 컴포넌트 변화 감지 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM트리 구조로 이뤄져야 한다는 규칙 때문

• 렌더링
  html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1> // 요소가 여러개면 감싸줘야 함.
      <h2>잘 작동하니?</h2>
    </div>
  );
}

import React, { Fragment } from 'react';
// Fragment 컴포넌트 불러와 사용 가능
function App() {
  return (
    <Fragment>// <>, </> 와 같은 식으로도 가능
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </Fragment>
  );
}

• js 표현식
  jsx는 단순히 DOM 요소 렌더링만 하는 것이 아닌 내부에서 js 표현식 사용 가능. 코드를 { }로 감싸면 됨.

function App() {
  const name = 'John';
  return (
    <>
      <h1>my name is {name}!</h1>
    </>
  );
}

• if문 대신 삼항 연산자
  jsx내부의 js 표현식에서는 if문 사용 불가. 따라서 jsx 밖에서 사용핫거나 { } 내에서 삼항 연산자 사용

function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? (
        <h1>yes</h1>
      ) : (
        <h2>no</h2> // null쓰면 아무것도 렌더링x
      )}
    </div>
  );
}

&& 연산자 사용해 조건부 짧은 코드로 조건부 렌더링 가능

const name = ‘John‘; // 위에서 null일때와 같음
return <div>{name === ‘John‘ && <h1>yes</h1>}</div>;

• undefined 렌더링하지 않기

function App() {
  const name = undefined;
  return name;
} // 오류 : Nothing was returned from render. This usually means a return statement is missing.
// Or, to render nothing, return null.

return name || ‘값이 undefined입니다.‘; // 수정 1. OR 연산자 사용해 오류 방지
return <div>{name}</div>; // 수정 2. jsx 내부에서는 undefinded 렌더링 괜찮음

• 인라인 스타일링
  리액트에서 DOM 요소에 스타일 적용 시 문자열 형태가 아닌 객체 형태로 넣어야 함 (주입)
  background_color 아닌 camelCasing. (backgroundColor)

function App() {
  const name = 'myname'
  const style = { // style객체 미리 선언 후 div의 style값 지정
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16
  };
  return <div style = {style} >{name}</div>
}

function App() {
  const name = 'myname';
  return (
    <div // 미리 선언하지 않고 바로 style값 지정
      style = {{
        backgroundColor: 'black',
      color: 'yellow',
      fontSize: '48px',
      fontWeight: 'bold',
      padding: 16
      }}
    >
    {name}
    </div>
  );
}

• class 대신 className
  일반 html에서 css 클래스를 사용할 때
  와 같이 class 속성 설정
  jsx에서는 class대신 className으로 설정

/* App.css */
.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

// App.js
import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  // class로 해도 적용되긴 하지만 경고
  // Warning: Invalid DOM property `class`. Did you mean `className`?
  return <div className="react">{name}</div>;
}
 
export default App;