들어가기전에..

• 프리프로젝트때 너무 정신이 없어서 블로그 정리를 못해서 메인프로젝트 기간에 틈틈히 블로깅하고자 한다.
• 화면구현과 기능구현 중에 사실 제일 어려웠던 부분이 태그 더하는 부분이였다...🥲
• 사실 프로그래머스 문제를 푸는 느낌이였다...헤헤🥲

화면 구현

• 태그 추가, 삭제 로직은 따로 컴포넌트로 분리
• 태그 추가
  • 태그로 쓸 텍스트를 입력하고, enter 키와 ,키를 사용하면 태그가 추가 되도록 구현
• 태그 삭제
  • Backspace키를 누르면 태그가 삭제 되도록 구현
    

코드 구현

• 키보드 이벤트와 event.keyCode를 사용
  • event.keyCode
    • Javascript 로 사용자의 키입력을 감지하여 함수를 처리할 수 있다.
    • Enter 키 : e.keyCode === 13
    • ,< 키 : e.keyCode === 188
    • Backspace 키 :e.keyCode === 8
  • 키보드 이벤트
    • onKeyUp : 키보드의 키가 눌리거나 떼어질 때 호출
    • onKeyDown : 사용자가 키를 눌렀을 때 호출
• tags에 map를 사용할때, key로 index를 안 쓰기 위해 고민하다가 아래처럼 최대한 독립적일수 있게 코드를 짰다.

key={`${index.toString()}-${tag}`} 

• TagAdd.js

//코드 생략
export default function TagAdd({ tags, setTags }) {
  const [input, setInput] = useState('');
  const [isKeyReleased, setIsKeyReleased] = useState(false);

  const onChange = (e) => {
    setInput(e.target.value);
  };

  const onKeyDown = (e) => {
    const trimmedInput = input.trim();

//enter키 or <키 and input값의 공백을 제거하고도 길이가 있다면
    if ((e.keyCode === 13 || e.keyCode === 188) && trimmedInput.length) {
      e.preventDefault();
      //이전 태그에 더해서 추가
      setTags((prevState) => [...prevState, trimmedInput]);
      // Input은 다시 비어지게
      setInput('');
    }
//Backspace키 and 
//input이 비어있고, tags 배열이 비어있지 않으며, //isKeyReleased가 true라면:
    if (e.keyCode === 8 && !input.length && tags.length && isKeyReleased) {
      const tagsCopy = [...tags];
      const poppedTag = tagsCopy.pop();
      e.preventDefault();
      setTags(tagsCopy);
      setInput(poppedTag);
    }
    setIsKeyReleased(false);
  };

  const onKeyUp = () => {
    setIsKeyReleased(true);
  };

  const deleteTag = (index) => {
    setTags((prevState) => prevState.filter((tag, i) => i !== index));
  };
  return (
    <Container>
      {tags &&
        tags.map((tag, index) => (
          <Tags key={`${index.toString()}-${tag}`}>
            {tag}
            <Button onClick={() => deleteTag(index)}>x</Button>
          </Tags>
        ))}
      <Input
        value={input}
        placeholder="e.g.(vba css json)"
        onKeyUp={onKeyUp}
        onKeyDown={onKeyDown}
        onChange={onChange}
      />
    </Container>
  );
}