[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 시작하기

왜 React를 사용하는가

가장 인기있는 프레임워크

일단 사용량이 많음. 리액트가 뷰의 4배정도의 사용량을 보임

성능적 장점

기본적인 렌더링 방식

기본적인 렌더링 과정

Critical Rendering Path

1. DOM 트리 생성
2. CSSOM 트리 생성
3. JS 실행
4. Reder Tree 생성
5. 레이아웃 생성
6. 페인팅

🔥 작성한 html 코드를 기반으로 DOM 트리를 생성하고 CSS파일을 토대로 CSSOM트리를 생성한다. DOM과 CSSOM으로 Render Tree를 생성하고 Layout으로 화면에 어떻게 그릴지 설계한다. 그 결과를 화면에 Paint하는 과정을 Critical Rendering Path라고 한다.

이때 화면을 조작할 때마다 dom이나 cssom이 변하고 그로인해 render tree, layout, paint 과정을 매회 반복하게 되는데 이게 개발적 비용이 많이드는 과정이다. (특히 reflow(layout 다시 그리기), repaint(다시 paint)가 비용이 비쌈)

자바 스크립트로 개발하면 개발자는 reflow와 repaint를 줄이기 위해 계속해서 노력해야 했다.

리액트는 자동으로 reflow, repaint를 최적화 해준다!!

그럼 100% 최적화가 되는 것인가?

그렇지는 않다..!!

1. 가상돔(2개)을 만들고
2. 변경 사항을 가상돔에 적용하고
3. 수정한 가상돔을 또 다른 가상돔과 비교하고 (diffing)
4. 비교가 끝나면 재조정 (confiliation)

위와 같은 과정도 개발적 성능 비용이 발생하기 때문에 항상 최적화를 생각하며 코드를 작성해야 함

내보내고 불러오기

1. export default App
   1. import App from "";
   2. 중괄호 없이 컴포넌트를 받을 수 있음
   3. 불러올 때 컴포넌트의 이름을 자율적으로 바꿀 수 있음
2. export function App () {}
   1. import { App } from "";
   2. 비구조 할당으로 받아서 처리해야 함
   3. 불러올 때 반드시 반환할 때 사용한 이름 그대로를 사용해야 함

컴포넌트 만들기

createElement

// <div><h1 id="title" class="main">Hello, CreateElement!</h1></div>
return createElement(
  "h1",
  { id: "title", class: "main" },
  "Hello, CreateElement!"
); // 속성 추가했을 때

// <div><h1>Hello, CreateElement!</h1></div>
return createElement(
  "div",
  null,
  createElement("h1", null, "Hello, CreateElement!")
);

// <div><h1>Hello, CreateElement!</h1><p>Hello~~~</p></div>
return createElement(
  "div",
  null,
  createElement("h1", null, "Hello, CreateElement!"),
  createElement("p", null, "Hello~~~")
);

JSX / TSX

Javascript XML의 약자로 자바스크립트를 확장한 문법

페이스북 팀이 개발한 문법
⇒ 배포할 당시 다른 사람들은 해당 문법을 컴파일할 환경이 갖춰지지 않았음
⇒ 빠른 선점을 위해 JS로 JSX를 만들 수 있다고 광고하고 createElement를 적용하고 JSX 컴파일러를 적용하는 일을 함.
⇒ 15년 부터 대부분의 환경에서 JSX 컴파일러 지원함.
⇒ 이제 createElemtent 사용이 없어짐.

작성시 주의 사항

반드시 하나의 루트 태그여야 한다.

그러나 그렇다고 임의의 태그를 추가해서 컴포넌트들을 묶어주면 나중에 코드를 수정하는 과정에서 css의 적용 범위가 달라지는 등의 문제가 발생할 수 있다. 따라서 별도의 태그 추가없이 코드를 묶어줄 필요가 있다.

1. fragment 태그 사용

   import React from "react";
   
   const App = () => {
     return (
       <React.Fragment> {/*임의의 태그를 추가하지 않고 태그들을 묶음*/}
         <h2>소개</h2>
         <p>여기에 소개 내용을 작성하세요.</p>
       </React.Fragment>
     );
   };

2. 빈태그로 묶기

const App = () => {
  return (
    <>
      <h2>소개</h2>
      <p>여기에 소개 내용을 작성하세요.</p>
    </>
  );
};

반드시 태그를 닫아줘야 함

 

HTML5의 가장 큰 장점이 태그를 닫지 않아도 사용할 수 있다는 점이지만 jsx는 반드시 태그를 닫아줘야 한다. 따라서 헷갈리지 않도록 주의해야 한다.

// HTML4
<br />
// HTML5 => JSX에서 오류남
<br>

함수형 컴포넌트 이름, 파일명은 항상 대문자로 작성 (파스칼 케이스)

class는 className으로 사용한다,
⇒ class를 클래스 예약어로 사용하고 있기 때문이다.

스타일 적용하기

인라인 스타일(Inline Style)

특정 태그에만 적용됨
표션식 안에 객체로 스타일 적성함

<h1 style={{ fontSize: "50px", color: "red" }}>Count: {number}</h1>
// dash가 있는 경우 dash를 제거하고 카멜 케이스로 작성

외부 스타일(External StyleSheet)

전체적으로 스타일 적용됨
import하는 코드가 실행되면 그 순간부터 전역적으로 스타일이 적용된다는 특징이 있음

// assets/global.css 스타일 정의
h1 {
  text-decoration: underline;
}

// main.tsx 스타일 적용
import "./assets/globals.css";

컴포넌트 추가

const Sub = () => {
  return (
    <>
      <h1>Sub Component</h1>
    </>
  );
};
export default Sub;

import Sub from "./Sub";

const App = () => {
  const number = 100;
  return (
    <>
      <h1 style={{ fontSize: "50px", color: "red" }}>Count: {number}</h1>
      <Sub />
    </>
  );
};

export default App;

 

결과

전역으로 적용되기 때문에 최상단 컴포넌트인 main.tsx에 참조하는 것이 관례.
스타일 파일을 src/assets 폴더에 생성하는 것이 관례

CSS Module

특정 컴포넌트에만 적용

// src/App.module.css
.title {
  font-size: 50px;
  color: blue;
}

import Sub from "./Sub";
import styles from "./App.module.css"; // 관례상 styles로 많이 명명함.

const App = () => {
  const number = 100;
  return (
    <>
      <h1 className={styles.title}>Count: {number}</h1>
      <Sub />
    </>
  );
};

export default App;

 

화면을 띄운 후 컴포넌트르 확인해보면

클래스명이 기존과는 다른 것을 확인할 수 있다. 클래스 이름을 바꿔서 제공하기 때문에 다른 컴포넌트에 영향을 주지 않아 중복을 방지할 수 있다는 장점이 있다.

컴포넌트 파일이 있는 폴더에 생성하는 것이 관례

CSS-in-js

JavaScript 내에서 CSS 스타일을 작성하고 관리하는 기법
전통적인 CSS 파일과는 다르게, 스타일을 JavaScript 코드 내에서 정의하고 컴포넌트와 함께 번들링하는 접근 방식

Styled Components

가장 많이 사용되던 CSS-in-js

 

설치

npm install styled-components

 

사용방법

import Sub from "./Sub";
import styles from "./App.module.css";
import styled from "styled-components";

const App = () => {
  const number = 100;
  const MainTitle = styled.h1`
    color: red;
  `;
  const MainLink = styled.a`
    text-decoration: none;
    color: pink;
  `;

  return (
    <>
      <MainTitle>Styled Components</MainTitle>
      <MainLink>tesstxd</MainLink>
      <h1 className={styles.title}>Count: {number}</h1>
      <Sub />
    </>
  );
};

export default App;

 

단점

변수 이름으로 태그를 사용하기 때문에 어떤 태그로 생성된건지 알 수 없어 가독성이 떨어진다.

Emotion

styled-components의 변수명이 직관적이지 않는 문제 해결

 

설치

npm i @emotion/css

Vanilla Extract

제로 런 타임(Zero Run Time)이라는 개념이 새롭게 등장하게 되면서 최근에 급 부상하고 있는 라이브러리
제로 런 타임: 런 타임 오버헤드가 없는 CSS
=> 스타일을 적용하는 데 있어서 런타임에 추가적인 자바스크립트 코드 실행이나 연산이 필요하지 않음

 

설치

npm i @vanilla-extract/css @vanilla-extract/vite-plugin

 

사용방법

// assets/styles.css.ts
import { style } from "@vanilla-extract/css";

export const h1Style = style({
  fontSize: "30px",
  color: "#ed3838",
  textDecoration: "line-through",
});

import { h1Style } from "./vanila/styles.css.ts";
const App = () => {
  return (
    <div>
      <h1 className={h1Style}>Hello, World!</h1>
    </div>
  );
};

export default App;