위드콘 - 해시태그 구현 (해시태그 생성)

해시태그를 구현해 보려고 함

 

📝 형식

1. 해시태그 글자의 수는 10글자 이하
2. 엔터키로 넣기
3. 최대 5개 => 더 입력하려고하면 modal이나 alert 띄워주기
4. 태그한 목록 띄워주기
5. 해시태그 지울 수 있게 하기

 

엔터일 때만 값을 추가 해야 되기때문에 e.key === "Enter"를 넣었다.

 const tagDown = (e) => {
    if (e.key === "Enter" && tagLists.length === 5) {
      setInputValue("");
      console.log("5개임 바이");
    } else if (e.key === "Enter") {
      setTagLists([...tagLists, inputValue]);
      setInputValue("");
    }
  };

 <>  
   <div className="input-container">
	<label htmlFor="tag">태그</label>
	<div className="input-wrap">
	  <input
	   type="text"
	   id="tag"
	   maxLength="10"
	   value={inputValue}
	   onChange={(e) => setInputValue(e.target.value)}
	   placeholder="태그할 글자를 입력해주세요."
	   onKeyDown={tagDown}
	  />
	</div>
   </div>
   <div className="hashtag-lists">
	<ul>
	 {tagLists.map((tag, index) => (
		<li key={index}>{tag}</li>
	 ))}
	</ul>
   </div>
 </>

 

이렇게 해서 잘 나오는 가 봤더니 영어를 입력하면 한개씩 잘 나오는데 한글을 입력하면 2개씩 나오는 문제 발생...

해결 : 한글 입력은 자음과 모음을 조합하는 과정에서 여러 'keydown' 이벤트를 발생시킬 수 있어서 Enter키가 여러번 처리되는 문제가 발생할 수 있다. e.nativeEvent.isComposing은 현재 텍스트 입력이 진행중인지 여부를 판단 할 수 있는데 이 속성이 false일때만 Enter 키 이벤트를 처리하도록 했다.

 const tagDown = (e) => {
    if (e.key === "Enter" && tagLists.length === 5) {
      setInputValue("");
      console.log("5개임 바이");
    } 
    // 수정 부분
    else if (e.key === "Enter" && !e.nativeEvent.isComposing) {
      setTagLists([...tagLists, inputValue]);
      setInputValue("");
    }
  };

 

해시태그를 다섯개보다 더 입력하려고 하면 모달이 나오게 했는데 useRef말고 그냥 useState로 띄워줬다.

const [showTagModal, setShowTagModal] = useState(false);
  
  const tagDown = (e) => {
    if (e.target.value === "") return;
    if (e.key === "Enter" && tagLists.length === 5) {
      setInputValue("");
      setShowTagModal(true);
      setTimeout(() => {
        setShowTagModal(false);
      }, 600);
    } else if (e.key === "Enter" && !e.nativeEvent.isComposing) {
      setTagLists([...tagLists, inputValue]);
      setInputValue("");
    }
  };

 {showCompleteModal === true ? (
	<div className="modal">
	  <span>채팅방이 생성되었습니다.</span>
	</div>
   ) : null
 }

 

해시태그를 지우는 것은 'splice'메서드를 사용해서 updateTagLists배열에서 index 위치부터 1개를 제거하도록 했다.
그 후에 다시 tagLists 상태를 새로운 배열인 updateTagLists로 바꿔줬다.

 const onClickRemove = (index) => {
  const updateTagLists = [...tagLists];
  updateTagLists.splice(index, 1);
  setTagLists(updateTagLists);
 };

 <ul className="hashtag-lists">
	{tagLists &&
	  tagLists.map((tag, index) => (
		<li className="hashtag" key={index}>
		  <span>#{tag}</span>
		  <button
		   className="remove-btn"
		   onClick={() => onClickRemove(index)}
		  >
		    X
		  </button>
		</li>
	))}
 </ul>