🤮 코딩초짜 코칭 프로젝트 - (2) 라우터

들어가기

이번주 수업목표

• 외부 개발도구 설치하고 사용하기 (npm, import)
• 화면 전환하기 (router)
• 모달 열기 (modal)

임포트 = 치트키???

• 리액트 사용하는 이유
• 페이스북이 많은 고민해서 개발 쉽고 편하고 빠르게 할 수 있게 도와주는 도구/방법 모아둠
• 리액트 사용 커뮤니티 커지면서 오픈소스로 도구/방법에 기여하는 프로젝트 많아짐
• 이것들을 잘 가져다 쓰면 개발 쉽고 편하고 빠르게 할 수 있음
• 가져다 쓰려면 임포트 할줄 알아야함.
• 임포트는 외부 자원을 가져다 쓴다는 쓴다는 의미

---

라우터 간단 이해

• [ 라우터 = route + er ]은 웹페이지의 길을 알려주는 친구
• 화면전환을 할 수 있게 도와줌.
• 웹페이지의 길은 요 슬래시('/')로 주소를 표시한다.
  • 예를 들면 요런느낌
  • 친구집에 갔는데 화장실을 가고싶다. -> 친구집주소/화장실
  • 친구집에 갔는데 요리를 하고 싶다. -> 친구집주소/부엌
• 웹 상에서는 이런 느낌으로 작동하게 된다.
  • 로그인 버튼 클릭
    -> 라우터에게 로그인 페이지로 이동하고 싶다고 전달
    -> 라우터가 '웹페이지주소/로그인' 페이지로 이동시켜줌
  • 메인 버튼 클릭
    -> 라우터에게 메인 페이지로 이동하고 싶다고 전달
    -> 라우터가 '웹페이지주소/메인' 페이지로 이동시켜줌
    

---

페이지를 만들자

• 개발 = 작고 단순한 레고블럭을 쌓아서 크고 복잡한 프로그램 만드는 작업
• 프로젝트 복잡도에 따라, 개발하는 사람의 취향에 따라 스크립트를 페이지 하나로 사용하는 사람도 있고, 페이지라는 블럭을 구성하는 작은 단위 블럭으로 사용하는 사람도 있음.
• 일단은 스크립트 = 페이지로 생각하고 만들어보자. 단순하게.
• 스크립트를 만들어주자. src폴더 안에 page 폴더를 만들고
• 그 안에 page_main.js / page_profile.js / page_contents.js 세개 스크립트 만들기~
  (스크립트를 어떤 식으로 명명할지는 자유이지만, 나는 요런식으로 분류해주는걸 선호함.)
• app.js를 가장 밑바닥 판때기 박아두고 상황에 따라 위에 만들어 놓은 녀석들을 덮었다가 치웠다가하는 식으로 사용할거
  
  • 여자사람 = app.js
  • 그 위에 바꿔입는 옷들 = page_main.js, page_profile.js, page_contents.js

---

페이지를 세팅하자

• 페이지를 전환했을 때 적어도 어떤 페이지로 이동했는지는 확인해야하니까
• 페이지 기본세팅을 해보자. 여기가 main이구나, profile이구나, contents구나 정도는 알 수 있게
• 아래 그림처럼 각각 페이지에 저 코드 입력해주면됨.
  
• export는 import의 반댓말. 요 블럭조각을 밖에서 사용할 수 있게 내보낸다는 의미임.
• 요 표시를 안해주면 밖에서 가져다 쓸 수 없음.
• 보통 스크립트를 보면 위쪽에 import가 있고, 중간에 function이 있고, 아래에 export가 있는데
  • import로 외부 개발도구/자원을 가지고 와서
  • function에서 레고블럭을 만든다음
  • export로 다른 데서 쓸수있게 뱉어주는
• 요러한 로직이 담긴 구조이다. 순서 바뀌면 오류터짐 ㅋㅋ
• 어케보면 드래곤볼 호이포이 캡슐같은 느낌? 캡슐을 던지면 컴포넌트가 튀어나온다는 점에서~~
  

---

라우터를 설치하자

• 라우터를 쓰려면 먼저 라우터라는 외부자원을 프로젝트에 설치해야함.
• 외부 개발도구 설치할 때 npm이라는 패키지 매니저를 사용해야한다는건 1회차에서 알려줬음.
• vs code 터미널 열고, npm install react-router-dom 입력해서 라우터 설치하기
  

---

라우터를 임포트하자

