[React] 아이언맨도 사랑하는 nanoid 사용하기

: ) YOUNG·2021년 12월 5일

NanoId React 프로젝트

React

목록 보기

12/13

궁금하신 점이나 고칠 부분이 있다면 언제든지 댓글 남겨주세요!

nanoid Link
https://www.npmjs.com/package/nanoid

1. nanoid 설치

우선 nanoid를 쓰기위해서는 설치를 해줘야 하니
터미널에 명령어 입력을 해줍시다

> npm i nanoid

설치가 완료된 걸 확인하려면

> npm nanoid -v

를 입력해주면 설치된 nanoid의 버전을 확인할 수 있습니다
제대로 나온다면 설치가 완료된 것!

저는 8.0.0 버전으로 나오네요 (2021.12.05)기준

2. nanoid 활용

이제 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);
이런식으로 특수기호도 섞어서 넣어주시면 됩니다.

3. nanoid 코드 작성

이제 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