과제 - React Custom Component 📁

4. Tag

input 기능 구현

• input 창에 텍스트를 입력 후 Enter 키를 누르면 태그가 추가되어야 합니다. 마우스 클릭이 아닌 Enter 키를 통해 태그가 추가되도록 하며, Enter 키가 눌리면 태그를 추가하는 addTags 메서드가 실행되어야 합니다.
• addTags 메서드는 기본적으로 태그를 추가하는 기능 이외에 아래 세 가지 기능도 수행할 수 있어야 합니다.
• 이미 입력되어 있는 태그인지 검사하여 이미 입력되어 있다면 추가하지 말아야 합니다.
• 아무것도 입력하지 않은 상태에서는 Enter 키를 눌러도 addTags 메서드가 실행되지 않아야 합니다.
• 태그가 추가되고 나면 input 창이 비워져야 합니다.

삭제 기능 구현

• 기본적으로 tags 배열 안의 모든 태그들이 화면에 보여야 합니다.
• 태그 이름 옆에 삭제 아이콘(x)이 표시되도록 하고, 아이콘을 클릭하면 해당 태그를 삭제하는 removeTags 메서드가 실행되어야 합니다.
• removeTags 메서드가 삭제 아이콘(x)이 눌린 태그를 삭제하도록 removeTags 메서드를 완성해야 합니다.

Tag 기능 구현 코드

export const Tag = () => {
  const initialTags = ['CodeStates', 'kimcoding'];
  const [tags, setTags] = useState(initialTags);
  const removeTags = (indexToRemove) => {
    // TODO : 태그를 삭제하는 메소드를 완성하세요.
    const filter = tags.filter ( (el, index) => index !== indexToRemove);
    setTags(filter);
  };
  const addTags = (event) => {
    // TODO : tags 배열에 새로운 태그를 추가하는 메소드를 완성하세요.
    // 이 메소드는 태그 추가 외에도 아래 3 가지 기능을 수행할 수 있어야 합니다.
    // - 이미 입력되어 있는 태그인지 검사하여 이미 있는 태그라면 추가하지 말기
    // - 아무것도 입력하지 않은 채 Enter 키 입력시 메소드 실행하지 말기
    // - 태그가 추가되면 input 창 비우기
    const inputVal = event.target.value;
    if(event.key === "Enter" && inputVal !== '' && !tags.includes(inputVal)) {
      setTags([...tags, inputVal]);
      event.target.value = '';
    }
  };
  return (
    <>
      <TagsInput>
        <ul id="tags">
          {tags.map((tag, index) => (
            <li key={index} className="tag">
              <span className="tag-title">{tag}</span>
              <span className="tag-close-icon" onClick={ () => removeTags(index)} > x
                {/* TODO :  tag-close-icon이 tag-title 오른쪽에 x 로 표시되도록 하고,
                            삭제 아이콘을 click 했을 때 removeTags 메소드가 실행되어야 합니다. */}
              </span>
            </li>
          ))}
        </ul>
        {/* 키보드의 Enter 키에 의해 addTags 메소드가 실행되어야 합니다. */}
        <input
          className="tag-input"
          type="text"
          onKeyUp={(e) => addTags(e)}
          placeholder="Press enter to add tags"
        />
      </TagsInput>
    </>
  );
};

---

1. 리액트에서의 이벤트 핸들링 👆

이벤트 핸들러 : 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수를 말합니다. 또는 이벤트가 발생하는 것을 계속 듣고 있다는 의미로 이벤트 리스너라고 부르기도 합니다.

<button onClick = {activate}> Activate </button> 

버튼이나 (a) tag를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트입니다.

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

2. 리스트와 키 🔑

(출처 : 소플의 처음 만난 리액트)

리스트는 우리말로 목록이라는 뜻, 리스트를 위해 사용하는 자료구조는 배열.
컴퓨터 프로그래밍에서는 같은 아이템을 순서대로 모아놓은 것이 리스트에 해당.
배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것.

키는 영단어로 열쇠라는 의미, 열쇠는 모두 각자 고유하다.
프로그래밍에서의 키는 각 객체나 아이템을 구분할 수 있는 고유한 값.

리액트에서 아이템을 구분하기 위한 고유한 문자열, 리액트에서의 키의 값은 리스트에 있는 엘리먼트 사이에만 고유한 값이면 됩니다.

1. 키값으로 숫자의 값을 사용한 것

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
            <li key = {number.toString()}>
                  {number}
            </li>
   );

이렇게 하면 지금처럼 numbers 배열의 숫자들이 중복되지 않는 경우에는 정상적으로 작동하지만, 만약 numbers 배열에 중복된 숫자가 들어있다면 키값도 중복되지 때문에 고유해야 한다는 키값의 조건이 충족되지 않습니다. 이러한 경우 실행해 보면 키값이 중복된다는 경고 메시지가 출력됩니다.

2. 키값으로 id를 사용한 것

const todoItems = todos.map((todo) =>
            <li key = {todo.id}>
                  {todo.text}
            </li>
   );

id의 의미 자체가 고유한 값이라는 것이기 때문에 키값으로 사용하기에 적합하다. 이렇게 id가 있는 경우에는 보통 이 id 값을 키값으로 사용하게 됩니다.

3. 키값으로 인덱스를 사용한 것

const todoItems = todos.map((todo, index) => 
            <li key = {index}>
                  {todo.text}
            </li>
   );

이 방법은 map() 함수에서 두번째 파라미터로 제공해 주는 인덱스 값을 키값으로 사용하는 것입니다. 이 인덱스는 배열 내에서 현재 아이템의 인덱스를 의미합니다. 인덱스 값도 고유한 값이기 때문에 키값으로 사용해도 됩니다. 하지만 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 키값으로 인덱스를 사용하는 것을 권장하지 않습니다. 성능에 부정적인 영향을 끼칠 수 있고 컴포넌트의 state와 관련하여 문제를 일으킬 수 도 있기 때문입니다. 참고로 리액트에서는 키를 명시적으로 넣어 주지 않으면 이 인덱스 값을 키값으로 사용합니다.

---

오늘 학습을 마치고 나서, 📖

]오늘은 어제 하지 못했던 Tag 구현을 마저 하고 난 후, 어드밴스 autocomplete를 해보려고 시도했지만 실패했다. 추가적으로 오후 개인 학습 시간에 마저 해볼 예정이다. Tag 구현 블로깅을 하고 난 후 시간이 남아 리액트 책에 리스트, 키에 대한 자료를 보고 공부하며 블로깅하였다. 과제에서 구현했던 <li key ~> 부분을 더 공부해 보고 싶었기 때문이다. 그리고 개인 학습 시간에 미니 프로젝트를 하나 만들어보려고 시작했다. 블로그 만들기이며 '리액트를 다루는 기술' 책 마지막에 프로젝트 설명이 있어서 그거 보면서 만들어 볼 예정이다.