2023-10-31 본 캠프 19일차 / 38일차 TIL

주요진행사항

- 리액트 입문반 강의 (내일배움캠프)

- 알고리즘 문제풀이

리액트 입문반 강의 (내일배움캠프)

React란?

UI를 구축하기 위한 JavaScript 라이브러리
- SPA(Single Page Application) 기반의 프론트엔드 개발 프레임워크 중 하나
- 컴포넌트 단위의 독립적인 블록을 이용한 개발방법 이용
- 다른 SPA 프레임워크인 AngularJS, VueJS 보다 월등한 인기

SPA란?

Single Page Application
한개의 페이지로 이루어진 애플리케이션

1. 왜 사용하는가?
기존에 MPA(Multi Page Application)는 누를 때만다 페이지가 리렌더링되는 문제가 발생
SPA를 사용하면 데이터만 변경하여 부드러운 UX를 구현할 수 있다.

2. 특징
- 딱 한개의 페이지로 구성된 웹 앱
- 서버에 1회 리소스를 요청 (index.html 1개)
- 그 이후에 필요할 때 데이터만 받아와 기존 페이지 수정하는 방식
- 페이지 깜빡임이 없음, 부드럽고 자연스러운 UX 구현
- 비슷한 기술들이 존재 (Angular, Vue 등), 각각의 기술마다 차이점 존재

3. SPA의 단점
SEO (Search Engine Optimization) 를 위해 HTML 페이지 전체가 필요하지만
SPA 페이지의 HTML 파일은 모두 단순하게 구성되어있다.

<html>
<head>
  <title>리액트 프로젝트</title>
  <link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

따라서 Search Engine이 페이지를 식별하는데 어려움이 있다. 페이지 검색 빈도 하락
이를 해결하기 위해 next.js 등장 (추후 공부)
결론적으로 검색 로봇이 페이지를 감지하기 어려움

4. SPA 프레임워크 종류
- ReactJS
- 페이스북이 만들고 유지보수
- 선발주자인 만큼 막강한 커뮤니티와 자료 보유
- VueJS
- 배우기 쉽고 단순하다
- 후발주자라 마켓 점유율이 적다
- 꾸준한 성장세를 보인다
- AngularJS
- 안정적인 프레임워크
- 어렵고 프로그램이 어렵다. 점유율이 가장 낮음

CRA란?

Create React App

명령 하나만 실행하여 최신 웹 앱을 설정

- 보일러 플레이트 코드?

어원은 신문사업에서 나왔다. 1890년대에 광고나 칼럼과 같이 계속 사용되는 텍스트 인쇄판은 부드러운 납 대신 강철로 찍기 시작함. 이를 보일러플레이트라고 불렀다.

CRA는 리액트 프로젝트를 시작할 때 세팅해야 할 것이 상당히 많지만 이러한 것들을 신경쓰지 안도록 알아서 세팅해준다. 따라서 CRA는 보일러 플레이트 코드라고 볼 수 있다.

파일 생성 명령어

yarn : yarn create react-app [생성할 폴더명]
npm : npx create-react-app [생성할 폴더명]

서버 시작

yarn : yarn start
npm : npm start

- CRA로 생성된 파일들

CRA로 생성된 리액트는 SPA로 서버를 통해 가져오는 페이지는 index.html 하나이다.

index.html에는

<div id='root'></div>

라는 코드 밖에 없다.
우리가 의도한 화면이 아니라는 뜻이다.

index.js에서는

const root = ReactDOM.createRoot(document.getElementByID('root'));

를 통해 index.html의 해당 div 태그를 root로 지정한다.

다음으로
root.render(
<App ./>
)
이라는 코드를 통해 <App ./> 부분을 랜더한다.
이 때 <App./>란
상단의 import App from './App'; 부분을 통해 App.js에서 가져온 모듈이다.
이는 App.js의 것들을 화면에 띄운다는 뜻이다.

결론적으로 우리가 코드를 작성하는 부분은 App.js가 된다.

리액트 컴포넌트?

- 재사용 가능한 UI

- 각 조각을 개별적으로 살펴볼 수 있다.

- props 라는 input을 받고 React 엘리먼트를 반환

종류

1. 함수형 컴포넌트

2. 클래스형 컴포넌트

우리가 사용할 컴포넌트는 함수형 컴포넌트

why? 공식적으로 권장하는 방법, 쉽다

함수형 컴포넌트의 구조

// import 영역
import logo from "./logo.svg";
import "./App.css";

function App() { // 컴포넌트의 이름은 무조건 대문자로 시작
    //javascript 영역
  return (
    //jsx 영역
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

// export 영역
export default App;

JSX란?

자바스크립트를 확장시킨 문법

JSX 내부 html 태그들은 DOM 요소가 아니라 리액드 돔을 구성하는 리액트 요소이다.

props?

컴포넌트끼리의 정보 교환방식, 데이터 교환 방식

- 부모 컴포넌트에서 자식 컴포넌트의 방향으로 값을 내려준다.

- 읽기 전용방식으로 변경 불가능하다.

function Son({ grandFatherName }) {
  return <div>나는 {grandFatherName} 손자에요!</div>;
}
function Mother({ grandFatherName }) {
  return <Son grandFatherName={grandFatherName} />;
}
function GrandFather() {
  const name = "흥할아버지";
  return <Mother grandFatherName={name} />;
}
function App() {
  return <GrandFather />;
}

단, props 드릴링에 유의해야한다.

중간 다리 역할의 컴포넌트가 많을 때 자식요소로 props를 넘겨주는 모습이 마치 드릴 처럼 보인다는 것이다.

propsChildren

props와 동일하지만 사용하는 법이 다르다.
이때 장점은 props를 통해 컴포넌트를 전달 할 수도 있다.

import React from "react";

function GrandFather(props) {
  const name = "흥할아버지";
  return (
    <>
      <div>{name}라고 합니다.</div>
      <span>{props.children}</span>
    </>
  );
}
function App() {
  return <GrandFather>가나다라</GrandFather>;
}

export default App;

저작자표시 변경금지

'내일배움캠프 TIL' 카테고리의 다른 글

2023-11-02 본 캠프 21일차 / 40일차 TIL (1)	2023.11.03
2023-11-01 본 캠프 20일차 / 39일차 TIL (1)	2023.11.02
2023-10-30 본 캠프 18일차 / 37일차 TIL (1)	2023.10.30
2023-10-29 주말 TIL (0)	2023.10.30
2023-10-28 주말 TIL (0)	2023.10.30