# yarn 

# yarn dev

• root, about 페이지 생성
• 버튼을 통해서 페이지 전환 가능
• 뒤로가기시 이전 페이지로 이동되어야함
• useRouter 훅 생성하고 최소한의 기능을 가진 push 생성
• history API 활용
• location.pathname 활용
• popstate event 활용

a 태그를 활용하면 쉽게 페이지 전환을 시킬 수 있다.
그러나 a 태그의 href 속성을 통한 페이지 전환은 서버에 새로운 요청을 전달하고 전체 페이지 새로고침이 발생한다.
전체 새로고침이 발생하기 때문에 화면의 깜빡임도 발생한다.
전체 새로고침이 진행되면 브라우저는 렌더링을 처음부터 다시 수행한다.

1. 리액트 라우터에서 제공하는 Link 처럼 a 태그를 사용하되 전체 페이지 새로고침이 발생하지 않아야 한다.
2. event.preventDefault() 를 사용하여 기본 동작을 블락시킨다
3. handleClick 이밴트 내에서 원하는 처리를 진행한다.
4. 브라우저의 주소가 변경되어야 하고 변경된 주소에 맞춰 컴포넌트가 렌더링 되어야 한다.
5. history.push() 를 사용하면 브라우저의 주소만 변경이 가능하다.
6. 그러나 이것만으로는 리렌더링이 발생하지 않는다.
7. 리렌더링을 발생 시킬 동작이 필요하고 path 의 변경사항에 따라 새로운 컴포넌트가 렌더링 되어야 하기 때문에 Router 에서 변경사항을 체크 할 수 있어야 하고 변경을 발생 시켜야 하는 set 함수는 하위 컴포넌트에서 이루어 지기 때문에 context API 를 활용하여 전역 변수를 사용
8. 현재로서는 props로 넘겨주어도 무방하지만 중첩 컴포넌트에서 사용될 경우엔 context API 를 활용하는것이 불필요한 props 의 낭비를 줄일 수 있음
9. push 와 Link 에서 각각 history.push 와 setPath 를 주어 페이지 전환과 렌더링을 발생 시킬 수 있다.

뒤로가기 수행시 브라우저의 주소창은 바뀌지만 렌더링을 수행되지 않는다.
popstate 라는 이벤트를 사용하면 브라우저의 뒤로가기를 감지할 수 있고 이벤트 객체를 넘겨받아 pushstate 시 넘겨주었던 state 값을 가져와 setPath 에 넘겨주어서 활용할 수 있다.