Tag 만들기

1. Tag component

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

생성은 부모 컴포넌트에서 담당하지만 삭제는 tag 내에 만들어줘야 했다. 물론 deleteTag함수도 prop으로 넘겨 받도록 했다.

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

2. tags component

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

delete를 구현하는 것도 비슷하게 하면 된다. 전체 배열에서 클릭한 tag와 동일한 것을 찾아 그것을 제외한 나머지를 다시 배열로 담으면 된다.(filter)

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)]);
};

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

3. 완성

만들때마다 배경색이 달라지게 하면 어떨까 고민했다. 더 예쁘지 않을까.