🚀 학습 목표
- SPA가 무엇인지 설명할 수 있다
- 페이지가 한 개인 어플리케이션이다
- 리액트는 Single Page Application
- 각각의 페이지가 존재하지 않는다
- 실제로 보여지는 파일은 index.html 하나이며
- 이 파일 하나에서 index.js -> dom render
- import 한 모든 파일이 모여있는 것
- 깨지는 걸 방지 (다른 스타일에 영향을 주지 않도록) -> scss
- 한 개의 웹피이지(HTML)안에서 여러 개의 페이지를 보여주는 방법이 라우팅이다
- react-router-dom를 이용해 Routes Component를 구현할 수 있다.
- index.js ->메인 로그인 바꾸면서 확인했지만
- 경로에 따라서/루트에 따라서 화면을 다르게 보여지게
- react-router-dom을 통해서
- react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.
- 화면을 전환해주는것 = 라우팅
- 직접 주소를 입력할 수도 있고
- 로직(엔터/클릭 등)을 통해서
- Link Component 와 a tag 의 차이점에 대해 설명할 수 있다.
- 링크 = a태그 처럼 사용하는 것 -> 누르면 이동시키는것/ 조건없이 / a태그랑은 다른 방법으로 사용 (link=프로젝트 내부에서 변경 <>a는 내부페이지가 아닌 다른 외부 페이지로 이동)
- usenavigate -> 자바스크립트 코드이기에 로직 사용 가능 -> valid- >이동시키는 것과 같이 코드 작성 가능
- css 전처리기의 역할에 대해 설명할 수 있다.
- CSS 파일이 깨지는 것을 방지
- sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.
- 확장자 변경
- 네스팅 등 사용하여 변경하기
공통점 : 라이브러리가 NPM 으로 다운받는다
MPA(Multi Page Application) <> SPA
react -> SPA index.html 하나에다가 만듦
id가 루트인 디브 안에다 app.js가 화면에 보이도록 하는
연결했을 때 css가 깨지는 이유 -> SPA 때문
css 파일은 html 파일 하나에 다 들어가고 난 후 적용이 되기 때문에
많이 깨진 이유 -> 공통된 태그가 많으면 서로 다른 CSS 파일이 적용되면서 깨짐
classname 유니크하게 지으면 서로 간섭을 잘 안하기 때문에 안깨짐
특정 경로를 이동하면서 원하는 페이지로 이동
리액트 = 단순히 UI만 그리는 라이브러리 -> 원하는 패키지를 다운받아서 사용
URL에 따라서 원하는 페이지를 보여주는 것 = 라우팅 기능
라우터 = 라이브러리
라우팅
- 경로에 따라서 다른 페이지 보여주는 것
- 리액트 자체에는 이런한 기능이 내장되어 있지 않다
- 리액트는 프레임워크가 아닌 라이브러리다
import {BrowserRouter, Routes, Route} from 'react-router-dom'
다운받은 패키지에서 만들어놓은 브라우저라우터/라우츠/라우트 를 가져와서 쓰는 것
앞에 경로 ./ 있으면 절대경로
없으면 노드모듈스 하위로 자동 인식됨
각각의 컴포넌트 기능이 있음
브라우저라우터 -> 내부를 감싸고 화면에 보여주겠다
라우츠 -> 안에 있는 것들의 라우트의 경로들에 따라서 이동시키겠다
라우트 (경로) -> 각각의 경로 + 어떤 컴포넌트를 보여줄것인지
브라우저 라우터 안 네브/푸터 -> 항상 존재
package json -> 프로젝트 요약본이라고 생각하면 됨
프로젝트명 / 실제로 사용하는 라이브러리들
실제로 빌드도 가능
npm install react-router-dom --save
복사 붙여넣기 -> 오타내는 실수를 줄여보자
npm을 통해서 다운받겠다 -> 리액트라우터돔 -> 새로운 패키지를 다운받아 요약본에 추가가 됨(간혹 자동으로 추가 안되는 경우가 있음 -> 세이브)
소스폴더 하위 -> 새파일 -> Router.js ->복사 붙여넣기
지금 작업한 푸터 /네브도 없음 -> 지워도됨
작성 후 -> index.js에서 수정해야 함
importouter from .Router
ReactDOM.render()
->연결이 잘 되었는지 확인해보자
18버전
ReactDOM.createDOM(document.getElementById("root").render();
버튼 / 로그인 성공했을 시 이동하게 하는법
1. Link 컴포넌트로 구형
- 링크 컴포넌트 임포트 -> 에이태그처럼 사용하면됨
- ~ 경로로 이동시켜라
- 실제로 a태그로 변환됨
- 클릭 시 바로 이동하는 로직 구현 시에 사용한다
- a태그와의 차이점 -> a는 외부사이트로 이동하는 경우
- Link : 프로젝트 내부에서의 경로로 이동
로그인 -> 임포트 링크 from react router om
link to="/ 경로
- useNavigate 훅을 사용하기
- 자바스크립트 로직 적용 가능
- 조건을 줄 수 있음
- 컴포넌트가 아님
- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용한다
default export -> 그 파일을 대표해서 export -> 그냥 가져올 수 있음
name export -> 디폴트가 아니면 -> 중괄호로 가져오면 됨
sass -> 라이브러리 다운받으면 됨
Syntactically Awesome STyle Sheets
깨지거나 반복되는 부분
ex) display: flex justify 등 묶어서 변수처럼 사용 가능
Nesting 기능
구조화해서 묶어줄 수 있음
마우스 올리면 적용대상 확인 가능
앞에 큰 묶음에 대한 명시를 네스팅을 통해서 간결화 가능
SASS 다운받은 후 -> css -> 확장자를 scss로 바꿔주면 됨
원하던 문법 사용 가능
네스팅을 통해서 서로 간섭하여 깨졌던 css 파일에 대한 깨짐 방지 가능
일반적으로 컴포넌트명은 고유하다 -> 클래스네임을 컴포넌트명과 똑같이 써주면 고유한 클래스명 가능하다
->scss 파일 전체를 해당 컴포넌트 최상위 클래스네임으로 감싸주면 해당 내용에만 스타일이 적용 된다 -> 다른데 간섭 안함
라우터 -> 싸스 적용 (네스팅하기!!) -> 다른 스타일에 영향을 미치지 않도록
css 변환되기 이전의 문법이라 전처리기라고 칭한다
변수화해서 사용도 가능 / 묶어서도 가능
for문도 사용가능
Reset.css / common.css
기본적으로 브라우저에 적용되는 스타일 -> user agent stylesheet
디폴트로 적용되고 있는 속성들
-> 어떤 브라우저에서든 적용 가능하도록 reset.css 적용
-> reset scss 파일 만들고 붙여넣기
-> common.scss -> 리셋 이후에 전반적으로 적용할 스타일 적기
인덱스에서 두 파일 모두 임포트 해줘서 엮으면 됨
index.js -> entery 포인트이기에 여기다 적용시키면 됨
실제 자바스크립트가 돌아가는 부분
화면이 그려지기 시작하기 때문에 -> 이 안에서 스타일을 기본적으로 적용시키기 시작할 것
위에서 쓰는 순서대로 실행되기 때문에 -> reset -> common 적용하기
라우터 -> 라우팅 기능만 갖고 있으면 됨
