💡 진행하면서 느꼈던 점

리액트를 빼놓고 프론트엔드를 말할 수 없다!는 식의, 리액트에 대한 중요성을 말하는 글이나 인터넷 강의들을 종종 보아왔지만, 독학할 당시에는 Javascript에 대한 개념이 부족한 상태에서 발을 넓히면 이도저도 아니게 될 것 같아 감히(!) 리액트를 배울 엄두가 나지 않아 리액트 학습을 미뤄왔었다. 아직 Javascript를 완전히 자유자재로 다룰 수 있는 것은 아니지만, 부트캠프 진행상 강제적으로 이번 유닛에 리액트를 배우게 되어서 너무 좋았다. 배우기 전에는 왠지 굉장히 복잡할 것 같았는데 막상 발을 담가 보니까 HTML과 JS를 섞어놓은 거라, 이럴 줄 알았으면 진작 좀 배울걸.. 하는 생각이 들었다.

React에 대한 기본적인 문법까지는 따라가는 데 무리가 없었지만, 막상 과제 조건에 따라 코드를 작성하려니까 익숙하지 않아서 그런지 배운 개념들을 계속 다시 꺼내보게 되었다. 이는 개념들이 머릿속에 완전히 축적되지 않았다는 것인데, 꾸준히 복습하고 리액트를 자주 다루면서 익숙해져서 기계적으로 나올 정도까지 연습해야겠다.

🚩 새롭게 알게 된 것

Intro

React의 3가지 특징

1. 선언형

• HTML, CSS, Javascript로 나눠서 적기보다 한 파일에 명시적으로 작성하게끔 JSX 문법을 활용한 선언형 프로그래밍이다. (JSX는 HTML과 JS가 결합한 문법)

• 코드를 자세히 보지 않고도 코드의 의미를 알 수 있어 명시적이고 직관적이다.

2. 컴포넌트 기반

• 컴포넌트: 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋. UI를 구성하는 필수 요소.

• 하나의 기능 구현을 위해 여러 종류의 코드로 묶어둔 컴포넌트를 기반으로 개발한다.

• 각 컴포넌트는 독립적인 기능을 가지며 UI의 한 부분을 담당하는 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.

• 컴포넌트 간 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있고, 유지 보수와 유닛 테스트를 하기에도 편하다.

3. 범용성

• React는 Javascript 프로젝트 어디에든 유연하게 적용이 가능하다. (React는 Javascript 라이브러리)

• 기존에 다른 Javascript 프레임워크로 제작된 웹 어플리케이션에 React를 추가해서 개발할 수 있다.
  
  

JSX

Javascript XML

JSX는 HTML이 아니고, 문자열도 아니다. React에서 UI를 구성할 때 사용하는 문법으로, Javascript를 확장한 문법이라고 할 수 있다.

하지만 브라우저가 이해할 수 있는 Javascript 코드와는 다르게, 브라우저가 JSX를 바로 실행할 수가 없기 때문에 JSX를 Javascript 코드로 컴파일해주는 Babel을 이용한다. Babel이 JSX를 컴파일 후 브라우저가 컴파일된 Javascript를 읽고 화면에 렌더링하게 되는 것!

JSX → Babel → JS → Browser

한편 React는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. 이는 JSX를 사용하면 Javascript만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 되기 때문이다. 여기서 주의할 점은 JSX는 HTML이 아니기 때문에 Babel을 이용한 컴파일 과정이 필요하다는 것이다.

JSX 없이도 React 요소를 만들 수는 있지만, 코드가 복잡해지고 가독성이 떨어지는 단점이 있다.

JSX 활용

• JSX에서 여러 엘리먼트를 작성하고자 하는 경우 최상위에서 opening tag와closing tag로 감싸줘야 한다.

• React에서 CSS class 속성을 지정하려면 className으로 표기한다.
  class로 작성하면 React는 이를 HTML 클래스 속성이 아닌 Javascript 클래스로 받아들인다.

• Javascript 표현식 사용 시 중괄호{}를 이용한다.
  중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

• React 엘리먼트가 JSX로 작성되면 대문자로 시작한다. 이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부른다.
  소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식한다.

• 조건부 렌더링은 if문이 아닌 삼항 연산자를 사용한다.

• React에서 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용한다. map() 함수를 사용할 때는 반드시 key JSX 속성을 넣어야 한다.

  • 컴포넌트의 최상위 엘리먼트에 key 속성을 작성한다.

  • key 속성값은 변하지 않고, 예상 가능하며, 유일해야 하므로 가능하면 데이터에서 제공하는 id를 할당한다.

  • 고유한 id가 없는 경우에만 배열 인덱스를 넣어서 해결하지만, 이는 최후의 수단으로만 사용한다.

