728x90
1. UI 재사용: 함수에 "구멍(파라미터)" 뚫기
알림창이 100개 필요하다고 해서 HTML을 100개 만들 필요는 없습니다. 하나의 알림창을 만들어 두고, 내용만 바꿔서 재사용하는 것이 가장 효율적입니다.
- 나쁜 예: 아이디알림창(), 비번알림창() 등 함수를 기능별로 계속 만들기
- 좋은 예: 파라미터를 사용해 글자만 전달하기
// 함수 하나로 돌려쓰기
function openAlert(text) {
document.getElementById('title').innerHTML = text;
document.getElementById('alert').style.display = 'block';
}
// 사용 시
// <button onclick="openAlert('아이디 입력하셈')">버튼1</button>
// <button onclick="openAlert('비번 입력하셈')">버튼2</button>
2. 더 강력한 셀렉터: getElementsByClassName
ID가 아닌 Class로 요소를 찾을 때 사용합니다. ID와 달리 Class는 여러 개 존재할 수 있으므로 반드시 **[순서]**를 지정해야 합니다.
- 문법: document.getElementsByClassName('클래스명')[순서]
- 특징:
- [0]은 첫 번째 요소, [1]은 두 번째 요소를 의미합니다.
- 컴퓨터는 숫자를 0부터 세기 때문입니다.
- 주의: 뒤에 인덱스[0]를 붙이지 않으면 작동하지 않습니다.
3. 깔끔한 코드의 완성: 이벤트 리스너 (EventListener)
HTML 안에 onclick="..."을 길게 적는 것은 지저분합니다. JS 파일에서 직접 이벤트를 감시하도록 만드는 것이 '요즘 방식'입니다.
// 문법
document.getElementById('close').addEventListener('click', function(){
// 클릭하면 실행할 코드
document.getElementById('alert').style.display = 'none';
});
- 이벤트 종류 (Event):
- click: 클릭했을 때
- mouseover: 마우스를 올렸을 때
- scroll: 스크롤 할 때
- keydown: 키보드 입력을 할 때
- 콜백함수 (Callback Function):
- addEventListener의 두 번째 인자로 들어가는 function(){} 처럼, 함수 파라미터 자리에 들어가는 함수를 뜻합니다.
- "이벤트가 발생하면 이 함수를 나중에(Back) 실행해줘(Call)!" 라는 의미로 이해하면 쉽습니다.
요약 및 팁
- 확장성: HTML을 복사하지 말고 JS로 내용을 변경하자.
- 정확성: getElementsByClassName은 반드시 몇 번째인지 [ ]로 알려줘야 한다.
- 가독성: HTML과 JS를 분리하기 위해 addEventListener를 생활화하자.
728x90
'공부 > frontend' 카테고리의 다른 글
| JavaScript/TypeScript에서 튜플(Tuple) 이해하기 (0) | 2025.11.18 |
|---|---|
| Generator Function과 async/await: 차이점과 사용법 (0) | 2025.11.02 |
| [GoJS] addNodeData vs addNodeDataCollection (0) | 2025.09.29 |
| MUI DataGrid (0) | 2025.04.24 |
| some()과 every()로 배열 조건 검사 (0) | 2025.04.07 |