프론트엔드 · L0 입문 · 약 7분
버튼을 누르면 무슨 일이?
클릭 한 번 뒤에 숨어 있는 작은 릴레이
한 줄로 말하면
버튼을 누르면 "눌렸다"는 신호(이벤트)가 생기고, 미리 정해둔 코드가 그 신호를 받아서 화면을 바꾸거나 서버에 다녀와.
그래서 "버튼을 눌렀는데 아무 반응이 없어요"는 대부분 ① 신호가 안 갔거나 ② 담당 코드가 없거나 ③ 담당 코드가 중간에 에러로 멈춘 경우야.
이벤트: 화면에서 일어나는 모든 일
클릭만 이벤트인 게 아니야. 사용자가 화면에서 하는 거의 모든 행동이 이벤트가 돼. 프로그램은 이 신호들을 듣고 있다가 필요한 것에만 반응해.
- 클릭 / 탭: 버튼 누르기, 링크 누르기
- 입력: 검색창에 글자 하나 칠 때마다
- 제출: 로그인 폼에서 Enter 누르기
- 스크롤: 화면을 끝까지 내리면 다음 글 불러오기
- 포커스: 입력칸을 눌러서 커서가 들어갈 때
반응은 두 갈래야
① 화면 안에서 끝나는 반응
메뉴 펼치기, 탭 바꾸기, 다크 모드 켜기 같은 건 내 폰(브라우저) 안에서 바로 끝나. 서버에 물어볼 필요가 없으니 즉시 바뀌어.
② 서버에 다녀오는 반응
좋아요 누르기, 글 저장하기, 결제하기는 다른 사람도 봐야 하거나 기록이 남아야 하잖아? 그래서 서버에 "좋아요 하나 추가해줘"라고 요청을 보내고, 답을 받은 다음에 화면을 바꿔. 이때 서버와 대화하는 창구가 API야.
- 클릭 — 이벤트 발생
- 핸들러 — 버튼을 "처리 중"으로 바꿈
- 서버 — "좋아요 +1 저장해줘" 요청
- 응답 — "저장 완료, 지금 128개"
- 화면 — 숫자와 하트 색을 바꿔서 다시 그림
마지막 단계처럼 바뀐 데이터를 보고 화면을 새로 그리는 걸 렌더링이라고 해. React는 데이터가 바뀌면 이 다시 그리기를 자동으로 해줘.
여기서 자주 터지는 사고
확인 퀴즈
Q. 다음 중 서버에 다녀와야 하는 반응은?
- 메뉴 펼치기
- 다크 모드 켜기
- 댓글 저장하기
- 탭 바꾸기
정답 보기
3번. 댓글은 다른 사람도 봐야 하고 기록이 남아야 하니까 서버에 저장해야 해. 나머지는 내 화면 안에서 끝나.
Q. 결제 버튼 중복 클릭을 막는 방법으로 가장 알맞은 건?
- 버튼 색을 진하게 바꾼다
- 요청 중엔 버튼을 비활성화하고, 서버에서도 중복 요청을 한 번만 처리한다
- 사용자에게 "두 번 누르지 마세요"라고 써 둔다
- 버튼을 더 작게 만든다
정답 보기
2번. 화면에서 버튼을 잠그고, 서버에서도 같은 요청을 한 번만 처리하게 하는 게 정석이야.
Q. 관리자 전용 기능을 일반 사용자에게서 막으려면?
바코친 앱에서 퀴즈 풀고 AI한테 물어보기- 버튼을 화면에서 숨긴다
- 버튼을 회색으로 만든다
- 서버(또는 DB 보안 규칙)에서 권한을 검사한다
- 버튼 이름을 어렵게 짓는다
정답 보기
3번. 화면에서 숨기는 건 편의일 뿐이야. 요청은 누구나 직접 보낼 수 있으니 진짜 검사는 서버에서 해야 해.
무료 · 카카오로 바로 시작 · 레슨 243개