리액트 spa

문종후·2023년 3월 23일
0

트위터 react 를통한 개발 그중에서도 SPA방식의 사이트를 만들어보았다.

SPA를 간단하게 설명하자면 기존의 홈페이지는 홈페이지요소중에 한가지만바뀌어도 전체를 다시 불러오는 형식이여서 서버를 많이 잡아먹었지만 SPA는 일부분만 바꿔불러와 훨씬 간편한 구조를 띈다.

이번트위터 과제에서 진행할부분은 간단하다. 각페이지를 react router를 통해서 연결해주고

사이드바 아이콘과 링크를 연동해 클릭햇을시 그 화면이나오게해주면된다.

Routers와 router link 를통해 구현했고

advanced로 진행한 뒤로가기 페이지는 navigator를 통해서 구현했다.

구현하면서 오류가 발생했던 부분이 usenavigator의 정의를 리액트 내부에서 해줫어야하는데 이전에 했던것처럼 맨위에서 정의를하다보니 navigator라는 변수가 정의되지않아 해맸지만
선언을 리액트내부에해주고 navigator(-1)을 통해 이전페이지를 돌아가게하는것을 구현할수있었다.
참고로 (+1)은 다음페이지 () 안에 다른 링크를 집어넣을수도있다.

profile
개발자가되고싶은사람

0개의 댓글