[Next.js + TS] today i learned 7/28: 개발용어사전 초기세팅(2) 관련용어 태그 작업

초기세팅에서 이전에 해뒀던 관련용어 태그 작업을 리팩토링을 진행했다.

기능은 값을 적고 엔터를 누르거나(+콤마, 스페이스바) 버튼을 클릭했을 때 배열에 들어가게 되며, 입력했을 때 이미 배열에 있는 값이라면 추가되지 않게끔 하는 작업이다.

 

원래 바닐라 자바스크립트에서 진행했던 것을 CRA에서 진행을 하게 되었는데, 우선 예전에 해뒀던 것을 토대로 다시 진행했다.

import React, { useState } from "react";
import "./App.css";

const TermRelated = () => {
  const [relatedTerms, setRelatedTerms] = useState([]);
  const [inputTerm, setInputTerm] = useState("");
  const [id, setId] = useState(0);

  const onChange = (e) => setInputTerm(e.target.value);

  const onClick = () => {
    const trimmedInputTerm = inputTerm
      .trim()
      .replace(/[^ㄱ-힣a-zA-Z0-9+#]/gi, "");
    if (!trimmedInputTerm) {
      return;
    }
    const nextRelatedTerms = relatedTerms.concat({
      id: id,
      text: inputTerm.trim().replace(/[^ㄱ-힣a-zA-Z0-9+#]/gi, ""),
    });

    setRelatedTerms(nextRelatedTerms);
    setInputTerm("");
    setId(id + 1);

    console.log(typeof nextRelatedTerms);
    console.log(trimmedInputTerm);
    console.log(nextRelatedTerms);
  };

  const onKeyPress = (e) => {
    if (
      (e.charCode === 188 || e.charCode === 13 || e.charCode === 32) &&
      e.target.value
    ) {
      onClick();
    }
  };

  const onRemove = (id) => {
    const nextRelatedTerms = relatedTerms.filter(
      (relatedTerms) => relatedTerms.id !== id
    );
    setRelatedTerms(nextRelatedTerms);
  };

  const relatedTermsList = relatedTerms.map((relatedTerms) => (
    <li key={relatedTerms.id}>
      {relatedTerms.text}
      <button onClick={() => onRemove(relatedTerms.id)}>X</button>
    </li>
  ));
  return (
    <>
      <input
        value={inputTerm}
        onChange={onChange}
        onKeyPress={onKeyPress}
        maxLength="15"
      />
      <button onClick={onClick}>추가</button>
      <ul id="list_terms">{relatedTermsList}</ul>
    </>
  );
};

export default TermRelated;

지금.. concat으로 모은 배열의 text요소에 접근해야되는데, 그걸 못하고 있다. 근데 금방 해결할 수 있을 것 같다.

해결했다.

  const onClick = () => {
    for (let i = 0; i < relatedTerms.length; i++) {
      if (relatedTerms[i].text === trimmedInputTerm) {
        alert("중복");
        setInputTerm("");
        return;
      }
    }
    const termsArray = relatedTerms.concat({
      id: id,
      text: inputTerm.trim().replace(/[^ㄱ-힣a-zA-Z0-9+#]/gi, ""),
    });
    setRelatedTerms(termsArray);
    setInputTerm("");
    setId(id + 1);
  };

배열 내 딕셔너리 형태로 되어있으므로, 우선 relatedTerms[i]에 접근한 뒤 .text로 딕셔너리 안에 있는 값과 지금 내가 input으로 쓴 값을 비교해서 같을 경우 중복 처리를 하고 아무 일도 일어나지 않게 하였다.

 

 

우선 JS + CRA로 하고, 끝내면 타이핑해서 TS + CRA로 바꿔야겠다. 여기서 더 되면 TS + Next로도 바꿔봐야지,, 근데 이거 보고 있는 거 거의 1년은 된 것 같다. 그때는 그냥 코드 복붙하기 바빴는데, 지금은 그래도 생각이라는 걸 좀 하는구나 하고 느꼈다.