책/리액트를 다루는 기술

[2장] JSX

atmosg 2022. 1. 25. 22:59

2.1 코드 이해하기

// App. js 
import logo from './logo.svg';
import './App.css';

 

js파일에서 import로 다른 파일들을 불러와 사용하고 있다(모듈을 불러와 사용중)
근데 사실 모듈을 불러와 사용하는게 브라우저에는 없던 기능인거 알고있는지?

브라우저는 이 기능을 사용하기 위해 번들러(bundler)를 사용함
파일을 묶듯이 연결해주는데 웹팩, Parcel, browserify 같은 도구들이 대표적인 번들러임
번들러쓰면 import (혹은 require)로 모듈 불러왔을때 불러온 모듈 모두 합쳐서 하나의 파일을 생성해줌. 또한 최적화 과정에서 여러 개의 파일로 분리될 수도 있음
리액트는 웹팩씀

 


ㅇ로더(loader)
웹팩쓰면 SVG파일, CSS파일같은 것도 불러와 사용할 수 있는데 이걸 로더가 담당해줌
ex) css-loader (CSS), file-loader(웹폰트, 미디어파일 등등), 
    babel-loader(js파일들을 '바벨'이란 도구를 써서 ES5문법으로 변환해줌)

2.2 JSX란?
XML과 비슷하게 생긴 자바스크립트 확장 문법(공식 자바스크립트 문법은 아님)
아래 코드가 JSX 코드임 

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


근데 브라우저는 이런 문법 몰라요. 브라우저가 이해할 수 있는 말로 바꿔주셈.
이 역할을 바벨이 해주는데, 
코드가 번들링 되는 과정에서 일반 자바스크립트 형태의 코드로 변환해줌 

function App() {
  return React.createElement("div", null, "hello", React.createElement("b", null, "react"));
}



2.3 JSX 장점
2.3.1 보기 쉽고 익숙함
바닐라 자바스크립트로 요소들 일일이 만들어보면 느낄듯요 
document.getElementById(" ").add(" ... ") ← 태그하나 달겠다는데 귀찮게 줄줄이 달립니다
근데 JSX쓰면 그냥 JS파일 안에서 HTML 코드 쓰듯 만들 수 있으니 편할듯요

2.3.2. 활용도
컴포넌트도 만들고 그걸 HTML 태그 쓰듯이 막 쓸 수 있으니 활용도도 높겠네요

// Index.js 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App /> // App 컴포넌트도 이렇게 막 갖다 쓸 수 있으니 편할듯요
  </React.StrictMode>,
  document.getElementById('root')
);


* ReactDOM.render( 렌더링할 대상, 렌더링할 document 내부 요소 )
  - 컴포넌트를 페이지에 렌더링해주는 함수
  - import ReactDOM from 'react-dom' 즉, react-dom 모듈에 있음

* < React.StrictMode >
  - 레거시 기능을 막는 기능 
    (레거시 코드 : 테스트가 불가능하거나 기능이 정상적이지 않거나, 난해한 코드)
  - 리액트에서 안쓰게된 ref, componentWillMonut 같은 명령어 사용시 경고를 뿜어줌

2.4 JSX 문법
몇가지 규칙이 있으니 잘 준수하도록 하여라
  2.4.1. 감싸인 요소
    - 컴포넌트에 요소가 여러개면 반드시 부모 요소 하나로 감싸라 ( <div> <Fragment> <> )
    - 'Virtual DOM에서 컴포넌트 변화 감지시 효율적 비교를 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다' 는 규칙 때문
    - 아래 코드가 <div> </div>나 Fragment로 안감싸줘서 에러뜨는거임

function App() {
  return (
    <h1>동작하나?</h1>
    <h2>될리가있나ㅋㅋ</h2>
  );
}



  2.4.2. 자바스크립트 표현식 지원
    - JSX가 단순히 DOM 요소 렌더링만 하는건 당연히 아님
    - 자바스크립트 표현식도 쓸 수 있게해줌요. 대신 {  } 로 감싸셈

function App() {
  const name = "노예야";
  return (
    <>
      <h1>{name} 잘지내니?</h1>
      <h2>않이오</h2>
    </>
  );
}



  2.4.3 if문 금지 (대신 조건부 연산자)
    - if문을 밥먹듯이 썼겠지만 리액트에선 불가능요
    - 대신 {   } 안에다가 삼항연산자, AND/OR 연산자 같은거 쓰셈
    - 이게 가능한 이유는 리액트에서 false를 렌더링할 때 null처럼 아무것도 나타내지 않기 때문

function App() {
  const name = "노예야";
  return (
    <>
      {name === "오빠" && <h1>라면먹고 갈래?</h1>}
    </>
  );
}


라면먹고싶었는데 name이 오빠가 아니라서 false를 퉤 뱉었겠네요.
뷰에 아무것도 안뜨죠? false면 null처럼 아무것도 나타낼게 없어서 그렇습니다
※ 대신 falsy한 값인 0은 그대로 렌더링됨요

  2.4.4 렌더링값으로 undefined 금지

  2.4.5 class 대신 className

  2.4.6 인라인 스타일링
    - DOM요소에 스타일 적용시 문자열 형태X 객체 형태 O
    - 그리고 카멜 표기법으로 작성하셈

function App() {
  const name = "노예야";
  const style = {
    backgroundColor : 'black',
    color: 'aqua',
    fontSize : '40px',
    padding: 16 //단위 생략시 px로 자동지정
  }
  return (
    <div sylte={style}>
      집에 가고싶다
    </div>
  );
}


  2.4.7 태그는 꼭 닫자
    - 태그는 <input></input> 이든 <input/>이든 닫아라

  2.4.8 주석은 {/*   */}

2.5 ESLint, Prettier
ㅇESLint : 문법 검사 도구
ㅇPrettier : 코드 스타일 자동 정리 도구