[Next.js+NextUI] React에서 한글만 글자가 두 번 써지는 현상

보통 useState를 이용해 input 요소 안의 글자를 입력하는 것으로 알고 있어서  useState를 썼다.

그.런.데. 영어로는 잘 써지는데 한글은 꼭 두 번씩 글자가 써지는 현상이 일어났다. 

 

그리하여 검색의 검색을 거듭하여 알아보니, 한글이 유니코드이며, 한 글자에 2바이트 이상의 문자라서 그렇다고 한다. (참고로 영어는 한 글자에 1바이트..)

 

아무튼 한글을 입력하고, 받아올 때에는 useState가 아니라 useRef를 이용하여야 한다.

위와 같이 useRef를 이용하면 해결된다!!

 

아래는 전체 코드이다.

import { useState, useRef } from "react";
import { Button, Input, Card, Col, Row, Text, Spacer } from "@nextui-org/react";

function MakeExpense() {
  const [showInput, setShowInput] = useState(false);
  const [categoryValue, setCategoryValue] = useState("");
  const [expenseValue, setExpenseValue] = useState("");
  const [memoValue, setMemoValue] = useState("");

  const categoryRef = useRef("");
  const expenseRef = useRef("");
  const memoRef = useRef("");

  const handleButtonClick = () => {
    setShowInput(prev => !prev);
  };

  const handleCategorytChange = event => {
    setCategoryValue(categoryRef.current.focus());
  };

  const handleExpenseChange = event => {
    setExpenseValue(expenseRef.current.focus());
  };

  const handleMemoChange = event => {
    setMemoValue(memoRef.current.focus());
  };

  const handleInputSubmit = event => {
    event.preventDefault();
    setShowInput("");
    setCategoryValue("");
    setMemoValue("");
    setShowInput(false);
  };

  return (
    <div className="navbar">
      {showInput ? (
        <Card>
          <Card.Header>
            <Text b>사용한 돈 등록하기</Text>
          </Card.Header>
          <Card.Divider />
          <Card.Body css={{ py: "$10" }}>
            <form onSubmit={handleInputSubmit}>
              <Row>
                <Input
                  type="text"
                  ref={categoryRef}
                  value={categoryValue}
                  onChange={handleCategorytChange}
                  label="카테고리"
                />
                <Spacer></Spacer>
                <Input
                  type="text"
                  ref={expenseRef}
                  value={expenseValue}
                  onChange={handleExpenseChange}
                  label="가격"
                />
              </Row>
              <Spacer />
              <Input
                type="text"
                ref={memoRef}
                value={memoValue}
                onChange={handleMemoChange}
                label="메모"
              />
            </form>
          </Card.Body>
          <Card.Divider />
          <Card.Footer>
            <Row justify="center">
              <Col>
                <Button auto light onClick={handleButtonClick}>
                  취소
                </Button>
              </Col>
              <Col>
                <Button auto type="submit" onClick={handleButtonClick}>
                  등록
                </Button>
              </Col>
            </Row>
          </Card.Footer>
        </Card>
      ) : (
        <Button onClick={handleButtonClick}>+</Button>
      )}
      <style jsx>
        {`
          .navbar {
            justify-content: center;
            align-items: center;
            width: 100%;
          }
        `}
      </style>
    </div>
  );
}

export default MakeExpense;

그 결과로 드디어 잘 작동하게 되었다.