steadily
451
2021-07-29 12:25:54 작성 2021-07-29 12:26:34 수정됨
2
117

JavaScript에서 딕셔너리를 concat한 뒤 그 안의 요소에 접근하는 방법이 궁금합니다.


안녕하세요.

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;

이런 방식으로 input값을 id와 함께 concat하여 새로운 변수에 저장했습니다. 이제 [{}]의 형태로 저장이 될텐데요. 저는 여기에서.. text의 값을 가져오고 싶습니다. 이유는, 기존에 concat하여 합쳐진 배열 내부에 있는 값과 같은지 여부를 검사해서 같다면 추가를 시키지 말아야 하기 때문입니다.

a를 입력한 뒤 확인한 nextRelatedTerm의 결과입니다. 저는 여기에서 text의 값과 새로 추가될 input값을 비교하고싶습니다.

어떻게 할 수 있을까요..??

0
  • 답변 2

  • 나후나
    312
    2021-07-29 13:14:31

    질문이 정확하게 이해가 되지 않네요.. 


    nextRelatedTerms[0].text 하면 접근이 되는거 아닌가요???


    배열 전첵검사는 filter 메소드를 사용해보세요..

  • steadily
    451
    2021-07-29 13:25:34

    나후나 선생님 답변 감사합니다.

    네네 질문 올리고서 보니 for문 돌면서 nextRelatedTerms[i].text와 비교하면 되겠다는 생각이 들어서 하고 있었습니다. 감사합니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.