React Router
기본적인 jsx 코드인 a href를 사용하게 되면 해당 링크로 넘어갈 때 http 요청을 보내기 때문에 화면이 새로고침됨. 그래서 Link를 사용함. react-router-dom install 후에 사용할 수 있음
Link를 사용하게 되면 페이지가 다른 링크로 넘어갈 때 새로고침되지 않음.
<Link to='/someaddress' />이런 식으로 to를 사용해서 해당 링크를 눌렀을 때 어떤 링크로 이동하는지 지정할 수 있음.
NavLink도 있는데 이건 Link랑 기본적인 기능은 똑같음. 근데 여기에 className property를 추가할 수 있음. 뭐 더 추가할 수 있었는데 기억이 안남 추후에 적겠음
<NavLink to="/address" className={({ isActive }) =>
isActive ? classes.active : undefined}>products</NavLink>이런 것임. isActive는 말 그대로 해당 링크가 active하다면, 즉 내가 해당 링크를 클릭했다면 클래스를 추가하고 다른 링크가 클릭되면 클래스를 해제함(undefined)
Link에는 relative path랑 absoulte path가 있음. Absolute는 무조건 그 링크로 이동하는 거임. 그래서 위의 코드처럼 to="/address" 이렇게 해버리면 무조건 address 주소로 이동함.
근데 relative는 좀 다름. relative는 /를 빼고 적으면 relative path인데, 이건 parent path가 바뀌어도 영향을 주지 않음.
예를 들어 parent path를 "/"라고 지정했다고 하자. 그러면 absolute path이건 relative path이건 별 상관 없음. 근데 만약 parent path가 "/root"로 바뀌었다고 가정해보겠음. 근데 내가 이전에 children path를 "/address"이런 형태로 absolute하게 지정하면 에러가 남. 왜냐하면 /root/address로 이동하는 게 아니고 /address로 이동하기 때문임. 그런데 relative path는 무조건 parent path 뒤로 이동함 => /root/address 이런 형태이기 때문에 에러가 나지 않음.
그리고 이전 페이지로 이동하려면
<p><Link to=".." >Back</Link></p>이런 형태로 추가하면 됨. ".."이 이전 페이지로 이동을 시켜줌. 근데 이대로 추가하게 되면 바로 이전 페이지로 돌아가는 게 아니고 처음 root 페이지로 이동함. 현재는 relative 상태가 route로 설정되어 있는데, relative를 path로 변경하면 이전 페이지로 이동할 수 있음.
<p><Link to=".." rel="path" >Back</Link></p>이렇게 추가해주면 이전 페이지로 이동함.
React-Router-Dom
When we use Usestate and UseEffect to render the components, it will be rendered after the request is sent. It's not a problem, but we can use Loader for personal preference.
Loader: Sends the request earlier before user reaches some page and fetch the data later.
We have to add an extra property to route definition.
{path: '/', loader: async() => {
const response = await fetch()
...
const resData = await response.json()
return resData.events(this prop is in the backend)
}}useLoaderData : Get access to closest loader data.
Get the final data(promise)
const events = useLoaderData()
<EventPage events={events} />Action = Sends request to the backend as below
function action() {
fetch('some/address'), {
method: 'POST',
header: {
'Content-Type': 'application/json'
},
body: JSON.stringify(eventData)
}
}Input name="" << This is needed bc will be used for extracting data.
We have to replace the form element to Form(same tag but a capital F at the beginning). Therefore, browser default of sending a request to the backend will be omitted, but it will take that request and give it to the action.
<Form method='post'>Action executes by react-router and receives an object that includes properties: request and params.
request- Object contains form data
const data = await request.formData()
const eventData = title: data.get('title')
And use get() for getting the name field.
etc
useNavigation() << used for waiting the data