• Component

  • 모든 React 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있다.

  • 모든 컴포넌트 위에는 항상 root 역할을 하는 최상위 컴포넌트가 존재한다.

  • 최상위 컴포넌트는 다른 자식 컴포넌트를 가질 수 있고, 이 계층적 구조를 트리 구조로 형상화할 수 있다.

  • 웹 애플리케이션에서 각 기능별로 하나의 컴포넌트 작성이 권장된다.

    기능별로 컴포넌트를 작성하면 컴포넌트 간 의존성이 낮아지고 독립적으로 작동하기 때문에, 기능 변경 시 다른 컴포넌트를 수정할 필요가 없게 되기 때문이다.

  • React 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있다.
    
    

Create React App

Create React App은 리액트 SPA(Single-Page-Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. 애플리케이션을 개발하고 배포하기 위해서는 다양한 프론트엔드 개발 툴들이 사용되는데, React에서 Create React App이라는 툴 체인을 만들어 복잡한 개발 세팅을 미리 해준다.

npx create-react-app 원하는 프로젝트 이름
npm run start

React SPA

웹페이지에서 페이지를 로딩할 때, 서버에 미리 준비되어 있는 페이지를 전달 받아와서 렌더링한다. 하지만 사용자와의 상호작용이 많아지고 규모가 커질수록 속도 저하 등의 문제가 발생했고, React에서는 이러한 전통적인 웹사이트의 문제를 해결하기 위해 SPA를 사용하고 있다. 전통적인 웹사이트는 매번 HTML 파일로 된 페이지 전체를 로딩하지만, SPA는 Menu나 Footer와 같이 페이지 전환 전후 중복되는 부분은 새로 불러오지 않고 업데이트가 필요한 부분만 새로 불러온다. 다시 말해, SPA는 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아, 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 것이다. 대표적인 서비스로는 Youtube, facebook, Gmail, airbnb, Netflix 등이 있다.

SPA의 장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아 화면을 업데이트하면 되기 때문에, 사용자와의 상호작용에 빠르게 반응한다.

• 서버 입장에서는 요청 받은 데이터만 넘겨주면 되기 때문에 과부하 문제를 줄일 수 있다.

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

SPA의 단점

• 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 Javascript 파일을 다시 받아오는 과정을 거친다. 이 때 첫 화면 로딩 시 읽어들인 HTML이 거의 비어 있고, 대부분의 코드가 Javascript 파일 안에 있다보니 Javascript 파일의 크기가 커지고 무거워진다.

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

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

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

  • 검색 엔진의 작동 방식: 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결괏값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동한다.

  • 검색 로봇은 자료를 수집할 때 웹 페이지의 URL, HTML 문서 내의 각종 태그나 링크 등을 분석한다. SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.

  • 다만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어 점차 이 단점은 사라지는 추세이다.

React Router

React SPA에서는 경로에 따라 다른 뷰를 보여줄 수 있다.

SPA는 하나의 페이지를 가지고 있지만, 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 트위터는 메인 트윗 모음 페이지, 알림 페이지 등 화면에 따라 주소가 달라진다. 다른 주소에 따라 다른 view를 보여주는 과정을 "경로에 따라 변경한다"라는 의미로 라우팅(Routing)이라고 하는데, React에서는 라우팅하기 위해 React Router라는 라이브러리를 사용한다.

애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 유기적으로 주고받을 수 있게 설계해야 하는데, React Router를 통해 컴포넌트를 활용할 수 있다.

React Router 주요 컴포넌트

• 사용 환경 세팅

// React App 설치
npx create-react-app 폴더이름

// react-router 라이브러리 설치
npm install react-router-dom@버전

• 컴포넌트들을 사용하기 위해서는 명령어를 통해 React Router 라이브러리에서 따로 불러와야 한다. Import는 필요한 모듈을 불러오는데, 비구조화 할당과 비슷하게 이용할 수 있다.

import (BrowserRouter, Routes, Route, Link) from "react-router-dom";

• BrowserRouter

  • React Router DOM이 사용되는 부분의 최상위 컴포넌트에 위치해야 한다.

  • 웹 애플리케이션에서 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.

  • ReactDOM의 렌더 단계인 index.js 파일에 넣어서 활용하는 것도 가능하다.

• Routes, Route

  • <Routes> 컴포넌트는 여러 <Route>를 감싸 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 한다.

  • <Routes>를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

  • <Route> 컴포넌트는 path 속성을 지정해서 해당 path에서 어떤 컴포넌트를 보여줄 것인지 정한다.

  • 경로는 path로, 컴포넌트는 element로 연결한다.

  • <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동된다.

  • path="*" : 지정되지 않은 주소로 접근할 시에는 이 속성이 설정되어 있는 컴포넌트를 보여주게 된다.

• Link

  • 페이지 전환을 통해 페이지를 새로 불러오지 않고, 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해준다.

  • <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 처음부터 렌더링을 하기 때문에 새로고침 현상이 일어나지만, <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있어 SPA를 구현할 수 있다.

  • <Link> 컴포넌트를 클릭할 때 to 속성을 활용하여 <Route> 컴포넌트에 설정해준 path 주소와 일치하는 페이지로 이동할 수 있게 해준다.

• useNavigate

  • 함수 호출을 통해 특정 조건에 따라(특정 행동을 했을 때) 해당 주소로 페이지를 이동할 수 있다.