SEB FE 44기 2023-03-24

신혜인·2023년 3월 25일
부트캠프 블로깅
0

부트캠프 블로깅

목록 보기
1/2

React SPA

웹 사이트가 보다 복잡해지고 애플리케이션의 형태, 사용자와 서비스 사이에 더욱 많은 상호작용.

Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생.

사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성, 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었다.

1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 팔요한 데이터만 서버에서 전달받아 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발.

2000년대 중반부터 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화.

이것이 싱글 페이지 애플리케이션, SPA.

SPA(Single Page Application)는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트.

SPA의 장점

  • 애플리케이션과 사용자 사이에 수시로 상호작용이 발생, 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트, 사용자의 행동에 빠르게 반응.

  • 서버 입장에서는 요청받은 데이터만 넘겨, 과거와 같은 과부하 문제도 현저히 줄일 수 있다.

  • 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공.

SPA의 단점

  • 첫 화면 로딩 시, 읽어들인 HTML 파일은 거의 비어있다.

    대부분의 코드는 JavaScript 파일 안.

    자연스럽게 JavaScript 파일이 무거워진다.

    JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다.

  • 검색 엔진 최적화가 좋지 않다.

    검색엔진 최적화란 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것.

    검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론, HTML 문서 내의 각종 태그나 링크 등을 분석.

    HTML이 거의 비어있다.

    검색 로봇이 충분한 자료를 수집하지 못한다.

    검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련.

    앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리, 개발의 복잡도가 더욱 늘어난다.

Wireframe

디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것.

목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것.

더 고차원의 React 개발자, 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계.

React Router

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

React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 많이 사용.

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes와 Route, 그리고 경로를 변경하는 역할을 하는 Link.

npm install react-router-dom@^6.3.0
# 이번 스프린트에서는 6.3.0 버전을 사용합니다
import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; // 이 구문을 넣어주세요
function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;

React State & Props

Props

컴포넌트의 속성(property).

성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값.

웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당.

부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값.

React 컴포넌트는 JavaScript 함수와 클래스, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환.

컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용.

객체 형태.

어떤 타입의 값도 넣어 전달할 수 있도록 객체의 형태.

읽기 전용.

성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값.

함부로 변경될 수 없는 읽기 전용(read-only) 객체.

How to use props

  1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의.
  2. props를 이용하여 정의된 값과 속성을 전달.
  3. 전달받은 props를 렌더링.
function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};

function Child() {
  return (
    <div className="child"></div>
  );
};
<Child attribute={value} />
<Child text={"I'm the eldest child"} />
function Child(props) {
  return (
    <div className="child"></div>
  );
};
function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

props.children

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

State

컴포넌트 내에서 변할 수 있는 값.

상태.

State hook, useState

import { useState } from "react";
function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
}
function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번

  //...

  // 2번 코드와 같습니다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

이벤트 처리

DOM의 이벤트 처리 방식과 유사.

  • React에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용.
  • JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달.
<button onclick="handleEvent()">Event</button>
<button onClick={handleEvent}>Event</button>

onChange

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

onClick

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

React 데이터 흐름

데이터를 전달하는 주체는 부모 컴포넌트.

데이터 흐름이 하향식(top-down).

단방향 데이터 흐름(one-way data flow).

  • 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
  • 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
  • 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치.

React에서 데이터를 다룰 때는 컴포넌트들 간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치를 설정.

느낀점

useState는 유용한 함수인 것 같다. useState로 웹 사이트에서 발생하는 많은 상호 작용들을 만들 수 있다. useState 사용 방법이 아직 익숙하지 않아서 과제를 풀어야겠다. 리액트에서는 상태 관리 함수를 따로 제공해 쉽게 사용하고 편하게 관리할 수 있도록 만들었다. 개발자한테 아주 유용한 함수인 것 같다. 과제를 풀고 useState 사용 방법을 익히고 싶다. Props는 아직 모르겠다. 언제, 어떻게 사용하는지 자세히 알고 싶다. 이번에 리액트를 배우면서 리액트는 좋은 라이브러리 같다고 느꼈다. 리액트에서는 페이지 단위가 아닌, 컴포넌트 단위로 나뉘어서 보기에도 편하고 접근하기도 쉽다. 나중에 개발자가 되서 리액트를 잘 사용하려면 잘 공부해야겠다.

profile
신혜인
다음 포스트

SEB FE 44기 2023-03-29

0개의 댓글