[ React 04 ] 라우트, Link, Switch, history ,URL 파라미터, styled-components, SASS

이전 작성 글

2021.07.03 - [분류 전체보기] - [ React 01 ] React 설치 및 시작 , JSX 문법 , State

2021.07.04 - [분류 전체보기] - [ React 02 ] React Component 문법, 반복문 - Map, for, Props, input을 받아서 데이터처리, 옛날에 react 사용법

2021.07.05 - [분류 전체보기] - [ React 03 ] 부트스트랩 & React 쓰기, import / export 문법, Component 화 , 반복문 map

---

1. 라우트 초기 셋팅 법

1. 터미널에 npm install react-router-dom 설치

 

2. index.js 에 Router를 import 해주기 - APP에 Router 태그를 넣어주기 

: BrowserRouter  말고도 HashRouter 도 존재함

두개의 차이점은, HashRouter 은 도메인에 #이 추가되고, Browser은  #이 없다.

HashRouter 이 라우팅을 안전하게 할수있게 도와줌. 왜냐하면, # 뒤에 적는것은 서버로 전달되지 않기 때문임.

BrowserRouter는 서버로 전달 될 수 있음. 서버에서 서버 라우팅 방지하는 API를 작성해 둬야함

import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
     <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

 

3. 메인페이지에 route를 import 하기. 경로를 각각 지정해주기 

: 매칭되는 것은 다 보여주기 때문에, 상세페이지 같은 경우는 메인 + 상세 다 보여지게 된다. 

그것을 해결하기 위해서는 <Route exact path="/"> 로 적어준다.

import { Link, Route, Switch } from 'react-router-dom'

<Route path="/">
  <div>메인페이지에요</div>  // 메인페이지에 해당하는 HTML 더 추가
</Route>
<Route path='/detail'>
  <div>디테일페이지에요</div>  // 상세페이지에 해당하는 HTML 더 추가
</Route>

 

* 혹은 간단하게 , Route 해주고 component 걸어주기

 <Route path="/some" component={Modal}> </Route>

 

* React Router 의 특징

: HTML 내부의 내용을 갈아치워서 다른페이지 처럼 보여주는 것. 다른 HTML 은 아님

 

 

2. Link, Switch, history 기능 

1. Link 

: 버튼 등을 누르면 원하는 위치로 가게 끔 하는 코드

import { Link, Route, Switch } from 'react-router-dom'

<Nav.Link ><Link to ='/'>Home</Link></Nav.Link>
<Nav.Link><Link to ='/detail'> Detail </Link></Nav.Link>

혹은 위에 같음 경우 a 태그 중복 경고가 뜰수 있으므로, 아래처럼 작성도 가능하다.

<Nav.Link as ={Link} to ='/'>Home</Nav.Link>
<Nav.Link as ={Link}  to ='/detail'> Detail</Nav.Link>

 

2. history

a. useHistory 라는 훅 import

b. useHistory() 훅 사용

  : history.push('/abc') : 특정 경로로 이동시켜주기

import { useHistory } from 'react-router-dom';

