# yarn
# yarn dev
- root, about 페이지 생성
- 버튼을 통해서 페이지 전환 가능
- 뒤로가기시 이전 페이지로 이동되어야함
- useRouter 훅 생성하고 최소한의 기능을 가진 push 생성
- history API 활용
- location.pathname 활용
- popstate event 활용
a
태그를 활용하면 쉽게 페이지 전환을 시킬 수 있다.
그러나 a
태그의 href
속성을 통한 페이지 전환은 서버에 새로운 요청을 전달하고 전체 페이지 새로고침이 발생한다.
전체 새로고침이 발생하기 때문에 화면의 깜빡임도 발생한다.
전체 새로고침이 진행되면 브라우저는 렌더링을 처음부터 다시 수행한다.
- 리액트 라우터에서 제공하는 Link 처럼 a 태그를 사용하되 전체 페이지 새로고침이 발생하지 않아야 한다.
event.preventDefault()
를 사용하여 기본 동작을 블락시킨다handleClick
이밴트 내에서 원하는 처리를 진행한다.- 브라우저의 주소가 변경되어야 하고 변경된 주소에 맞춰 컴포넌트가 렌더링 되어야 한다.
history.push()
를 사용하면 브라우저의 주소만 변경이 가능하다.- 그러나 이것만으로는 리렌더링이 발생하지 않는다.
- 리렌더링을 발생 시킬 동작이 필요하고 path 의 변경사항에 따라 새로운 컴포넌트가 렌더링 되어야 하기 때문에 Router 에서 변경사항을 체크 할 수 있어야 하고 변경을 발생 시켜야 하는 set 함수는 하위 컴포넌트에서 이루어 지기 때문에 context API 를 활용하여 전역 변수를 사용
- 현재로서는 props로 넘겨주어도 무방하지만 중첩 컴포넌트에서 사용될 경우엔 context API 를 활용하는것이 불필요한 props 의 낭비를 줄일 수 있음
- push 와 Link 에서 각각 history.push 와 setPath 를 주어 페이지 전환과 렌더링을 발생 시킬 수 있다.
뒤로가기 수행시 브라우저의 주소창은 바뀌지만 렌더링을 수행되지 않는다.
popstate
라는 이벤트를 사용하면 브라우저의 뒤로가기를 감지할 수 있고 이벤트 객체를 넘겨받아 pushstate
시 넘겨주었던 state 값을 가져와 setPath 에 넘겨주어서 활용할 수 있다.