npm i node-sass@4.14
입력하여 설치! npm install axios
: 리액트는 페이지가 없기 때문에 가상의 주소를 만들어 주는 것npm install react-router-dom
: 그 주소에 대한 dom구조로 갈 수 있게 하는 것
- router 에러시
npm uninstall react-router-dom
으로 삭제한 다음npm install react-router-dom@5.3.0
버전으로 다시 설치할 것!!
- Prettier를 설치하고 오른쪽 하단에 나오는 글자를 클릭해준다.
.prettierrc.js
파일을 만든다.
- tabWidth: '2' 로 변경하기 (하단 Spaces 클릭 후 Indent Using Spaces 눌러서 변경가능)
- F1 눌러서 settings.json으로 간다.
- 아래 내용을 추가하여 VScode 사용자 설정을 해준다.
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.formatOnSave": true // --emmet기능 추가 : 태그 자동완성 -- "emmet.includeLanguages": { "javascript": "javascriptreact" } }
src에서 App.js
, index.js
빼고 나머지 삭제하기
public에서 index.html
빼고 나머지 삭제하기
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<!-- 스크립트 없으면! -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
index.js
여러가지 전역적인 설정이 들어가는 '입구' 라고 볼 수 있다. 기본적으로 App.js를 가져와서 출력하며, 내용은 App.js에서 편집한다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from "./App";
// 예전 문법
ReactDom.render(<h1>Hello</h1>, document.getElementById("root"));
// 최신 문법
const rootNode = document.getElementById('root');
React.createRoot(rootNode).render(<App />);
// 변수
const name = "yura";
const hello = <h1>hello {name}</h1>;
// 렌더링 - hello yura 출력
ReactDom.render(hello, document.getElementById("root"));
// 함수
function helloName(name){
return name.nick;
}
// 변수
const name = {
nick : "yura"
}
const hello = <h1>hello {helloName(name)}</h1>;
// 렌더링 - hello yura 똑같이 출력
ReactDom.render(hello, document.getElementById("root"));
App.js
rfce
치면 리액트 함수 컴포넌트를 자동으로 만들어 준다. Router
로 페이지 가져오기~! import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom"; //선언하기
import Main from "./components/pages/Main"; //페이지 가져오기
import aaa from "./components/pages/aaa";
import bbb from "./components/pages/bbb";
import ccc from "./components/pages/ccc";
function App() {
return (
// <div>App</div>
// 리액트 페이지 만들기
<Router>
<Route path='/' component={Main}></Route>
<Route path='/aaa' component={aaa}></Route>
<Route path='/bbb' component={bbb}></Route>
<Route path='/ccc' component={ccc}></Route>
</Router>
)
}
export default App;
package.json