레슨 9: ChatGPT로 앱에 내비게이션 추가（리액트에서 라우팅 설정하고 탐색、 페이지 렌더링하기）

유저이름이 바꿀 때마다 아래쪽 문구에 반영됩니다

chat GPT에게 App.js 파일에 코드를 모두 복사해서 이렇게 물어볼게요,

‘아래와 같은 코드에서 리액트에서 폼을 전송했을 때 다른 페이지로 username과 password 값이 있을 때 라우팅하는 로직을 추가해주세요’


이렇게 코드를 입력하고 이번에는 답변이 라우팅 관련 내용 위주로 나오는지 확인해보겠습니다.
라우팅은 서버에서 클라이언트 요청을 적절한 핸들러 또는 함수로 연결해주는 역할을 해요.

좋아요. 이제 우리는 전송 버튼을 클릭했을 때 Welcome 페이지를 보여주고, 
그 후에 게임을 가져오는 것을 원합니다. 함께 코드를 보면서 작성해보겠습니다.

먼저, 이를 위해 react-router-dom이 필요합니다. 터미널을 열고 'my-app' 디렉토리로 
이동한 다음, react-router-dom을 설치하겠습니다. 아래와 같이 입력해주세요.

그래요, 맞아요. 다음으로는 BrowserRouter를 가져와야 합니다.
 BrowserRouter로 감싸는 방법은 여러 가지가 있습니다.
 App 컴포넌트 내부에서 감싸는 방법도 있지만, 더 적절한 방법은 index 페이지에서
 BrowserRouter를 가져오는 것입니다. 
왜냐하면 index 페이지에서 App 컴포넌트를 렌더링하기 때문이죠. 
그래서 저는 index 페이지에서 BrowserRouter를 가져올 거예요.

Router, Route, Switch를 사용하지 않을 예정이므로,
단순히 "import { BrowserRouter } from 'react-router-dom';" 라고
입력해서 BrowserRouter를 'react-router-dom'에서 가져올게요.

여기에서 BrowserRouter로 App을 감싸고 저장할 거예요. 코드를 이렇게 수정해볼게요

제 App 컴포넌트로 가서 전송 버튼을 눌렀을 때 Welcome 페이지가 렌더링되도록 만들어보겠습니다. 

어떻게 해야 할까요? react-router-dom 라이브러리의 useHistory 훅을 사용하면 다른 경로로 이동할 수 있습니다. 

간단히 말하면 이동할 경로를 useHistory에 전달하면 됩니다.

useHistory 훅은 브라우저의 기록(history)을 조작하여 페이지 이동을 관리하는 데 사용됩니다. 

이를 통해 컴포넌트 내에서 동적으로 라우팅을 제어할 수 있습니다. 

chat GPT에게 "useNavigate 사용법 최대한 상세하게 알려주세요"라고 물어보면 사용법에 대해 자세히 알려줄 수도 있습니다.

예전 버전에서는 useHistory를 사용했지만, 최신 버전에서는 useNavigate로 변경되었습니다. useHistory와 useNavigate의 차이점에 대해 궁금하신 분들도 계실 수 있습니다. 그래서 질문하시면 useHistory와 useNavigate의 차이점을 알려줄 수도 있습니다.

이제 App.js로 돌아가서 몇 가지 필요한 모듈을 임포트해보겠습니다. 우선 useNavigate를 가져오고, 라우트 설정이 필요하므로 Route도 가져오겠습니다. 또한, 여러 경로를 처리하기 위해 Routes도 가져와야 합니다. 이 두 모듈은 모두 필요합니다.

두 모듈은 모두 필요합니다. 하지만 코드를 실행하면 오류가 발생할 것입니다. 실행 시 "Routes"와 "Route"를 사용할 수 없다는 오류가 나타날 것입니다. 또한, "useHistory"를 사용할 수 없기 때문에 실행할 수 없다는 이유로 나올 것입니다. 이 의미는 바로 전송 버튼을 클릭했을 때 폼을 전달하려는 라우팅 시점을 원하는 것이라는 것입니다. 그때 다른 페이지로 이동하고자 합니다. 따라서 새로운 변수로 "navigate"라는 상수를 만들어야 합니다.

그리고 로그 아래에서 "navigate()" 함수를 사용하여 원하는 엔드포인트로 이동할 것입니다. 우리는 새로운 엔드포인트를 만들 것이고, 환영 페이지가 있는 곳으로 이동할 것입니다. 그래서 엔드포인트 이름을 'welcome'으로 지정하겠습니다.

이제 환영 페이지의 경로를 설정해야 합니다. 이는 Route 컴포넌트의 path 속성으로 설정할 수 있습니다. 반환문 안에 있는 클래스 부분을 보면 WelcomePage가 있습니다. 여기에 path 속성을 추가해야 합니다.

