기록을 합시다.
[Next.js] NextUI 시작하기 본문
리액트를 인터넷 강의로 배우기는 했지만..(Udemy, 니코쌤.. )
역시 내가 UI 구성에 너무 약해서 그냥 있는 걸 활용하기로 했다.
그래서 내가 바로 찾아온 건 NextUI!!
NextUI - Beautiful, fast and modern React UI Library
Make beautiful websites regardless of your design experience.
nextui.org
검색을 해보니 이 라이브러리가 나온지 그렇게 오래되지는 않았다고 한다. 실제로 Document를 봐보면 아직 준비중인 컴포넌트들도 있다. 물론 그 컴포넌트들 빼고도 충분하게 UI 구성이 가능하다. (그리고 쉬워보여서 내가 고름..)
일단은 NextUI를 시작하기 위해서는 두 가지의 준비 단계가 필요하다.
https://nextui.org/docs/guide/getting-started
Getting started | NextUI - Beautiful, fast and modern React UI Library
Get started with NextUI in the official documentation, and learn more about all our features!
nextui.org
이 문서를 보면 일단은 Next.js 프로젝트 구성부터 해야한다는 것을 알 수 있다.(영어가 편하시면 그냥 이 문서 보세여)
Next.js react용 프로젝트 구성 => NextUI 깔기 => _app.js와 _document.js 세팅을 해줘야한다.
1. Next.js 프로젝트 폴더 생성하기
npx create-next-app@latest(에러 뜨시는 분들은 에러에 적혀있는 커맨드들을 cmd에 적고 다시 적으시오.. 그럼 됨..)
2. Next.js 프로젝트 안에 들어가시고!!(cd 폴더명) NextUI 깔기.
npm i @nextui-org/react
3. pages 폴더가 생성 되어 있는데, 거기에 _app.js가 있을 것이다. 거기에 아래와 같은 코드를 붙여넣는다. 참고로 _app.js는 웹을 실행시킬 때 전체적인 페이지에 대한 설정을 해준다.
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }) {
return (
// 2. Use at the root of your app
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;
4. 아마 pages 폴더 안에 _document.js는 없을 것이다. 파일을 직접 생성한 다음, 아래 코드를 붙여넣으면 된다. 이것도 참고로 _document.js는 html파일에 넣을 공통적인 것들을 설정해주는 파일이라고 생각하면 된다.
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles])
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
5. 한 번 해보기!
나는 Card 컴포넌트를 직접 구성할 CSS 실력이 없었으므로 NextUI가 너무 필요했었다. 참고로 input도 너무 못생겼지만 내가 건들면 더 못생겼어서 NextUI의 Input 컴포넌트가 너무 유용했다.
아래는 나의 예시 코드다. (쓴 것만 보세요.. 내 코드 이상한 거 아니까.. 태클 금지.. 눈물 나네)
import { useForm } from "react-hook-form";
import axios from "axios";
import { Input, Button, Spacer, Grid, Card } from '@nextui-org/react';
export default function SigninForm() {
const { register, handleSubmit } = useForm();
const onSubmit = data => {
const { email, password } = data;
.
.
.
};
return (
<Card>
<form onSubmit={handleSubmit(onSubmit)}>
<Grid.Container gap={4} justify="center">
<Grid>
<Input
{...register("email", {
required: "이메일을 적어주세요.",
maxLength: 30,
pattern: {
value: /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i,
message: "올바른 이메일 형식이 아닙니다.",
},
})}
type="text"
label="이메일"
placeholder="example@gmail.com"
className="email-input"
width="280px"
css={{float:"center"}}
/>
<Spacer y={0.8}></Spacer>
<Input.Password
{...register("password", {
required: "필수 응답 항목입니다.",
minLength: 8,
maxLength: 30,
})}
placeholder="password"
label="비밀번호"
className="password-input"
width="280px"
css={{float:"center"}}
/>
<Spacer y={0.8}></Spacer>
<Button auto type="submit" css={{float:"right"}}>로그인</Button>
</Grid>
</Grid.Container>
</form>
</Card>
);
}문서 내에 소개하고 있는 컴포넌트들을 그냥 import 시켜서 쓰기만 하면 된다. 아주 간단하다.
그러니까 문서를 뒤적거리다가 나한테 필요해 보이는 거면 그냥 import 시켜서 쓰면 되는 것이다.
아무튼 위의 코드의 결과는 아래와 같다.
근데 내가 하고싶은 말은 단 하나다.
NextUI는 그냥 문서만 보시면 됨.
'공부 > javascript' 카테고리의 다른 글
| [Next.js] 날짜 필터링 오류 해결하기(Feat. new Date()) (0) | 2023.04.11 |
|---|---|
| [Next.js+NextUI] ProgressBar(가로 그래프)로 진행 정도를 표현하기 (3) | 2023.04.10 |
| [Next.js] TypeError : handle% is not a function 오류 고치기 (0) | 2023.04.09 |
| [Next.js+NextUI] React에서 한글만 글자가 두 번 써지는 현상 (0) | 2023.04.09 |
| mysql2에서 Error: Bind parameters must be array if namedPlaceholders parameter is not enabled 해결하기 (0) | 2023.03.31 |
