nanoid Link
https://www.npmjs.com/package/nanoid
우선 nanoid를 쓰기위해서는 설치를 해줘야 하니
터미널에 명령어 입력을 해줍시다
> npm i nanoid
설치가 완료된 걸 확인하려면
> npm nanoid -v
를 입력해주면 설치된 nanoid의 버전을 확인할 수 있습니다
제대로 나온다면 설치가 완료된 것!
저는 8.0.0
버전으로 나오네요 (2021.12.05)기준
이제 nanoid설치는 됬고, 코드를 만들어서 nanoid를 활용해 봅시다.
본인이 사용할 코드부분 최상단에 import
를 일단 해줍시다
그리고 간단한 메소드를 하나 만들어줍니다.
import { customAlphabet } from "nanoid";
const nanoid = customAlphabet("01234567899abcedf", 6);
nanoid의 메소드를 활용할건데. cusmomAlphabet은 우리가 만든 변수명이되고
뒤에 들어가는 2개의 매개변수가 있는데, 첫번째가 변수의 형식, 두번째가 자릿수가 됩니다.
제가 설정한 방식으로는
랜덤으로 0~9까지 숫자와 a~f의 알파벳을 섞어서 6자리의 id가 생성됩니다.
그외의 방식으로 하고싶은 분들은 본인이 따로 형식을 만들어서 첫번째 자리에 만들어서 넣으시면 됩니다.
특수기호를 넣고 싶다면
const nanoid = customAlphabet("01234567899abcedf|_-", 8);
이런식으로 특수기호도 섞어서 넣어주시면 됩니다.
이제 ReactHook의 useEffect
와 useState
를 이용해서 input
에 띄워 볼겁니다.
useEffect
를 미리 import
해주시고
setForm를 통해서 상태관리를 모두 해줄건데 여기서는 nanoid만 보여줄거니까 useState
에 code:""
하나 넣겠습니다.
처음 code는 빈값으로 만들어주고요.
그리고 useEffect
를 통해서 nanoid함수를 통해 아까우리가 만들어준 customAlphabet
메소드를 통해서 만들어진 형식의 id를 그대로 code :""
한테 전달해줘서 상태를 변화시켜주는 겁니다.
처음에 빈값이었던 code가 이제 내가 만들어준 형식을 받아서 빈값이 아니게 되겠죠?
setForm을 통해서 상태가 변화됩니다.
const [form, setForm] = useState({
code: "",
});
useEffect(() => {
setForm((prev) => ({ ...prev, code: nanoid() }));
}, []);
이제 준비는 모두 끝났고 input
태그 안에 value로 props를 전달해주면 제대로 나오게 됩니다.
value={(form.code)}
를 추가해주시면 제대로 나오시는 걸 확인하실 수 있을겁니다.
여기서 form태그를 사용했기때문에 return 위에 아래의 코드를 추가해주세요
const onSubmit = (e) => {
e.preventDefault();
};
그리고 return 내부에는 아래의 코드를 넣어준다면~
<div>
<form>
<input
className={cn("inputID")}
value={(form.code)}
onSubmit={onSubmit}
/>
</form>
</div>
의도치않게 다른 부분들도 포함되어 있습니다.
양해바랍니다
import styled from 'styled-components'
import { customAlphabet } from 'nanoid'
import { useEffect, useState } from 'react'
import LabelInput from '../components/LabelInput'
import CenterForm from '../components/CenterForm'
import Button from '../components/Button'
import { useHistory } from 'react-router'
import { createMeet } from '../api/Meet'
const nanoid = customAlphabet('0123456789abcdef', 6)
function Create() {
const [form, setForm] = useState({
name: '',
code: '',
})
useEffect(() => {
setForm((prev) => ({ ...prev, code: nanoid() }))
}, [])
const onChange = (e) => {
const value = e.target.value.replace(/[^a-z0-9]/g, '')
setForm({ ...form, [e.target.name]: value })
}
return (
<StyledCenterForm
submitButtonText="Create"
onSubmit={() => {
createMeet(form.code, form.name)
}}
>
<LabelInput
className="code"
label="Meeting Code"
size="big"
name="code"
value={form.code}
onChange={onChange}
onKeyDown={(e) => {
// ignore when e.key is not alphanumeric
if (!/[a-zA-Z0-9]/.test(e.key)) {
e.preventDefault()
}
}}
/>
<LabelInput
label="Name"
size="big"
name="name"
onKeyDown={(e) => {
if (!/[a-zA-Z0-9 ]/.test(e.key)) {
e.preventDefault()
}
}}
/>
</StyledCenterForm>
)
}
const StyledCenterForm = styled(CenterForm)`
.code {
input {
font-family: monospace;
text-transform: lowercase;
}
}
`
export default Create
input
입력창에 정상적으로 nanoid가 출력되는 것을 보실 수 있습니다!
nanoid는 랜덤으로 생성되기 때문에 새로고침할때 마다 계속 바뀌는것을 보실 수 있습니다..!
내가 지정한 형식 내에서 계속 바뀌게 됩니다.
이상 끝!