Westagram 수정 사항
ul 태그 정렬 관련
14일자에 추가한 내용. display: flex; 를<ul>에 줬는데, flex-wrap: nowrap; 이 디폴트 값이기 때문에 모든<li>요소들이 한 줄에 정리되었던 것. flex-wrap: wrap; 으로 해결
버튼 정렬 관련
버튼이 세로 방향 가운데로 정렬되지 않는 현상에 관련하여, 버튼에position: absolute; right=0;속성을 줬었는데, 버튼을 감싸고 있는<div>태그에 동일 속성을 대신 부여해서 해결
React Router & SASS
신영님 세션
두 개의 삼각형 구조를 기억해야 함.
SPA(Single Page Application)
페이지가 한 개인 애플리케이션
사전 스터디 때 만든 자기소개 페이지, pre-course에서 만든 westagram은 구현하고자 하는 페이지 수만큼 login.html, main.html 등으로 만들었어야 했지만, Routing 을 통해 index.html 한 개의 웹페이지 안에서 여러 개의 페이지를 구현할 수 있다.
Routing
다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것
리액트 자체에는 라우팅 기능이 내장되어 있지 않다.
(*리액트는 UI만을 담당하는 Javascript 라이브러리. third party library를 통해 개발자가 주체적으로 제어할 수 있음 )
(framework는 개발자가 제어의 주체가 될 수 없음 )
React-Router
CRA(Create React App)에 특별히 라우팅을 위한 로직이 내장되어 있지 않기 때문에, 가장 인기 있는 routing solution인
react-router를 추가해서 라우팅한다.
설치
VSCode 터미널에
npm install react-router-dom --save입력
->--save를 통해 package.json 에 버전을 기록할 수 있다
컨벤션
가독성을 위해 컴포넌트에 입력되는 순서대로 import한다.
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
} from 'react-router-dom';
import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/signup" component={Signup}/>
<Route exact path="/main" component={Main} />
</Switch>
</Router>
)
}
}
export default Routes;Router - Switch - Route 순
Login - Signup - Main 순
- exact : 정확한 경로일 때만 속성을 보여줌. 위의 코드에서 exact를 삭제할 경우 Signup 컴포넌트와 Main 컴포넌트를 불러올 수 없다
Route 이동하기
<Link> 컴포넌트 사용
import { Link } from 'react-router-dom';
을 추가한 다음,
```javascript
<Link to="/signup">회원가입</Link>위와 같이 <a>태그처럼 사용한다.
react-router-dom에서 제공하는<Link>컴포넌트는 DOM에서<a>로 변환(Compile) 된다 (JSX - Babel - Javascript)<a>태그와 마찬가지로<Link>태그도 지정한 경로로 바로 이동시켜주는 기능<a>- 외부 사이트로 이동하는 경우
<Link>- 프로젝트 내에서 페이지를 전환하는 경우
withRouterHOC 사용
은 써보고 정리하자.
두 가지 방법의 차이점과 활용법
Link
<Link>컴포넌트는 별다른 조건 없이 클릭 시 바로 이동하는 로직 구현 시에 사용된다.
- ex) 메뉴 바, 아이템 리스트 클릭 시 상세 페이지로 이동
withRouterHOC
withRouterHOC 는 함수로 구현되기 때문에 여러 조건을 넣을 수 있음.
따라서 추가로 처리해야 하는 로직이 있을 때 사용한다.
- ex) id validation - valid한 경우 main 페이지로 이동 / invalid한 경우 signup 페이지로 이동
SASS
.css파일의 확장자를.scss로 수정한다.
전체를 감싸고 있는 최상위 요소의
className명을 컴포넌트 명(Login, Main 등)과 동일하게 부여하여 전체의 부모 요소로 묶는다.
->className명이 겹쳐서 다른 pages에도 영향을 주는 부분들을 처리할 수 있음
상위 요소의 안쪽에서 하위 요소의 스타일 속성을 정의할 수 있다.
nav ul {
}
nav li {
}위와 아래는 같다
nav {
ul {
li {
}
}