웹 풀사이클 데브코스 TIL [Day 50] - 리액트와 JSX

JaeKyung Hwang·2024년 1월 31일
JSXTILspa교육생국비지원교육더블 버퍼링리액트수강후기코딩부트캠프프로그래머스 데브코스
0

프로그래머스 웹 풀사이클 데브코스 TIL

목록 보기
50/85
post-thumbnail

2024.01.31(수)

📘리액트란?

사용자 인터페이스(UI, User Interface)를 만들기 위한 JavaScript 라이브러리 🔗

  • SPA(Single Page Application) 기반

    • 단일 페이지에서 내용만을 바꿔가며 페이지를 보여주는 것
      = 현재 페이지를 동적으로 재작성 → 부드러움
    • 기존의 MPA(Multi Page Application)과는 반대 → 브라우저 창이 깜빡거림
    • 👍장점
      1. 문서 전체를 불러오지 않고 필요한 부분만 불러와서 동적으로 만들어쓰다보니 불필요한 트래픽이 발생하지않고 효율적이다.
      2. 서버 또한 불필요한 데이터를 넘겨주면서 생기는 과부하 문제에서 자유로워진다.
      3. 페이지 로딩 속도가 빠르다.
    • 👎단점
      1. 동적으로 생성해야 하기 때문에 Javascript 파일의 크기가 비대해진다.
      2. 첫 화면 로딩 시간이 길어진다. (파일이 커지는 만큼 읽는 시간도 오래 걸림)
      3. 검색엔진 최적화 문제 (SEO, Search Engine Optimization)
        • HTML 문서가 텅 비어있기 때문에 검색엔진이 보기에는 그냥 텅 비어있는 글로밖에 안보이게 된다. 따라서 검색엔진에 노출되기 힘들다.
          ⇒ 해결법
          • SSR(Server Side Rendering)
          • 동적 렌더링(Dynamic Rendering)
          • History API

  • 동작 원리

    • “더블 버퍼링”의 개념을 차용했다고 생각할 수 있다.

      실제 화면과 똑같은 가상 화면을 메모리에 만들고 모든 연산을 가상 화면에서 진행한 후 완성된 화면을 실제 화면에 복사하는 기법

      • 실제 화면에서 연산을 하면 비용이 비싸고 오래 걸림
      • 가상 화면에서 연산을 한 후 실제 화면으로 복사하는 건 비용이 쌈
    • 초기 렌더링(rendering)
      → 가상 DOM 변경
      → 재조정
      → 실제 DOM 업데이트 (re-rendering)

      (Virtual DOM이 double buffering의 메모리이고 Browser DOM이 실제 화면이라고 생각하면 됨)

  • 환경설정

📒JSX

자바스크립트 확장 문법 🔗

  • JavaScript XML, formally JavaScript Syntax eXtension
  • 리액트로 개발할 때 JSX를 사용 (리액트와 JSX 모두 페이스북에서 개발함)
  • XML과 유사한 형태로 리액트의 요소 표현
  • 작성된 코드는 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 코드로 변환됨

🏛️리액트 기본 소스 구조

index.html ← index.tsx ← App.tsx

  • public/index.html
    • 리액트는 SPA → html 파일은 index.html 하나만 존재
    • body에 id가 root인 div가 하나 존재하고 내용은 empty
      <!DOCTYPE html>
<html lang="en">
  <head>…</head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
  • src/index.tsx
    • index.html에서 id가 root인 element를 가져와서 App이라는 컴포넌트(함수)를 render
    • 이 App은 같은 폴더의 App.tsx에서 가져오고 있음
      import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();
  • src/App.tsx
    • html 요소를 반환하는 App이라는 함수가 정의되어 있음
      import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello React!</h1>
      </header>
    </div>
  );
}

export default App;
  • src/App.css
    • App.tsx에서 사용할 스타일 정의
      .App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

🔍JSX 기초 문법

1. 반드시 부모 요소 하나가 감싸는 형태를 반환

  • 하나의 DOM tree로 되어 있어야 Virtual Dom에서 비교하는 데에 효율적이기 때문
  • 보통 div 태그를 많이 사용
    function App() {
  return (
    <div>
      <div>Hello React!</div>
      <p>만나서 반갑습니다.</p>
    </div>
  );
}
  • 빈 태그(<></>)로 감싸면 wrapper node 없이 요소들을 그룹화 가능 (<Fragment></Fragment>의 shorthand 🔗)
    function App() {
  return (
    <>
      <div>Hello React!</div>
      <p>만나서 반갑습니다.</p>
    </>
  );
}
    function App() {
  return (
    <Fragment>
      <div>Hello React!</div>
      <p>만나서 반갑습니다.</p>
    </Fragment>
  );
}

+) 가독성을 좋게 하기 위해 JSX를 여러 줄로 나누는데 혹시 모를 자동 세미콜론 삽입을 피하기 위해 괄호로 묶는 것이 좋다.

2. JSX 안에 자바스크립트 표현식을 중괄호({})로 묶어서 포함 가능 (Data Binding)

  • 모든 유효한 자바스크립트 표현식 포함 가능
    function App() {
  const title = "Hello React!";
  return (
    <div>
      <div>{title}</div>
      <p>만나서 반갑습니다.</p>
    </div>
  );
}

3. 따옴표 (문자열 값인 경우) 또는 중괄호 (표현식인 경우) 중 하나를 사용하여 JSX 속성 정의

⚠️ JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 속성 이름 컨벤션을 사용
예를 들어, JSX에서 class 는 className, tabindex 는 tabIndex

  • 따옴표 사용
    /* 클래스는 App.css에 정의되어 있음 */

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello React!</h1>
      </header>
    </div>
  );
}
    const element = <div tabIndex="0"></div>;
  • 중괄호 사용
    const element = <img src={user.avatarUrl}></img>;

4. JSX 스타일링

  • html에서 inline style을 사용하는 것처럼 속성을 지정하되 css 속성을 가진 style 객체를 만들어 사용 (css 속성명은 camelCase로)
    function App() {
	const style = {
		backgroundColor: "yellow",
    color: "black",
		fontSize: "50px"
	};
	
	return (
    <div className="App">
      <header className="App-header">
        <h1 style={style}>Hello React!</h1>
      </header>
    </div>
	);
}

5. 함수형 컴포넌트의 타입 React.FC 사용

  • 리액트에서 함수형 컴포넌트를 정의할 때 사용하는 타입
  • Functional Component의 약자
  • 함수형 컴포넌트를 정의할 때 해당 컴포넌트의 props를 명시적으로 지정할 때 사용

    • 함수의 매개변수 타입을 지정해주는 거라고 생각하면 됨

      interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};
profile
JaeKyung Hwang
이것저것 관심 많은 개발자👩‍💻
이전 포스트

웹 풀사이클 데브코스 TIL [Day 49] - 타입스크립트 기초2

다음 포스트

웹 풀사이클 데브코스 TIL [Day 51] - 리액트 State와 Component

0개의 댓글