• 이제 준비가 다 되었으니 라우터를 적용해보자.
• 우리 웹 어플리케이션의 가장 밑바닥이 될 index.js, app.js를 열자
• 상단에 각각 요것을 입력

  • index.js
    => import { BrowserRouter } from "react-router-dom";
  • app.js
    => import { NavLink, Routes, Route } from "react-router-dom";

• 라우터에 사용하는 도구들을 불러오는 코드. 이것들이 뭔지는 걍 쓰면서 알아보자.

---

라우터 기본세팅 : BrowserRouter

• BrowserRouter는 프로젝트의 가장 상위 블럭을 감싸주는데 사용한다.
• 걍 기본 세팅이라고 생각하고 써보자.

  • index.js
    => <BrowserRouter><App/></BrowserRouter>

• 요로코롬 App.js를 감싸준다.

---

길안내를 요청하자 : NavLink

• NavLink는 내가 이동하고 싶은 곳을 라우터에 전달하는데 사용한다.
• 버튼을 누르는 행위 = 라우터에게 내가 가고싶은 곳을 알려주는 행위
• 사용법은 간단. 버튼을 NavLink로 감싸주면 된다.

  • app.js
    => <NavLink to="/main"><button>메인 페이지로 이동</button></NavLink>

• 버튼을 누르게 되면 to에 설정된 주소로 이동해달라고 라우터에게 말하게 된다.
• profile, contents 페이지 버튼도 만들어봐라.
• NavLink를 누르면 주소창이 다음과 같이 변할 것이당.
  

---

길안내를 해주자 : Routes, Route

• 이제는 우리의 요청을 들어줄 라우터를 세팅해줘야 한다.
• 라우터에게 길을 알려줘야 라우터가 우리의 요청을 들어줄 수 있으니.

  • app.js
    => <Routes><Route path="/main" element={<PageMain/>}/></Routes>

• Routes는 요청에 따라 원하는 길 안내와 연결해주는 역할을 맡는다.
  • 그러니 Route를 <Routes></Routes>로 감싸주자.
• Route는 길 안내를 설정하는 역할을 맡는다.
  • /main이라는 주소로 가고싶다는 요청이 들어오면 <PageMain/>으로 안내해준다.
  • Routes안에 추가적으로 profile과 contents로 안내하는 Route들을 만들어봐라.
• 다 만든 뒤 NavLink를 누르면 화면이 다음과 같이 변할 것이당.
  

---

모달

모달 간단 이해

• 이런게 모달창이다. (아래 gif참고)
• 팝업창과 모달창의 차이는
• 팝업창은 새로운 윈도우를 열어서 새창을 보여주는거고
• 모달창은 하나의 윈도우에서 새창처럼 보여주는거
• 버튼 누르면 모달창 하나 열리는 기능 구현해보자

---

모달 설치하고 임포트하기

• vs code 터미널에서 npm install react-modal 입력해서 설치
• 바로 임포트까지

  • app.js
    => import Modal from 'react-modal';

---

모달 만들기

• 적당한 곳에 요 코드 입력 <Modal isOpen={true}>이거는 모달이다</Modal>
• 그러면 모달이 만들어지는데, 눈치 빠르면 대략 감 잡았겠지만, isOpen으로 모달 열고 닫고 설정할 수 있다.
  (당분간 디자인은 개나 줘버려... 모드로 간당 ㅋㅋㅋㅋ)
  
• 모달 열고 닫으려면 데이터(state) 건드려야함.
• 다음시간에 state 배우면서 모달 끄고 켜기 구현해보자. 이번주는 여기까징

---

나가기

• 이렇게 차곡차곡 프로젝트가 빌딩되는 과정을 함께 밟으면
• 필요한 때 필요한걸 알려주면서 배울 수 있음.
• 자연스럽게 필요하지 않은건 안 알려줄 수 있음.
• 꽤 좋은 방법이라고 생각한다.
• 다만 빌딩하는 과정에서 기본적인 내용들이 전달되기 전까지는 속도가 꽤 걸린다 ㅋㅋㅋ
• 진짜 전달하는데 걸리는 시간 * 5 = 정리하는데 걸리는 시간...
• 그럼에도 언젠가 도움이 되겠지 하며 정리를 ~~~
• 아 그리고. 뭔가를 하는 방법을 알려주는거는 의미 없다.
• 뭐를 할 수 있는지를 알려주고, 그 방법은 스스로 찾는 방법을 알려줘야 한다.