HashTag

하나의 컴포넌트는 한가지 역할만..

해쉬태그 컴포넌트는 서버에서 주는 해쉬태그 데이터(배열)을 받아
map으로 리스트를 뿌려주는 역할의 컴포넌트다
해쉬태그 컴포넌트를 원래는 하나로 모두 재사용 하기로 기획했다.

하지만, 해쉬태그를 생성하는 음원 등록 수정 페이지에서는 이를 활용하기 힘들었다.
어떤 페이지에서 렌더되느냐에 따라 반환하는 태그들이 달라져야하고,
다른 페이지에서는 핸들러 함수가 무용지물이 되어버려서 더 비효율적이 되었다.
하나의 컴포넌트는 한가지 역할만 해야한다는 말이 괜히 있는게 아닌거같다.

그래서 inputHashTag를 새로 만들기로 했다.
해쉬태그를 입력할 input태그도 있어야하며, 해쉬태그를 삭제할 버튼도 필요했다.

기존에 기획했던 해쉬태그 컴포넌트는 props를 map으로 뿌려주는 역할만 하며,
inputHashTag는 해쉬태그 생성 삭제등이 가능하고 음원 등록 수정 페이지에서만 사용이 가능하다.

삽질

inputHashTag 컴포넌트를 완성하고 음원 등록 수정 페이지에 렌더시켰다.
엔터 버튼을 누를시 해쉬태그가 추가되도록 설계했다.
그런데 문제는 form태그에 감싸져있어서 엔터 버튼을 누를때 onSubmit이 작동했었다.
구글링 해보니 form태그는 기본적으로 엔터 버튼을 누를시 onSubmit이 작동되도록 되어있었다.

이를 무효화 시키는 속성이 있었다.

1. keydown이벤트 추가 후 엔터키 이벤트 제거하기

모든 엘리먼트에 적용시켜 이를 무효화 하는 방법이다.
하지만 나는 엔터버튼 이벤트를 사용해야해서 이는 pass

2. input text를 2개 만들기
   input text가 분명 2개 이상인데 왜 작동 되는지를 모르겠다.
   section으로 감싸서 그런지는 모르겠지만 그렇다고 input text를 2개 만들어 display:none 속성을 사용하는것은 그리 좋지 못한 방향같아서 pass

3. onsubmit="return false 적용
   <form>
   각 input태그들의 required 속성 때문에 onsubmit을 사용하기는 해야해서, 일단 둘다 적용시키는것은 안된다.
   하지만 분명히 onsubmit에 저 옵션 하나만을 적용을 시켰는데도
   왜 안되는지는 좀더 공부해야겠다.

4. form태그 제거
   말 그대로 form태그를 제거하는것이다.

이중에서 나는 4번 방법을 채택했다..
form태그를 div로 변경시키고 각각 input의 required는 유효성 검사 함수로 대체했다.

기능을 모두 완성하고 css까지 적용 시켰다.

---

오늘은 여기까지..

html css부분에서 항상 시간이 오래걸린다.
수료하고 나서는 기초를 확실히 다지는 시간을 좀 가져야할듯하다.
내일부터 추석 연휴라서 하루정도는 조금 쉴 생각이다.

참고 사이트

https://webisfree.com/2017-08-07/input-%EC%9E%85%EB%A0%A5%ED%8F%BC-%EC%97%94%ED%84%B0%ED%82%A4-%EB%88%84%EB%A5%BC-%EA%B2%BD%EC%9A%B0-submit-%EB%A7%89%EA%B8%B0-prevent
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=smonone&logNo=221431162066