React
코드만 보고 application을 떠올릴 수 있게끔 하는 명시적인 React
React의 특징
-
선언형 (declarative)
React는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기보다는
하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향
-
컴포넌트 기반 (component-based)
React는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고(컴포넌트 간 의존성이 줄어듦) 재사용 가능하기 때문에, 각 기능 자체에 집중하여 개발 가능
-
범용성 (learn once, write anywhere)
React는 javascript 프로젝트 어디에든 유연하게 적용
Facebook에서 관리되어 안정적이고 (버그 적음), 가장 유명하며, 리엑트 네이티브로 모바일 개발도 가능
JSX 특징
- JavaScript 기본 문법을 활용할 수 있다. JavaScript 기본 문법을 활용하려면, JSX 내부에서 중괄호({}) 내에 JavaScript 표현식을 작성하면 된다.
- JSX는 Babel을 통해 JavaScript로 변환된다.
JSX 규칙
- React에서 CSS class 속성을 지정하려면 "className" 으로 표기
- JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호 이용. 중괄호를 사용하지 않으면 일반 텍스트로 인식
- React 엘리먼트가 JSX로 작성되면, 사용자 정의 컴포넌트 (PascalCase)는 "대문자"로 시작. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식
- 조건부 렌더링은 if문이 아닌 삼항연산자를 이용
- 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수 사용.
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.
"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고 표시됨.
Create React App 이란?
리액트 SPA(Single Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
React SPA
SPA의 장단점
- 장점
과거 90년대까지만 해도 페이지 전체 HTML파일을 계속 렌더링해야 했는데, 현재는 하나의 페이지 내 필요한 부분들만 부분적으로 업데이트하기 때문에 빠르다.
인스타그램, 유튜브, 페이스북, 구글 등 대부분 웹사이트가 SPA 사용
- 단점
- JavaScript 파일의 크기가 크다
→ 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script tag안에 있는 JavaScript 파일을 다시 받아오는 과정을 거치는데, 이때 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일안에 들어있다보니 자연스럽게 JavaScript 파일이 무거워짐. 무거운 JavaScript파일 기다려야 해서 첫 화면 로딩시간 길어짐
- 검색 엔진 최적화(SEO)가 좋지 않다
→ 검색 엔진 작동 방식: 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던 인덱스에서 검색어와 가장 연관성이 높은 웹 페이지들을 순서대로 보여줌. 검색 로봇은 자료를 수집할 때에 웹 페이지 URL, HTML안의 tag, link 등을 분석하는데, SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료 수집 X / 그래서, 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하고, 더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야 하기 때문에 개발의 복잡도가 더욱 늘어남
Wireframe
Wireframe은 디자인 들어가기 전 단계. 선(wire)을 이용해 윤곽선(frame)을 잡음.
Mockup은 그 다음 단계 (데모, 시연, 평가를 위한 최소한의 기능만)
React Router
React Router는 "라이브러리"이다.
Routing
Twittler 와 같은 SPA 를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 있으면 화면들마다 "주소"가 달라진다.
다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)
But ! React 자체에는 이 기능 X. 개발자가 직접 주소마다 다른 뷰를 보여줘야 함
So ! React SPA에서는 라우팅을 위해 React Router 라이브러리 사용
React Router의 주요 component:
- 라우터(router) 역할을 하는 BrowserRouter
- 경로를 매칭해주는(route matchers) Switch 와 Route
- 경로를 변경하는(route changers) Link
이 컴포넌트들을 사용하기 위해서 React Router 라이브러리에서 따로 불러오는 명령어:
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
▶️ 각 파일들 내에 다른 곳에 있는 파일을 변수로 불러와서 그 파일 속 내용을 갖다 쓰고 싶을 때,
맨 위에 : ' import 뭐 from 어디 ' 명시해줘야 한다 !
🔻🔻🔻
<BrowserRouter>▶️ BrowserRouter는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침 하지 않고도 주소를 변경할 수 있는 역할. BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다.
<Switch>▶️ 여러 Route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할. Switch를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
<Route path = "주소"> ▶️ Route 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다. Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
<Link> ▶️ 경로를 연결해주는 역할을 하는 컴포넌트. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해줌.
