리액트를 다루는 기술 - JSX

해당 내용은 velopert님이 작성한 리액트를 다루는 기술 책을 요약하여 작성하였습니다.
리액트를 다루는 기술 - 김민준(velopert)

번들러

번들러란 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 주는것이다.

번들러 도구: 웹팩, Pracel, browserify 등

리액트 프로젝트에서는 웹팩을 사용하는 추세이다.
웹팩을 사용하면 SVG파일과 CSS파일도 불러와서 사용할 수 있다.
웹팩의 로더(loader)가 파일들을 불러오는 기능을 담당하고 있다.
css-loader 는 CSS파일을, file-loader 는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다.
babel-loader는 자바스크립트파일을 불러올 때 최신 자바스크립트 문법으로 작성된 커드를 ES5문법으로 변환해 준다. <-- 구버전 웹 브라우저와 호환하기 위해!!

JSX란?

자바스크립트의 확장 문법으로 XML과 비슷한 생김새이다.
JSX 코드는 실행 전 코드가 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 변환된다.

JSX의 장점

1. 보기 쉽고 익숙하다.
2. 더욱 높은 활용도
   HTML태그를 사용할 수 있을 뿐 아니라 컴포넌트도 사용가능하다.

---

JSX문법

감싸인 요소

Virtual Dom에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다.
즉, 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

div요소를 사용하여 감싸고 싶지 않다면 Fragment기능을 사용할 수 있다.

import { Fragment } from "react";

function App(){
  return (
    <Fragment>
    <h1>리액트 안녕!</h1>
    <h1>잘 작동 하니?</h1>
    </Fragment>
  )
}

export default App;

또는

function App(){
  return (
    <>
    <h1>리액트 안녕!</h1>
    <h1>잘 작동 하니?</h1>
    </>
  )
}

export default App;

형태로 사용 가능하다.

자바스크립트 문법

JSX내부에서 자바스크립트 표현식을 사용하려면 코드를 {}로 감싸면 된다.

function App(){
  const name = '리액트';
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h1>잘 작동 하니?</h1>
    </>
  )
}

export default App;

 

IF문 대신 조건부 연산자

JSX내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.

JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 {} 안에 조건부 연산자를 사용하면 된다.

function App() {
  const name = "리액트";
  return (
    <>
      {name === "리액트" ? <h1>리액트입니다!</h1> : <h1>리액트가 아닙니다.</h1>}
    </>
  );
}

export default App;

 

!!!!!!   AND연산자(&&)를 사용한 조건부 렌더링 ( 유용 )    !!!!!

AND연산자

첫번째 피연산자가 truthy이면, 두번째 피연산자를 반환
첫번째 피연산자가 falsy이면, 첫번째 피연산자를 반환

function App() {
  const name = "리액트";
  return <div>{name === "리액트" && <h1>리액트입니다!</h1>}</div>;
}

export default App;

리액트에서는 false를 랜더링 할 때 null과 마찬가지로 알무것도 나타내지 않는다. 그러나 0의 경우 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

--> 결과: 화면에 숫자 0 보여짐

undifined를 렌더링하지 않기

함수에서 undifined만 반환하여 렌더링하는 상황을 만들면 오류가 발생한다.

어떤 값이 undifined일 수 있다면 OR(||)연산자를 사용하여 오류를 방지한다!!

OR연산자

첫번째 truthy를 반환
모두 falsy일 경우 가장 마지막 값을 반환

해당 코드는 undifined 반환 오류 발생

function App() {
  const name = undefined;
  return name;
}

export default App;

OR연산자를 통해 오류 방지

function App() {
  const name = undefined;
  return name || '값이 undifined입니다';
}

export default App;

JSX 내부에서 undifined를 랜더링 하는 것은 괜찮다!

인라인 스타일링

DOM요소에 스타일을 적용할 때는 객체 형태로 넣어야 한다.
'-' 문자가 포함된 이름은 카멜 표기법으로 바꾸어 작성한다.

ex) background-color => backgroundColor

function App() {
  const name = "리액트";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeitht: "bold",
    padding: 16,
  };
  return <div style={style}>{name}</div>;
}

export default App;

style을 선언하지 않고 바로 적용하고 싶다면 다음과 같이 작성한다.

function App() {
  const name = "리액트";
  return (
    <div
      style={{
        backgroundColor: "black",
        color: "aqua",
        fontSize: "48px",
        fontWeitht: "bold",
        padding: 16,
      }}
    >
      {name}
    </div>
  );
}

export default App;

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 "./App.css";

function App() {
  const name = "리액트";
  return <div className="react">{name}</div>;
}

export default App;

clss로 설정해도 스타일이 적용되기는 하지만 console에 경고가 발생한다.

꼭 닫아야 하는 태그

html태그는 input요소는 닫는 태그 없이도 작동했다.
JSX에서는 태그를 닫지 않으면 오류가 발생한다.
태그를 꼭 닫아주도록 하자

주석

JSX내부에서 주석을 작성할 때는 {/.../}와 같은 형식으로 작성한다.
시작 태그를 여러 줄로 작성할 때 시작태그 안에서 //와 같은 형태의 주석도 작성할 수 있다. 그러나 그 이외의 공간에서는 주석을 작성할 수 없다.

import "./App.css";

function App() {
  const name = "리액트";
  return (
    <>
      {/*주석은이렇게!!*/}
      <div
        className="react" //시작 태그를 여러줄로 작성하면 여기에 주석 작성가능
      >
        {name}
      </div>
      //하지만 이런주석이나
      /*이런주석은 페이지에 그대로 나타남*/
    </>
  );
}

export default App;