프로젝트 진행 중에 리액트를 공부하면서 개념적인 부분들 정리
import React, { useState } from 'react';
const Counter = () => {
const [value, setValue] = useState(0);// useState
return (
<div>
<p>
현재 카운터 값은 <b>{value}</b> 입니다.
</p>
<button onClick={() => setValue(value + 1)}>+1</button>
<button onClick={() => setValue(value - 1)}>-1</button>
</div>
);
};
결론
함수형 컴포넌트로 개발할 경우 hook은 필수로 사용해야함.
상태관리 및 유용한 기능을 사용하기 위해서 익혀두어야 하며 여러가지 hook들을 필요에 따라 가져다 쓰는 습관을 가져야겠다.
1. yarn add react-router-dom
2. route 사용
import React, { useState } from "react";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Auth from "../components/routes/Auth";
import Home from "../components/routes/Home";
const AppRouter = () => {
const [ isLoggedIn, setIsLoggedIn ] = useState(true); // 1
return (
<Router> // 2
<Switch> // 3
{isLoggedIn ? (
<>
<Route exact path="/">
<Home />
</Route>
</>
) : (
<Route exact path="/">
<Auth />
</Route>
)}
</Switch>
</Router>
);
};
export default AppRouter;
3. 결론