Discord.js를 이용해 디스코드 봇을 만들고 난 후, 뭘 만들면 좋을지 고민하던 중 웹 페이지에서 초대링크와 사용법 정도를 볼 수 있으면 좋겠다는 생각이 들어 react를 이용한 페이지를 만들어보기로 했다. 그 개발과정을 함께 알아보도록 하자.
처음부터 끝까지 모든 과정을 다 적어서 올리진 않고, 리액트 초심자로서 개발하면서 막혔던 부분 위주로 적어볼 예정이다.
초기 세팅
react를 이용하기로 마음먹었으니 가장 먼저 리액트 프로젝트를 만들어 줘야 할 것이다.
npx create-react-app PROJECT_NAME
PROJECT_NAME으로 적은 곳에는 원하는 프로젝트 이름(폴더 이름)을 적으면 된다.
VSC에서 프로젝트 폴더를 열어준 후 터미널을 열고 npm run start를 입력하면...
React에서 자동으로 생성해준 초기 페이지가 뜬다.
실행을 멈추고 터미널에서 다른 명령어(라이브러리 설치 등)를 실행하고 싶으면 ^C(컨트롤 C)를 눌러주면 된다.
이제 사용하지 않는 파일들을 전부 지워주고 아래와 같이 App.js, index.js, index.html만 남겨주자.
App.js와 index.js, index.html에서 방금 삭제한 파일들이 사용되는 부분을 지워주면 초기 세팅이 끝난다.
function App() {
return <div>성공~!</div>;
}
export default App;App.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);index.js
리액트 이해하기
그럼 이제 우리가 웹페이지를 만드는 것을 React가 어떤 방식으로 도와주는지 알아보자.
html, javascript, JSX에 대한 기초적인 설명은 생략하도록 하겠다. 기초적인 내용에 대한 이해가 필요하다면 잘 정리된 수많은 글들이 있으니 한번씩 읽어보도록 하자.
먼저 App.js에서 <div>성공~!</div>를 리턴하는 함수, App을 반환하는데, 이를 index.js에서 가져와서 render해주는 것을 볼 수 있을 것이다.
index.html의 body 부분을 보면 "root"라는 이름의 div 하나만 있는 것을 확인할 수 있는데, 이 root에 App을 render, 쉽게 말해 띄우라는 명령을 내리고 있는 것이다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
이 밖에도 component, DOM, JSX 등 리액트에 관해 알아야 할 내용이 많지만, 쉽고 간결하게 설명할 자신이 없고, 또한 필자 또한 초보이기 때문에 부정확한 정보를 전달하게 될 수 있어 나머지 설명은 생략하도록 하겠다. 인터넷의 바다에는 멋지게 정리된 수많은 글들이 있으니 잘 읽어보도록 하자.
대충 설명하자면 component는 html(정확히는 JSX)를 리턴하는 함수이고, 이 함수를 블럭처럼 쌓아서 웹페이지를 구성할 수 있다.
위에 적힌 코드에서 App이 <div>성공~!</div>를 반환하고 있기 때문에, 실행된 웹페이지에 우리가 입력한 문구가 그대로 뜨는 것을 볼 수 있을 것이다.
react-router-dom
이번에 만들어볼 페이지는 하나의 페이지로만 이루어진 SPA(Single Page Application)이 아니라, 여러 개의 페이지로 구성된 전통적인 웹 어플리케이션이다. 따라서 페이지에서 페이지로의 이동을 도와주는 라이브러리를 설치할 것인데, 먼저 터미널에 아래 명령어를 입력해주자.
npm i react-router-dom
이제 src 폴더에서 routes 폴더를 생성해주고, Home.js와 Detail.js 파일을 각각 생성해준다.
component 함수명의 첫 글자는 무조건 영문 대문자이다. 꼭 기억하자. (파일명은 정해진 규칙이 없지만 함수명과 동일하게 설정하는게 보기 편하기에..)
아래 코드를 참고해 Home, Detail이라고 각각 나오도록 간단하게 먼저 만들어놓고, 이제 Router를 설정해주도록 하자.
export default function Detail() {
return <div>Home Page</div>;
}Home.js
아래 코드처럼 BroserRouter, Routes, Route를 각각 불러와주고, 위에서 만든 component들도 불러와주고, App.js에서 아래 형식처럼 각각의 path, element를 설정해주면 된다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./routes/Home";
import Detail from "./routes/Detail";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/detail" element={<Detail />} />
</Routes>
</BrowserRouter>
);
}
export default App;
페이지 내에서 다른 페이지로 이동하고 싶을 때에는 Link 컴포넌트를 사용해도 되고, href를 통한 링크도 잘 작동한다.
개발을 처음 시작하면서 react-router-dom의 버전 때문인지 인터넷에 있는 예제들이 잘 작동하지 않는 경우가 있었다. 오류가 나거나 빈화면이 나오는 등...
react-router-dom v6.15.0, react v18.2.0 버전 기준으로 개발을 진행할 때 본 포스팅에서 사용한 방법대로 Router를 사용하면 정상적으로 작동할 것이다. 다음 시간에는 tailwind를 이용해서 css 디자인을 편하게 날먹하는 방법에 대해 알아볼 것이다.
'React' 카테고리의 다른 글
| React로 디스코드 봇 전용 웹페이지 만들기 (1) - tailwindCSS (0) | 2023.09.11 |
|---|