React - Input 값을 Tag로 만들기

구현할 예제

티스토리에도 글쓰기를 할 때 태그를 입력할 수 있는 부분이 있습니다.

태그를 입력하고 엔터를 치면 태그가 등록되고 곧장 다음 태그를 입력할 수 있도록 커서가 이동하죠.

비슷한 기능을 하는 Tag 생성 Input입니다.

 

1. Tag component

짧은 키워드를 담는 tag component를 먼저 만들어줍니다. 부모컴포넌트로부터 prop을 전달받아 렌더링 할 예정입니다.

생성은 부모 컴포넌트에서 담당하지만 삭제는 tag 내에 있어야겠죠. deleteTag함수도 prop으로 넘겨 받도록 합니다.

const onDeleteTag = () => {
  onDelete(tag);
};

return (
    <li className={styles.tagcomponent}>
     <span>
      {tag.text}
     </span>
     <button onClick={onDeleteTag}>x</button>
    </li>
)

 

2.  Input component

tag를 추가하는 건 todolist를 만드는 것과 동일합니다. useState를 이용해 tags의 상태관리를 하고, input에 값이 입력되면 tag obejct를 생성, 원래 있던 tags 배열에 넣어 state를 업데이트 해줍니다.

delete를 구현하는 것도 비슷하게 하면 됩니다.

전체 배열에서 클릭한 tag와 동일한 것을 찾아 그것을 제외한 나머지를 다시 배열로 담으면 됩니다.(filter method이용)

const onSubmit = e => {
	if (e.key === "Enter" && e.target.value !== "") {
		setTags([...tags, { id: id, text: e.target.value }]);
		setId(id => id + 1);
		e.target.value = "";
	}
};

const onDeleteTag = tag => {
	setTags([...tags.filter(item => item.id !== tag.id)]);
};

return (
    <div className={styles.tagContainer}>
     <ul className={styles.tags}>
       {tags.map(tag =>
        <TagComponent key={tag.id} tag={tag} onDelete={onDeleteTag} />
    )}
     </ul>
     <input
       className={styles.textInput}
       onKeyUp={onSubmit}
       placeholder="Please enter to add tags"
     />
    </div>
)