다른 주소에 다른 화면을 렌더링 하고 싶을 때 사용
이런 url을 가진 메인 페이지에 도달했을 때 우리는 '/'를 활용해 각기 다른 페이지로 이동을 원할 때가 있습니다.. 보다는 한 웹사이트에서 다양한 기능 정보를 제공하기 때문에 라우팅은 필수가 아닐까 싶은데요.
쿠팡 url을 봐도 메인 페이지는 coupang.com으로 되어 있으나 기획전 탭을 클릭했더니 기본 url 뒤에 라우팅된 페이지로 이동을 위한 다른 '/np/exhibition'이 붙게 된 것을 볼 수 있어요.
간단하게 활용은 아래와 같은 모습으로 하게 됩니다.
Switch Router 를 써준 후에 path에 렌더링하고 싶은 컴포넌트의 url명칭(?)을 입력해 주면 된다. 첫화면, 메인화면, 홈화면을 렌더링할 때 기본적으로 '/'를 써주고, 컴포넌트 부분에 렌더링 하고자하는 컴포넌트를 써주면 됩니다.
그리고 저와 같은 경우는 코딩테스트 연습을 위해 컴포넌트 하나를 만들어서 썼는데요,
이렇게 기본 도메인 뒤에 '/test'라는 path를 써줘서 해당 url로 접근할 때는 코딩테스트를 위한 화면만 렌더링 할 수 있게 했습니다 :-)
import { Switch, Route } from 'react-router-dom';
import Home from 'Home';
import CodingTest from 'CodingTest';
function App() {
return (
<Switch>
<Route path="/" component={Home} />
<Route path="/test" component={CodingTest} />
</Switch>
);
}
export default App;
홈화면을 렌더링 했을 때,
import { useEffect, useState } from "react";
import 'AppTest.scss';
import { Checkbox } from "antd";
const initialDatas = [
{
active: true,
content: '코딩 테스트 공부하기',
},
{
active: false,
content: '리액트 공부하기',
},
{
active: true,
content: '노래 부르기',
},
]
function Home() {
const [state, setState] = useState(initialDatas);
useEffect(() => {
const getInitialState = async () => {
};
getInitialState();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const onChange = () => {
}
return (
<div className="Information">
<div className="Tabs">
<p className="new">NEW</p>
<p className="dome">DONE</p>
</div>
{state.length > 0 && state.map((item, index) => {
return (
<div key={index}>
<Checkbox onChange={onChange} checked={item.active}>
<p className="content">{item.content}</p>
</Checkbox>
</div>
)
})}
</div>
);
}
export default Home;
여기선 코딩테스트 실행하려고 했던 부분이라 콘솔창만 활용해서 테스트 화면이 부족합니다..
import { useEffect } from "react";
function CodingTest() {
var s = "qwer";
var answer = '';
useEffect(() => {
const getInitialState = async () => {
var array = s.split('');
if (s.length % 2 === 0) {
var newArray = [];
console.log(array);
newArray.push(array[(s.length / 2) - 1], array[s.length / 2]);
console.log(newArray.join(''));
return answer = newArray.join('');
}
if (s.length % 2 === 1) {
console.log(array[Math.floor(s.length / 2)]);
return answer = array[Math.floor(s.length / 2)];
}
};
getInitialState();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<div className="Information">
<div className="Tabs">
<p className="new">NEW</p>
<p className="dome">DONE</p>
</div>
</div>
);
}
export default CodingTest;