여기서 Routes 컴포넌트로 모든 라우트를 감쌀 것입니다. 먼저 Routes 컴포넌트를 생성하고, 그 안에 개별 Route를 추가합니다. 여러 개의 Route를 추가할 수 있습니다. 각 Route에는 다양한 경로(path)를 지정할 수 있습니다.

첫 번째 경로인 환영 페이지 경로에 해당하는 Route를 추가하겠습니다. element 속성을 추가하고, element에는 환영 페이지 컴포넌트를 가져와서 설정해야 합니다. 우리가 원하는 것은 WelcomePage 컴포넌트 전체를 가져오는 것이므로, 해당 컴포넌트를 JSX 형식으로 중괄호로 감싸서 element에 넣을 것입니다.

좋아요. 환영 페이지의 경로를 지정했습니다. 마지막으로 해야 할 일은 Form의 action 속성을 action='/WelcomePage'로 설정하여 환영 페이지 경로로 지정하는 것입니다. 이제 코드를 저장하고 Chrome 브라우저로 이동하여 화면을 새로고침하면 이전에 있던 환영 문구가 사라집니다. 사용자 이름과 비밀번호를 입력하고 전송 버튼을 클릭하면 새로운 페이지인 '게임에 오신 걸 환영합니다 hyochang님'이라는 페이지가 렌더링됩니다.

좋아요. 그러나 아주 중요한 문제가 있습니다. 아마도 개발자 도구를 살펴보셨을 때 이상한 오류 메시지가 나타나는 것을 확인하셨을 겁니다. 메시지는 '일치하는 라우트가 없습니다'라고 나타나는데요. 이 메시지는 폼에 무언가를 입력하고 삭제할 때마다 문제가 발생한다는 경고입니다.

여기에 뭔가 입력하면 기본 경로인 "/"에 해당하는 라우트가 없다는 메시지가 출력됩니다. 기본 경로인 "/"를 다른 페이지로 설정하는 것은 좋지 않습니다. 이 경로는 주로 localhost:3001과 같은 경로를 의미합니다. 그래서 이 부분에 대해 ChatGPT에게 물어보는 것이 좋습니다. ChatGPT로 가서 다음과 같이 리액트 코드에 라우트를 추가했는데 개발 도구에 다음과 같은 경고 메시지가 나옵니다. 경고 메시지를 복사해서 ChatGPT에 붙여넣으면 됩니다.

이제 이 경고와 관련된 다른 내용도 알려드릴게요. 이어서 나온 내용에서는 Switch, Route 컴포넌트를 
사용하여 경로를 설정하고 'exact' 속성을 추가하여 정확한 경로와 일치하도록 연결하라고 안내하고 있습니다. 이 조언은 유용한 것이지만, 더 중요한 부분은 이 내용입니다. 경로에 해당하는 라우트가 없으면 발생하는 오류인데, 실제로 그 부분을 구현하지 않았기 때문에 오류가 발생한 것입니다. 이 오류를 수정하기 위해 Route 코드를 복사하여 붙여넣고, 경로를 변경하여 기본 경로에 라우트를 추가하면 됩니다. 기존에 있던 h1 태그에 다시 환영 문구를 넣어서 표시하면 되는데, 제가 '커넥트 4 게임에 오신 것을 환영합니다!!'라고 쓸게요. Routes 태그를 반환값의 div 태그 바로 아래에 옮겨주도록 하겠습니다.

코드를 저장한 후 Chrome에서 페이지를 새로고침하면 오류가 사라지고, 환영 문구가 나타납니다. 또한, 새로운 사용자 이름을 추가하고 전송 버튼을 클릭하면 "게임에 오신 걸 환영합니다, korea 님"이 표시되고 환영 페이지로 전환됩니다.

DB 업데이트, 라우팅, 페이지 이동과 인증을 제외한 모든 기능을 구현했어요. 
이제 앱이 정상적으로 동작하고 라우팅도 성공했습니다. 다음으로는 "커넥트 4"라는 게임으로 넘어갈 준비가 된 것 같아요. 다음 섹션에서는 좀 다른 도전을 해보려고 해요.

 커넥트 4 게임 코드가 있는데, 저장소에서 해당 코드를 다운로드 받아주세요.
 이번에도 ChatGPT의 도움을 받아 커넥트 4를 완성해 볼 건데, 지금까지와 같이 진행할 거에요. 
커넥트 4에는 구현해야 할 요소가 많기 때문에 완성하는 데 시간이 좀 걸릴 거예요. 다음 시간에 다시 만나요!