레슨 8: 데이터 가져오기 및 업데이트하기(ChatGPT에게 애플리케이션에 라우팅 기능 추가)

이제 남은 건 게임 그 자체와 라우팅(Routing)뿐이에요
라우팅은 인증 단계에 필요하죠
사용자 이름을 넣고 암호를 넣은 다음, 경로 변경(라우팅)이 필요합니다
우리는 이런 앱을 만들었어요, Chrome에서 입력 창에 이름과 암호를
입력하고 전송하면 입력한 정보가 데이터베이스에 성공적으로 추가됩니다


제가 하려는 건 사용자를 추가한 뒤에, 해당 사용자에게 게임에 온 걸 환영한다는 컴포넌트를
렌더링하는 겁니다

먼저 해볼 수 있는 건 chat GPT에게 물어보는 거죠
작성한 코드를 복사해서 다는 필요 없을 테니 필요한 부분만 가져갈게요
반환문만 가져가 보겠습니다

먼저 이걸로 해보죠, ‘아래와 같은 리액트 반환문이 app.js 코드에있을 때 헤더에는 게임에 오신 걸 환영합니다+username 님 라고 하고 username을 표시하는 페이지 컴포넌트를 추가해주세요'
이렇게 질문을 작성하고 밑에 아까 가져온 반환문코드를 붙여 넣을게요

ChatGPT가 뭐라고 하는지 봅시다

정확히 제가 하려고 했던 거예요
먼저 ‘WelcomPage’라는 새 컴포넌트를 만듭니다
속성(props)을 username을 받네요
다른 컴포넌트로 속성(props) 객체를 넘길 수 있는 게 리액트의 장점이죠

속성(props)는 한쪽 방향으로만 넘길 수 있습니다.
(컴포넌트가 여러 개 있을 때는 리덕스(Redux)를 사용)

username을 속성(props)으로 받아와서 헤더에 해당 메시지를 표시합니다.
그런 다음 앱에서 username 상태 변수를 WelcomePage에 넘겨주고
WelcomePage 컴포넌트에서는 그 변수를 받아 환영 문구와 사용자 이름을 앱 UI에
표시합니다

WelcomePage를 만들고 이름도 업데이트하고요

스크롤을 위로 올려서 답변 맨 위로 올라가봅시다
그럼 먼저 ‘WelcomPage.jsx’라는 새 컴포넌트를 만들어봅시다

자바스크립트 확장 문법을 쓸 거라서 .jsx로 했습니다

여기에 리액트 페이지를 만들 거예요

먼저 import './App.css'; 입력하여 스타일을 적용하겠습니다, 

그런 후  코드를 복사 하여 ‘WelcomePage’이름을 가진 함수를 만들겠습니다
그리고 저희는 이미 <h1>커넥트 4 게임에 오신 것을 환영합니다!!</h1> 라는 부문이 App.js에 있기때문에 지워주세
그러면 props 객체를 통해 사용자 이름을 받아올 수 있어요 그런 다음 저장 하시면
 ‘export default’로 WelcomPage 내보내 모듈처럼 쓸 수 있어요

 

이제 이 함수, 함수형 컴포넌트를 우리 앱과 통합해야 합니다
App.js로 돌아가서 통합해 볼게요

어떻게 통합해야 할까요?
먼저 이 컴포넌트를 ‘import WelcomePage from ‘./welcome’;’입력하여 임포트해야 합니다, 라이브러리처럼요

그럼 이제 return 문에서 새 컴포넌트를 사용해 환영 문구가 잘 나오는지부터
봐야겠죠, 아래 있는 '커넥트 4 게임에 오신것을 환영합니다!!'환영 문구 대신에 h1 태그 자리에
WelcomePage 컴포넌트를 넣고 props 속성을 모두 넘겨주는 겁니다

 

GPT에 return 부분을 복사 후 붙여넣어주세

변경전>> 변경후

위와같이WelcomePage 컴포넌트를 넣고 username을 속성을 username으로 지정하여 속성을 모두 넘겨 줍니다.
이렇게 코드를 저장하고 Chrome으로 가면 사용자 이름에 coding을 넣으면 뒤에 coding이 나옵니다,

암호에도
yooncoding을 넣고 전송하면

yooncoding이 데이터베이스에 저장됐다고 나옵니다
실제로 저장됐는지 확인해보죠

mongodb 데이터 클라우드로 가서 DB를 새로 고치고 밑으로 가보면 ‘yooncoding’이 있어요, 

이제 리액트 클라이언트 쪽에서 값을 넘겨줄 수 있어요

그런데 라우팅도 가능한가요?

아니죠, 라우팅 설정은 아직 안 했습니다, 하지만 새로운 함수형 컴포넌트를 만들었고 잘 동작합니다
동작할 뿐만 아니라 클라이언트 쪽에 업데이트되죠
다음 시간에도 많은 걸 살펴볼 겁니다