현재
[React] 기초 문법 정리 본문
- React의 실행 흐름
1.index.html 에 존재하는 id가 root인 태그 안에 화면을 뿌려준다고 생각.
<div id="root"></div>
2.index.js에서 root.render를 통해서 <App /> 컴포넌트(화면) 출력
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App /> // 화면을 구성하는것을 모두 component라고 부른다
);
3.App.js안에 들어있는 요소들을 모두 index.html로 반환한것이 웹브라우저에서 볼 수 있다.
import './App.css';
import Footer from './Footer';
import Header from './Header';
import Home from './Home';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Info from './pages/Info';
import State from './pages/State';
import Param1 from './pages/Param1';
import Param2 from './pages/Param2';
function App() {
return (
<div className="App">
{/* class가 아니라 className이라고씀 */}
<BrowserRouter>
<Header/>
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/info' element={<Info/>} />
<Route path='/state' element={<State/>} />
<Route path='/param/:id' element={<Param1/>} />
<Route path='/param' element={<Param2/>} />
</Routes>
</BrowserRouter>
<Footer/>
</div>
);
}
export default App;
※여기서 부터는 차례대로 각 .jsx 컴포넌트, 태그와 문법에 대해서 설명하겠다.
<BrowserRouter, Routes, Route> 라는 태그들을 통해서 URL로 들어온 요청을 식별하고 그에 맞는
element를 화면에 렌더링한다.
Home.jsx
import { Link } from "react-router-dom";
import Prop from "./pages/Prop";
import { nation , nations } from "./data/data";
const Home = () => {
return(
<div className="home">
<h2>Home.jsx</h2>
<Prop name="안" age="15" />
<Link to={
{
pathname: "/param/10"
}
}>
param전송(path variable)</Link>
<div>
<Link to="/param?q=aa&page=20">전체스트링</Link>
<Link to={{
pathname: "/param",
search:"q=aa"
}}>param전송(query String)</Link>
</div>
<div>
{nations.map(n => (
<Link to={{
pathname: `/param/${n.name}`
}}>{n.name}</Link>
))}
</div>
</div>
);
}
export default Home;
Prop.jsx
import { useState } from "react";
const Prop = (e) => {
console.log(e);
// const [param1, setParam1] = useState();
// setParam1(e);
return(
<div className="prop-page page">
<h2>Prop.jsx</h2>
<p>
prop값 : {e.name} , {e.age}
</p>
</div>
);
}
export default Prop;
- Prop : 상위 컴포넌트에서 받은 매개변수를 하위 컴포넌트에서도 사용하는것
위와 같이 e를 통해서 매개변수를 console.log(e)를 통해 출력하면,
e = {"name": "안", "age": "15" } 란 결과를 반환한다. 여기서 값을 {e.name}, {e.age} 등으로 변수를 출력할 수 있다.
Param1.jsx
import { useParams } from "react-router-dom";
const Param1 = () => {
const { id } = useParams();
console.log(id);
return(
<div className="param1-page page">
<h2>Param1.jsx</h2>
<p>id값 : {id} </p>
</div>
);
}
export default Param1;
-Link : 링크는 a태그와 같은 역할을 하며, pathname으로 들어온 요청을 Route로 반환하는 역할을 한다.
<Link to={{pathname: "/param/10"}}> param전송(path variable)</Link>
<div>
<Link to="/param?q=aa&page=20">전체스트링</Link>
// to에 쿼리스트링을 한번에 보내는경우 태그로 감싸주지 않으면 오류가 난다
<Link to={{
pathname: "/param",
search:"q=aa"
}}>param전송(query String)</Link>
</div>
<div>
{nations.map(n => ( // {객체,map(n=>())}을 통해서 map 반복문 수행이 가능
<Link to={{
pathname: `/param/${n.name}` // 매개변수를 pathname에 사용할때는 `` 비틱을 사용해 주어야 한다.
}}>{n.name}</Link>
))}
여기서 nations는 따로 data.js에 저장되어있는 객체 데이터이다.
State.jsx
import { useState } from "react";
const State = () => {
const [param1, setParam1] = useState("초기값123");
const [param2, setParam2] = useState();
const func1 = () => {
setParam1("안녕하세용")
}
const func2 = () => {
setParam1("");
}
const textInput = (e) => {
// e.target에 일치하는 변수명에 한번에 변수 저장 가능
const { name, value } = e.target // 구조 분해 할당
console.log(name,value)
setParam2(value);
}
return(
<div className="state-page page">
<h2>State.jsx</h2>
<p>{param1}</p>
<button onClick={func1}>버튼</button>
<button onClick={func2}>초기화</button>
<input type="text" onChange={textInput} name="param2"/>
<p>입력값 : {param2}</p>
</div>
);
}
export default State;
useState() : [ 변수, 변수변경함수 ] 를 저장함으로써 변수를 지정한다.
변수는 const로 저장되어있기 때문에 setParam(3) 과 같은형식인 함수로 밖에 변경을 할 수 없다.
Param2.jsx
import { useSearchParams } from "react-router-dom";
const Param2 = () => {
const [ params ] = useSearchParams();
console.log(params.get("q"));
console.log(params.get("page"));
return(
<div className="param2-page page">
<h2>Param2.jsx</h2>
</div>
);
}
export default Param2;
useSearchParams() : 함수를 통해서 쿼리 파라매터만 받아올 수 있다. 기본적으로 변수를 설정후 "변수.get("객체이름")" 을 통해서 값을 가져온다.
Info.jsx
const nation = {
name: "대한민국",
population: 51400000,
capital: "서울",
language: "한국어"
}
const nations = [{
name: "대한민국",
population: 51408155,
capital: "서울",
language: "한국어"
},
{
name: "프랑스",
population: 67810000,
capital: "파리",
language: "프랑스어"
},
{
name: "호주",
population: 25690000,
capital: "캔버라",
language: "영어"
},
{
name: "미국",
population: 331900000,
capital: "워싱턴DC",
language: "영어"
}]
const Info = () => {
return(
<div className="info-page page">
<h2>Info.jsx</h2>
<p>{nation.name},{nation.population}{nation.capital}{nation.language}</p>
{nations.map(e => (
<p>{e.name},{e.language},{e.capital},{e.population}</p>
))} // 위와 같이 반복문을 통해서 출력할 수 있다.
</div>
);
}
export default Info;
{nation.name}과 같이 작성할때는 꼭 태그로 감싸줘야한다.