16. 리액트 미니 프로젝트 (챕터 5~6)

(실습) Page 컴포넌트 구현 및 각 페이지별 경로 구성하기

(아, 참고로 하나의 "페이지"를 리액트에서 컴포넌트로 따로 정의해서 관리하기도 한다... 좀 이상하게 들릴 수 있지만, 이렇게 페이지 자체를 컴포넌트 화하면 유지 보수가 좋아진다고 한다.)

+ (그리고, 확장 마켓플레이스에서 vscode-styled-components 을 설치했다. 비로소 스타일할 때 vscode의 에디터 도움을 받게 되었다. 개꿀)

---

일단 코드를 오픈하기 전에, 몇 가지 알고 가야 하는 개념이 있다.

 

웹 페이지 이동

우리는 웹에서 다른 웹 페이지로 많이 이동한다. 페이지 이동이 없는 웹은 그냥 문서인 셈.

예시로 페이스북이 있다. 보면 facebook.com 이후에 슬레쉬하고 games가 존재한다.

이 의미는 "메인 페이지인 facebook.com"에서 특정 이벤트를 만들어내고, 이후 자식 페이지인 games로 이동하였다는 것을 의미한다.

리액트에서는 이 웹 페이지 이동을 쉽게 만들어주는 기술이 존재한다.

그게 router이다. 앞 서서 이 라우터 돔을 깔았는데, 이 확장팩(?)으로 웹 페이지 이동을 용이하게 할 것이다.

예시 코드는 위와 같다. Routes은 Route의 상위 요소이다. 그래서 Route을 여러 개 가지고 있을 수 있다.

그리고 라우트를 보면 index element가 존재하는데, 따로 라우트를 지정하지 않으면 메인 페이지로 이동한다는 뜻이다.

또한, path부분이 존재한다. 라우팅을 하는데, path를 하는 키가 places라면 PlacePage로 이동하는 것이다. 

useNavigate()

이 훅은 페이지를 움직이게 만들 때, 특정 게이트 문자를 만들어주는 훅이다.

말이 어렵지만, 그냥 쉽게 말해서 "/"를 이용해서 웹 페이지마다 움직이게 만들어주는 일종의 조건 같은 것이다.

예시를 따지면 다음과 같을 것이다.

Page 컴포넌트 구현 및 각 페이지별 경로 구성

이제 페이지에 대한 컴포넌트 코드를 만들어보면 다음과 같을 것이다.

---

코드가 너무 길어서 좀 요약을 해보자면..

• useNavigate 훅을 이용해서 웹 페이지를 이동시킨다.
• 뭔가 뭔가 코드가 길어보이지만, 사실 스타일이 절반이다.
• 글 작성 페이지와 댓글 페이지를 왔다 갔다 하는 코드이다.

유효성 체크는 id로 체크가 된다. 이벤트는 클릭으로 이루어진다.

임포트를 이용해서 필요한 파일도 불러와준다.

useState를 여러개 쓸 거면 임포트 리액트를 할 때 중괄호를 열어주고 useState를 해줘야 한다. (이거 안 하면 오류가 남)

---

---

(실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기

일단 다음과 같은 화면이 떠야 한다.

이후 관련 컴포넌트를 클릭하면

댓글이 나오게 된다. 이 댓글들은 가짜 데이터에서 가져오는 것이다.

---

이후 App 파일을 수정한다. 이 파일은 페이지를 이동시키는 기능을 해준다. 

그 다음, 인덱스 파일에 들어가서 npm start를 해주면 된다.

결론

간단한 기능들이 들어간 블로그이지만,

전체적인 리액트에 대한 기술들이 들어간 블로그이다.

---

강의를 마치면서..

이렇게 리액트 강의가 끝났다. 

누군가에게는 엄청 어려운 강의가.. 누군가에게는 쉬운 강의일 것이다.

중요한 것은 어려워도 계속 끈기 있게 반복 복습하는 것이다.

---

+ (깃허브에 핵심 코드를 올려두었다. 링크 참고하자.)

https://github.com/kss2002/mini-blog

GitHub - kss2002/mini-blog