React 프로젝트 초기세팅 복습
React 프로젝트 설치
- npx create-react-app 프로젝트명(폴더명)
- cd 프로젝트명
- 초기세팅 진행
React 초기세팅
1. 프로젝트 폴더에 남기는 것을 제외하고 대부분 삭제한다
- node_modules
- public/index.html
- src/components/
- App.js ⭐️
- index.js
- main.css
- main.css.map
1번과정의 설명
components 폴더
: 반복적으로 사용하는 컴포넌트들을 저장하는 폴더pages 폴더
: 페이지 jsx파일 저장하는 폴더- main.css 와 main.css.map은 scss 파일들을 하나로 매핑할 때 사용한다
- 만약
main.css
와main.css.map
을 사용하지 않으면 각각의페이지.jsx
파일에서 각각의페이지 혹은 컴포넌트.scss
파일을 import 헤야한다
react-router-dom이 버전 6으로 업그레이드
-
Switch 컴포넌트가 사라지고, Routes 컴포넌트로 변경
-
Route 컴포넌트가 기본으로 exact 속성을 가짐 + component 속성이 element 속성으로 변경
- 따라서 exact 속성을 부여하는 것이 불필요하다
- element 속성에는
컴포넌트의 형태
로 값을 부여해야 한다
-
상대 경로 (Relative Route)
- Link 혹은 Route에서 라우팅 경로를 입력할 때,
/
없이 작성하면 -> 헌재 라우팅 경로 위에 새로운 경로가 작성된다 Link to={'${match.url}'}>contents</Link>
대신<Link to='me'>contents</Link>
으로 작성하면 된다<Link to='.'>
: 현재경로<Link to ='..'>
: 한 단계 윗 경로
- Link 혹은 Route에서 라우팅 경로를 입력할 때,
-
새로운 Route Path 패턴:
*
- Route 컴포넌트가 기본적으로 exact 속성을 가지기 때문에 서브라우터를 구성하고 싶은 경우
*
로 표기하면 된다 *
: Route Path의 마지막에만 사용이 가능하다 (*
가 중간에 있으면 안됨)
- Route 컴포넌트가 기본적으로 exact 속성을 가지기 때문에 서브라우터를 구성하고 싶은 경우
-
useHistory
Hook,withRouterHOC
대신useNavigate
Hook이 생김- withRouterHOC가 사라졌기 때문에, class형 컴포넌트에서 해당 기능을 사용하려면 직접 구현을 해야 한다
-
서브라우터를 구성할 때 유용한
<Outlet>
컴포넌트 등장- 기존에는 서브라우터를 구성할 때 메인라우터가 있고, 서브라우터가 구성될 컴포넌트 안에 또 다른 라우터가 존재했지만
- Outlet 컴포넌트를 사용하면 모든 라우터를 메인 라우터에서 관리할 수 있어, 서브 라우터가 많이 있을 시 프로젝트 내 여러 컴포넌트에 산발적으로 라우터가 존재하게 되는 문제점을 해결할 수 있다.
Reference
https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6
https://www.youtube.com/watch?v=CHHXeHVK-8U
Before & After
function App() {
return (
// Before 🙅♂️
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/signup" component={Signup} />
<Route exact path="/main" component={Main} />
</Switch>
</BrowserRouter>
// After 🙆♂️
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/main" element={<Main />} />
<Route path="/users/*" element={<Users />} />
</Routes>
</BrowserRouter>
)
}
function Users() {
return {
<div className='Users'>
<nav>
<Link to='me'>My Profile</Link>
</nav>
<Routes>
<Route path=':id' element={<UserProfile/>}/>
<Route path='me' element={<OwnUserProfile/>}/>
</Routes>
</div>
)
}
1번과정의 결과
// App.js
import React, { Component } from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import ProductList from './pages/ProductList'
import ProductDetail from './pages/ProductDetail'
import Cart from './pages/Cart'
class App extends Component {
render() {
return (
<Router>
<Routes>
<Route exact path='/' element={<ProductList />} />
<Route exact path='/productDetail' element={<ProductDetail/>} />
<Route exact path='/cart' element={<Cart/>} />
</Routes>
</Router>
)
}
}
export default App
// index.js
import React from "react"
import ReactDOM from "react-dom"
import { ThemeProvider } from "styled-components"
import GlobalStyles from "./styles/GlobalStyles"
import App from "./App"
import theme from "./styles/theme"
ReactDOM.render(
<>
<GlobalStyles />
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</>,
document.getElementById("root")
);
css 초기화설정
node-sass를 사용하면 reset.scss에
styled-components를 사용하면 GlobalStyles.js에 해당 내용을 넣어주면 된다
// GlobalStyles.js
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
address,
em,
img,
q,
strong,
b,
i,
ol,
ul,
li,
form,
label,
article,
figure,
figcaption,
footer,
nav,
section,
main {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
ol,
ul,
li {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
i,
em {
font-weight: normal;
font-style: normal;
}
textarea {
border: none;
overflow: auto;
outline: none;
box-shadow: none;
resize: none;
cursor: text;
}
input,
button {
border: none;
outline: none;
background: transparent;
}
a {
text-decoration: none;
color: inherit;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*{
box-sizing: border-box;
}
`;
export default GlobalStyles;
공통적으로 사용하는 스타일링
node-sass를 사용하는 경우 common.scss
styled-components 사용하는 경우 ThemeProvider.js에 해당 내용 넣고
index.js에서 <ThemeProvider theme={theme}>
내용 불러오기
// ThemeProvider.js
const theme = {
logoRed: "rgb(233,0,22)",
buttonGray: "rgb(255,255,255)",
};
export default theme;
2. 사용할 패키지 설치
styled-components 혹은 node-scss 등 해당하는 프로젝트에서 사용할 패키지를 사용하고
React 프로젝트를 실행했을 때 별 다른 문제가 없는 지 확인한다
$ npm start
Author And Source
이 문제에 관하여(React 프로젝트 초기세팅 복습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@beanlove97/React-프로젝트-초기세팅-복습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)