function Detail(){

    let history = useHistory();
    return(
    
    <button className="btn btn-danger" onClick={() =>{
            history.goBack();
          }}>뒤로가기</button> 
          )

 

3. Switch

- 링크가 아무거나 일때 모두 보여주는 코드

 </Route>
      <Route path='/:id'>
          <div>아무거나 적을때 이것도 보여주기</div>
 </Route>

- 특정한 한개만 보여주게 되는 코드.  겹치지 않게 된다.

<Switch>
...
</Switch>

 

3. URL 파라미터로 상세페이지 만들기

: 중요한 데이터는 상위 컴포넌트에 넣는 것이 좋다.

1. Route 의 경로 지정

: 콜론 뒤에 맘대로 작명, 여러개 사용 가능

<Route path='/detail/:id'>

2. useParams 훅을 사용

import { useHistory, useParams } from 'react-router-dom';

function Detail(props){

    let { id } = useParams();
    ..
          <h4 className="pt-5">{props.shoes[:id자리에 있던숫자].title}</h4>
          <p>{props.shoes[:id자리에 있던숫자].content}</p>
          <p>{props.shoes[:id자리에 있던숫자].price}원</p>

 

3. 자료의 순서가 변경될 때에도, 상세페이지 잘 보이도록 하는 문제

: 새로운 변수를 만들어서 넣어줌 

    let 찾은상품 = props.shoes.find(function(상품){
        return 상품.id == id
    })
    // 혹은 let 찾은상품 = = props.shoes.find(x => x.id == id) ;
    
    let history = useHistory();
    return(
      <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src={"https://codingapple1.github.io/shop/shoes" + (찾은상품.id + 1) + ".jpg"} width="100%" />
        </div>
        <div className="col-md-6 mt-4">
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>

 

4. styling1.  styled-components

1. css의 단점

a. class 만들어놓은걸 까먹고 중복해서 또 만들게 된다.

b. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용이 된다.

c. CSS 파일이 너무 길어져서 수정이 어렵다.

 

-> 컴포넌트 제작할 때 스타일을 바로 입혀서 컴포넌트를 만들 수 있다.

 

2.  styled-components 설치

a. 터미널에 설치하기

(base) leehjung01:shop hwajeong$ npm install styled-component

 

b. import 하기

import styled from 'styled-component'

 

3. 컴포넌트에 직접 스타일 넣어서 스타일링 하기

: 변수를 선언해주고, 그걸 컴포넌트 처럼 사용해주기

 

let 박스 = styled.div`
    padding : 20px;
    `;
let 제목 = styled.h4`
    font-size : 25px;
    color : ${ props => props.색상 }
    `;
    
    
    return(
      <div className="container">
          <박스>
            <제목 색상 ={'blue'}>  // 혹은 <제목 색상 ='blue'>
              Detail
            </제목>
        </박스>

 

5. styling2. SASS

1. SASS 설치

(base) leehjung01:shop hwajeong$ npm install node-sass

 

2. SASS 란,

: CSS를 프로그래밍 언어스럽게 작성할 수있는 언어. SASS에는 변수, 함수, 반복문, 연산자등이 가능하다.

그로인해, CSS를 짧게 작성가능하다. node-sass를 설치하면, SASS를 알아서 CSS로 컴파일 해준다.

 

3. SASS

a. 새로운 'Detail.scss'라는 scss파일을 만들어주기. 

b. 사용하고자 하는 곳에 import 해주기

import './Detail.scss'

c. scss파일에 원하는 sass문법을 작성

 

 

4. SASS 변수명에 저장

$메인칼라 : #ff0000;

.red{
    color : $메인칼라;
}

 

5. 다른곳에 저장한 css 불러오기

@import './reset.scss'

 

6. 셀렉터 대신 nesting 문법

// 기존 css
div.conainer h4{
    color : blue;
}

div.conainer p{
    color : green;
}

// sass 문법
div.container {
    h4{
        color : blue;
    }
    p{
        color : green;
    }
}

 

7. @extend 문법 

: css를 만들었는데, 한개의 부분만 변경하고 싶을 때 , extend를 넣고 변경하고 싶은 부분만 넣기

.my-alert{
    background: #eeeeee;
    padding : 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100% ;
    margin: auto;
}

.my-alert2{
    @extend .my-alert;
    background: #ffe591;
}

 

8. @mixin / @include

: mixin 은 함수선언하는 부분이라고 생각하면 됨. 그 함수를 사용하고 싶다면, include를 사용하면 됨 

@mixin 함수(){
    background: #eeeeee;
    padding : 20px;
    border-radius: 5px;
    max-width: 500px;
    width: 100% ;
    margin: auto;
}

.my-alert{
    @include 함수()
}

 

---

: 코딩애플 강의를 공부하고 정리한 내용입니다.