React(2)

수민·2022년 11월 28일
0

프론트엔드

목록 보기
45/48

SPA란?

SPA(Single Page Application)는

모던 웹의 패러다임이다. SPA는 단일 페이지로 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공한다는 장점이 있다.

SPA는 웹 앱에 필요한 모든 정적 리소스를 처음에 한번 다운로드한다. 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다. 이런 특징들은 SPA가 모바일 웹에 최적화 된 이유이기도 하다. 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있다.

그러나, SPA도 모든 환경에 적합한 것은 아니다. 우선, 초기 구동속도가 느린 편이다. 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문이다. 또한, SEO (검색엔진 최적화) 문제가 존재한다. SPA는 서버 렌더링 방식이아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이다. 때문에, 처음 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안될 수도 있다. 하지만, SPA는 웹보다는 앱에 적합한 기술이고 React나 Angular 등의 프레임워크는 서버 렌더링(SSR)을 지원하는 SEO 기술이 이미 존재한다.

SEO (검색 엔진 최적화)

검색자의 의도를 이해하고 이에 맞춰 웹 페이지의 콘텐츠를 제작, 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘림

MPA란?

MPA 작동방식
link tag를 사용하는 전통적인 웹 방식이다. 새로운 페이지 요청 시 마다 정적 리소스가 다운로드 되고 전체 페이지를 다시 렌더링하므로 새로고침이 발생되어 사용성이 좋지 않다. 페이지에서 필요 없는 부분을 포함하여 전체를 갱신하기 때문에 비효율적이다. 또한, 추후에 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하기 때문에 개발 생산성이 좋지 않을 수도 있다.

하지만, MPA도 단점만 존재하는 것이 아니다. 가장 큰 장점은 SPA와 달리, SEO에 친화적이다. 네이버나 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트라면 MPA 구조로 개발하는 것이 좋다. 또한, 서버에서 이미 렌더링한 결과를 가져오기 때문에 SPA와 달리 첫 로딩이 짧은 편이다.

Wireframe

디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다. 그리고 목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다.

참조블로그:https://velog.io/@gwanuuoo/SPA%EB%8A%94-%EA%B8%B0%EC%A1%B4-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%99%80-%EC%B0%A8%EC%9D%B4

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 합니다.

컴포넌트 렌더링

이전까지는 DOM 태그만을 사용해 React 엘리먼트를 나타냈습니다.

다음은 페이지에 “Hello, Sara”를 렌더링하는 예시입니다.


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

이 예시에서는 다음과 같은 일들이 일어납니다.

  1. 엘리먼트로 root.render()를 호출합니다.
  2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
  3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
  4. React DOM은

    Hello, Sara

    엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

props

// APP.js파일

function App() {
  const expenses = [
    {
      id: "e1",
      title: "car Insurance",
      amount: 294.67,
      date: new Date(2022, 10, 28),
    },
    {
      id: "e2",
      title: "car Insurance",
      amount: 310,
      date: new Date(2022, 3, 28),
    },
    {
      id: "e3",
      title: "car Insurance",
      amount: 350,
      date: new Date(2022, 4, 28),
    },
    {
      id: "e4",
      title: "car Insurance",
      amount: 450,
      date: new Date(2022, 5, 28),
    },
  ];

  return (
    <div>
      <h2>Let's get Started!</h2>
      <p>This is also visible!</p>
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[1].title}
        amount={expenses[1].amount}
        date={expenses[1].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[2].title}
        amount={expenses[2].amount}
        date={expenses[2].date}
      ></ExpenseItem>
      <ExpenseItem
        title={expenses[3].title}
        amount={expenses[3].amount}
        date={expenses[3].date}
      ></ExpenseItem>
    </div>
  );
}



ExpenseItem파일 !

function ExpenseItem(props) {
  const expenseDate = new Date(2022, 10, 28);
  const expenseTitle = "car insurance";
  const expenseAmount = 294.67;

  return (
    <div className="expense-item">
      <div>{props.date.toLocaleString()}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">{props.amount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

OR

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미합니다. React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현됩니다.

예를 들어 Welcome을 여러 번 렌더링하는 App 컴포넌트를 만들 수 있습니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

코드펜에서 실험해보기.

컴포넌트 추출

function Comment(props) {
return (
  <div className="Comment">
    <div className="UserInfo">
      <img className="Avatar"
        src={props.author.avatarUrl}
        alt={props.author.name}
      />
      <div className="UserInfo-name">
        {props.author.name}
      </div>
    </div>
    <div className="Comment-text">
      {props.text}
    </div>
    <div className="Comment-date">
      {formatDate(props.date)}
    </div>
  </div>
);
}


import React from "react";

function ExpenseDate(props) {
const month = props.date.toLocaleString("ko-KR", { month: "long" });
const day = props.date.toLocaleString("ko-KR", { day: "2-digit" });
const year = props.date.getFullYear();

return (
  <div>
    <div>{month}</div>
    <div>{year}</div>
    <div>{day}</div>
  </div>
);
}

export default ExpenseDate;



function ExpenseItem(props) {
return (
  <div className="expense-item">
    <div>
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">{props.amount}</div>
      </div>
    </div>
  </div>
);
}

코드펜에서 실험

이 컴포넌트는 author(객체), text(문자열) 및 date(날짜)를 props로 받은 후 소셜 미디어 웹 사이트의 코멘트를 나타냅니다.

이 컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있어서 변경하기 어려울 수 있으며, 각 구성요소를 개별적으로 재사용하기도 힘듭니다. 이 컴포넌트에서 몇 가지 컴포넌트를 추출하겠습니다.

profile
수민
헬창목표
이전 포스트

다음 포스트

리액트 라우터

0개의 댓글