Form 개발하기
로그인이나 회원가입을 통해 사용자의 정보를 받아오는 data들은
양방향으로 통신하게된다.
그때 사용자가 data를 입력할 수 있게끔 form을 만들어놓는 것
state란?
component내에서 유동적으로 변할 수 있는 값을 재렌더링해서 처리
State 변경하는 두 가지 방법
- setState내에 변경할 값을 넣기
setCount(count+1)- setState에 함수를 넣기
setCount((current) => {
return current + 1;
}
이벤트 객체
Const App = () => {
const handleChange = (event) => {
}
}2.리스트 표현하기 : form으로부터 전달 받은 값들을 리스트에 저장하고 리스트의 값을 순차적으로 화면에 출력한다.
react router dom
❕리액트 라우팅을 배우기 앞서 라우팅이란?
사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다.
❕리액트 라우터?
사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공하는데 이때 가장 많이 쓰는 라우터 컴포넌트는 다음과 같다.
1️⃣BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지한다.
2️⃣HashRouter : 해시 주소를 감지한다.
react-router 컴포넌트
BroswerRouter
HTML5의 History API를 사용하여,UI와 URL의 싱크를 맞추는 역할.
모든 URL에 대해 동작하게 하기 위해서는 서버 설정 필요.
모든 Path앞의 basename을 지정할 수 있다 ->basename="/ko"
Switch
여러 route중 매치되는 Route위에서부터 하나 선택해 렌더링한다.
매칭되는 Route가 없으면 아무것도 보여주지 않고 fallback용으로 404 NotFoundPage를 추가한다.
path="/"의 경우 모든 path에 매칭되므로 exact 키워드를 추가하거나 가장 아래로 내림.
Route
path와 컴포넌트를 매칭한다. 매칭되는 컴포넌트는 children으로 넣어주거나 component prop으로 넘긴다.
exact키워드로 정확하게 매칭하는 path를 설정한다.
Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받는다.
render prop으로 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제한다.
Redirect
Link와 비슷하나, 렌더링되면 to prop으로 지정한 path로 이동
Switch안에서 쓰일 경우, from to를 받아 이동하게 만든다.
from="/" to="/login"
Link, NavLink
to prop을 특정 URL로 받아, 클릭시 네비게이션을 한다.
NavLink의 경우 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있고 to에 location object나 함수를 받을 수 있다.<Link to ="/">HOME</Link>
useHistory, useLocation, useParams, useRouteMatch
최상위 컴포넌트가 아니더라도, Hook으로 react-router관련 객체에 접근할 수 있다. history, location, params, match객체에 접근한다.
라우터 연결방식
<BrowserRouter>
<Switch>
<Route exact path="/">
<Homepage />
</Route>
<Route path="/about">
<AboutPage />
</Route>
</Switch>
</BrowserRouter>Single Page Application 🌱
서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱이 가능
매번 페이지 요청할 필요가 없어 네트워크요청이 줄어듦
웹 사이트를 개별 페이지보다는 하나의 앱으로 보는 설계로 고도의 소프트웨어 설계와 패턴을 적용할 수 있음
(고도의 설계)
->상태관리, 라우팅, 컴포넌트 재사용, hook을 통한 로직
