17일차

lang·2021년 3월 3일
0

Foundation

목록 보기
2/6

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 이동하기

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 {
    }
  }

0개의 댓글