[TIL.7] form과 submit, e.preventDefault, 중요하지 않은 String변수는 대문자로!

 

노마드코더 리액트 기초수업으로 영화앱 만드는 영상을 다보고 리액트 뿐만아니라 프로그래밍 전반적으로 실무 꿀팁을 많이 알게돼서 이번엔 자바스크립트 기초 영상들을 하나씩 보고있다.

 

진짜 이걸 왜 이제야 봤나싶음

 

물론 내가 그동안 경험하면서 쌓은 기초지식이 있기때문에 이 강의가 더 쉽게 느껴지는 걸수도 있겠지만 진짜 자바스크립트의 J도 몰라도 충분히 듣고 코딩을 시작할 수 있을정도로 원리부터 설명해줘서 너무 재미있다.

 

 

그동안 그냥 '그러려니...'하고 썼던 모든 것들의 원리를 알게되니 뭔가 먼지 쌓인 안경을 닦고 다시 코드는 보는 느낌이랄까 +_+

 

 

 

 · form 과 submit 그리고 e.preventDefault

 

form과 submit 그리고 e.preventDefault는 세트로 자주 쓰인다.

잠깐 기억에서 흐려졌다가 요즘 리액트를 배우면서 다시 이 삼종세트(?!)를 애용하고 있는데

섭밋하면 새로고침되니까 이를 방지하기 위해 e.preventDefault를 쓴다 라고만 알고 쓰고있었다. 

 

submit이벤트를 실행하면 브라우저에서 자동으로 받아오는 정보와 함수들이 있는데 이때 Default로 새로고침이 실행된다는 것이다. 이렇게만 쓰고보니 내가 그동안 알았던 것과 크게 차이가 없는 것 같지만;;

브라우저에서 실행되는 이벤트에 따라 Default 기능들이 있다는 얘기이고 form이 아닌 a태그를 예로 들면 default 가 click이기 때문에 이때 e.preventDefault를 사용할 경우 클릭(정확히 말하면 링크 이동)이 먹히지않게된다는 것이다.

(참고로 default기능이 뭔지 궁금하다면 함수안에 console.dir(event)로 확인할 수 있음!)

 

 

언젠가 한번 a태그에 다른 이벤트를 넣으면서 e.preventDefault를 썼었는데 그게 이거때문이었어....

(요즘 이런식으로 과거에 멋모르고 썼던 코드들을 이해하게되는 경우가 종종 있다.. 진짜 어떻게 코딩했나 싶음;;;;)

 

 

그리고 추가로 form이라는 녀석 참 기특한게 form안에 있는 input의 여러 속성을 활용해서 간단한 유효성 검사를 할 수 있다. 이렇게 해주면 따로 자바스크립트로 입력값이 null인지 아닌지, 길이가 너무 길지는 않은지 체크하지 않아도 돼서 넘나 편하다. (이거 또 까먹고 자바스크립트로 널체크하기 전에 머릿속에 박아놔야함+_+)

 

위 사진에 12, 13번째줄으로

널체크는 required 로, 길이 제한은 maxlength를 지정해주면 된다.

 

 

 

· 중요하지 않은 String변수 명은 대문자로 

 

 

이번에 알게된 코딩 컨벤션

 

가끔 다른분들이 올린 예제 코드에서 이렇게 대문자로 된 변수를 보긴했는데 나는 중요한 변수라 저렇게 대문자를 쓰나 했더니 오히려 반대였다.

 

위에 예제는 특정 이벤트가 발생하면 브라우저 요소에 hidden이라는 클래스명을 추가해서 css로 간단하게 요소를 숨기는 기능을 구현한 것인데 이때 클래스명 hidden을 2번 이상 사용하게되므로 유지보수를 위해 따로 변수로 설정해주는 것이다. 중요한건 이런 클래스명은 단순한 css 기능이기때문에 딱히 중요하지 않으니 변수명을 저렇게 대문자로 작성하는 것이 일반적이라고 한다. 

 

 

추가로 몇가지 더 기억하고 싶은 내용을 추가하자면

바닐라자바스크립트에서 브라우저 요소를 가져올때는 document.querySelector("태그 or Id or Class명")로 가져오는데 위 기능처럼 클래스명을 추가하거나 없앨때는 그냥 className을 쓰는 것이 아니라 classList.add(), classList.remove()로 추가 삭제 해주면 기존에 클래스명에 영향없이 기능을 추가할 수 있다. 또 이 클래스명을 추가 삭제하는 것이 1회성이아니라 반복적으로 사용될경우에는 toggle()을 사용할수 있고, 요소가 특정 클래스명을 가지고 있는지 없는지는 contains()로 확인할 수 있다.

이런건 진짜 프론트에서 UI요소 만질때 엄청 유용하게 쓰일듯!