TIL) React, SPA, React Router

React 기초

학습목표
1. React 3가지 특징
2. JSX는 왜 명시적인가?
3. React 컴포넌트의 필요성


React란?
- 프론트 엔드 개발을 위한 오픈소스 툴
- 리액트 3가지 특징
1) 선언형 - 하나의 파일에 HTML/CSS/JS를 함께 작성하게 만듬
2) 컴포넌트 기반 - 하나의 기능을 위해 여러 종류의 코드를 묶어놓아 독립성/재사용성이 좋음
3) 범용성 - 기 작성한 컴포넌트를 기반으로 다른 프로젝트에 붙여서 사용 가능

JSX란?
- Javascript XML
- React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법이다.

- React는 JSX를 사용해 분리되었던 html의 마크업과 javascript의 로직을 component란 유닛을 통합하여 한 번에 사용하게 만듬
- JSX => (Babel)에서 JS로 해석 => Browser에서 읽기

JSX 규칙

- 엘리먼트에 클래스 부여 시 className으로 표시
- JSX에서 JavaScript 문법 사용하려면 꼭 {}로 묶어줘야 함

- React 엘리먼트를 새로 작성해 주려면 대문자로 시작

- 조건문은 if문이 아닌 삼항연산자( ? : ) 사용

- 여러개 HTML 엘리먼트 표시할 때(뿌려줄 때는) map 함수 사용

- JSX의 모든 Self-closing tag는 />로 끝나야 한다.

//import 규칙
import Sidebar from './Sidebar'; //react component 연결
import { BrowerRouter as BR} from 'react-router-dom'; //패키지 연결 //as로 선언한 다음 약어로 사용가능

ex1) hello, {name}

ex2) const content = posts.map((post) => 
<div key={post.id}> 
<h3>{post.title}</h3> 
<p>{post.content}</p>)

ex3) (1+1===2) ? ('정답') : ('탈락')

ex4) <Tweet />

 

React 문법
- index.html에서 리액트로 작성한 App 부분을 HTML DOM에 접근하여 적용할 때

ReactDom.render(<App />, document.getElementById('root'));

- classnames 모듈을 통해서 동적으로 className 할당하기

<span className={classnames({'tweet__username--purple': tweet.username =='parkhacker'})}
tweet.username이 parkhacker이면 classname을 tweet__username--purple로 지정 

 

NPX
- 자바스크립트 패키지 관리 모듈인 npm을 좀 더 편하게 사용하게 하도록 npm에 추가된 도구
- 터미널에서 my-app이라는 새로운 react 만들때

npx creat-react-app my-app

---

SPA 

SPA 개념 및 장단점
- 웹페이지에서 화면에 필요한 부분만 로딩시키는 방식으로 작동하는 웹 APP or 사이트
- 필요한 것만 로드하기 때문에 업데이트가 빠름
- 하지만 첫 로딩 때 로드하는 부분이 무거워서 오래걸리고, 검색엔진 최적화(HTML 문서가 비어있기 때문에 각종 태그, 링크를 가져오지 못하므로)에 좋지 않다는 단점이 있음.

Wireframe
- 웹사이트 구현 전 컴포넌트 중심으로 뼈대를 잡아놓는 것

 

---

React Router

React Router 개념
- 리로딩(새로고침)없이 주소에 따라 다른 뷰를 보여주는 과정 = 라우팅
- React SPA에서는 라우팅을 위해 React Router라는 라이브러리 가장 많이 사용

React Router 주요 컴포넌트
- BrowserRouter : 라우터 역할
- Switch, Route : 경로 지정
*Switch : 여러 route를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링
*Route : path 속성 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 결정. link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동.
- Link : 경로 연결해주는 역할.

 

Router 문법
- exact 속성은 정확히 일치할 때만 연결시켜준다.
- 배정안된 페이지에 접속 시 오류 페이지 띄어줄 때는 route 마지막에 오류 페이지 컴포넌트 넣고 패스 설정 비워두면 됨

<Route exact path='/'>Home</Route>
<Route path=''>This page is empty</Route>//오류 페이지

 

React-route-dom V6에서 달라진 점

- Switch -> Routes

- useHistory -> navigate

#5.3 version

<BrowserRouter>
  <Switch>
    <Route exact path="/">
        <Home />
    </Route>
    <Route path="/users">
        <Users />
    </Route>
  </Switch>
</BrowserRouter>


#6 version

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="users/*" element={<Users />} />
  </Routes>
</BrowserRouter>


#5.3 version

history.go(-1)
}}
-> 한 번 뒤로 = history.goBack

history.go(1)
-> 앞으로 이동 = history.goForward

history.replace('/about')
-> about 페이지로 이동

#6 version

navLink(1)
navLink('/about')


activeClassName

참조: https://reactrouter.com/docs/en/v6/upgrading/v5#refactor-custom-routes

---

그 외

단축키
- ctrl + d : 동일한 변수 한꺼번에 선택 및 변경

linux 명령어
- code . 으로 vscode 창 열기

시멘틱 엘리먼트(Semantic element)란?
- 의미요소
- h1 ~ h6, header, footer, section, article, aside, nav 등