3주차 react 02

mpa (multi page app) html 숫자가 2개 / 각 웹페이지마다 html 파일이 존재할때

spa (single page app) ---> react 

 

 

경로이동

1. 조건x  {/* <Link to ="/signup"> signup으로 이동</Link> */} 내부만가능

2. 조건x  {/* 외부경로이동 */} 내외부가능

3. 조건o 

 

useNavigate 
import { useNavigate } from "react-router-dom";
()=>{
const navigate=useNavigate();
  ---
<button 
    onClick={() => {
        navigate("/main");
    }}> main으로 이동
  </button>
---

cf) navigate 함수 호출할때 useNavigate를 직접 호출하지 않고 변수로 선언하냐면 useNavigate은 Hook이다.

이건 중첩된 함수(조건문 등) 안에서 호출xxx  custom hook을 제외하면 함수컴포넌트에서만 호출가능

 

//? 반환된 함수는 hook이 아니기때문에 컴포넌트 내부에 선언된 함수에서도 호출이 가능합니다//???

 

 

 

BrowserRouter : 경로변경에 대해 여러 편의기능을 제공해주는 컴포넌트 / 페이지가 새고되지않아도 주소변경가능

Routes   : 여러 Route 컴포넌트 감쌈 / 브라우저 주소창에 입력한 url  경로가 딱 맞는 컴포넌트가 있으면 그 컴포넌트를

브라우저에 그리는 역할을 함

Route : 브라우저에 렌더링 할 컴포넌트와 경로 지정 여기에 속성으로 path와 element를 부여

path에 브라우저에 렌더링할 컴포넌트의 경로를 할당하고

element에는 경로에 따라 렌더링 될 컴포넌트 할당

 

 

SASS

 

import Nav from "./components/Nav/Nav";

import Footer from "./components/Footer/Footer"

 

 

 

spa인 react에서는 nesting을 꼭 해줘야 속성의 중복을 막을 수 있고 부모선택자의 반복사용을 줄일 수 있음

.signup{

.title{
    background-color:  brown;
}
.article{
    background-color: orange;
}
}

////??? 이거넣으면 적용안됨///   --->왜냐면 div에다 대문자로 써놓고 여기다간 소문자로 썼으니까..ㅎ

 

color 변수넣기

ex)

 

$textColor: rgb(34, 33, 35);

.title{

    background-color:  brown;

    color: $textColor;

}

.article{

    background-color: orange;

    color: $textColor;

}

}

 

 

hover

  .article{

        background-color: orange;

        &:hover{

            width: 200px;

            background-color: blue;

    }

    }

 

자식태그 어쩌고

    return(

        <div className="Signup">

            <h1 className="title"> Signup</h1>

            <h2 className="article">Signup Nesting</h2>

            <h3 className="article_children">Signup Children</h3>

        </div>

    ) ;

 

 

  .article{

        background-color: orange;

        &:hover{

            width: 200px;

            background-color: blue;

        }

        &_children{

            background-color: powderblue;

        }

    }

 

 

display 넣기

 

@mixin flex {

    display: flex;

    justify-content: center;

    align-items: center;

}

 

.Signup{

    @include flex;

.

.

.

}

 

의 변수화

 

styles 폴더에 하나 만들기

<현재상태>

 

요기 mixin.scss에다가 싹다 집어넣기

적용은 

이렇게

--유지보수 쉽다

++) 변수가 많은데 선택해서 넣고싶을때

 

1)한개만 default값

2)싹다 바꾸고 하나만 default 값

3. 맨 앞 하나만 default 값

 

routing 하는 방법

link 컴포넌트 - 조건xx

useNavigate hook - 함수라 조건붙이기가능

 

css 전처리기 - css로 변환