wildcard(*), Navigate
props.path로 *(asterisk)를 넘겨주는 경우 모든 url에 대응한다. (Route는 순서대로 동작하므로, 일반적으로 *는 가장 아래 배치한다.)
이를 이용해 유저가 잘못된 url로 접근 시 404 페이지를 띄워주거나 메인 페이지로 이동시키는 등의 처리를 할 수 있다. (<Route path="*" element={<Error404 />} />)
<Navigate />: 해당 url로 페이지를 이동시켜주는 컴포넌트이다.
import { BrowserRouter, Routes, Route, Link, Navigate } from "react-router-dom";
const Main = () => {
return(
<Link to='/abc'>Hello</Link>
)
}
root.render(
<div>
<BrowserRouter>
<Routes>
<Route path='/' element={<Main />} />
<Route path='/hi' element={<Main />} />
<Route path='*' element={<Navigate to='/hi' replace={true} />}
/>
</Routes>
</BrowserRouter>
</div>
);props.replace가
true인 경우
1. /로 접속
2.<Main />을 render
3.<Link to='/abc' />클릭
4.Navigate에 의해 /hi로 이동
5. 뒤로가기 클릭
6. /로 이동
props.replace 가
false인 경우
1. /로 접속
2.<Main />을 render
3.<Link to='/abc' />클릭
4.Navigate에 의해 /hi로 이동
5. 뒤로가기 클릭
6. /abc로 이동
true일 때와 달리, 아주 잠깐이지만 /abc로 이동했다가 /hi로 이동하는 것을 볼 수 있다.
👉 props.replace는 browser history에 영향을 끼친다.
React에서의 스타일링
1. css-in-js
자바스크립트 코드로 스타일링하는 것이다. (CSS를 작성 & 유지보수)
문제점
Global Namespace
- 모든 스타일이 Global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제가 있다.
- 다음처럼 작성한 경우 B 컴포넌트의
div에도 영향을 미친다.
Dependencies
- CSS에서 에러를 감지하기 어려운 상황
- CSS 클래스의 이름을 변경하는 경우
- 파일 간 CSS 코드를 이동하는 경우
- 클래스 이름을 부여한 이후 CSS 코드 작성을 잊어버린 경우
Dead Code Elimination
- 사용하지 않는 코드 관리
- 자바스크립트에서는 eslint 등으로 사용되지 않은 코드를 쉽게 파악할 수 있지만, CSS는 JS/HTML과 직접적으로 연결되어 있지 않고 selector를 사용하기 때문에 상대적으로 파악이 어렵다.
Minification
- CSS명이 string으로 관리되므로 minify(짧게 만들기) 어렵다.
Sharing Constants
- CSS와 JS 간 variable을 공유하기 어렵다.
- 다음처럼 JS변수를 CSS변수로 활용하려고 할 때 불편하다.
- css --var 를 사용할 수 있으나 여전히 불편하다.
Non-deterministic Resolution
Breaking Isolation
- 다음처럼 CSS selector를 작성한 경우, 안쪽 컴포넌트의 style까지 영향을 미친다.
2. styled-components
css-in-js를 사용할 수 있게 도와주는 라이브러리이다.
사용법
사용법은 매우 간단하다.
styled.태그명`
css 코드
`새 컴포넌트가 생성된다. 이때, Sample의 자료형은 함수이다.
props
props를 넘길 수 있다. (JSX 문법을 활용)
Template Literals를 활용할 수 있다. (문자열 중간에 자바스크립트 사용)
styled-components가 props object를 주입한다.
Animation
CSS keyframes과 유사하나 keyframes도 함수로 제공한다.
