[JavaScript] 05. 클릭할 때마다 색이 바뀐다? — 나머지 연산자 활용 🔁

버튼을 클릭할 때마다 빨간색 ↔ 원래 색으로 번갈아 바뀌는 토글 효과를 만들어봅니다.
% 나머지 연산자와 let 변수를 어떻게 활용하는지 개념 중심으로 정리합니다!

---

01. 핵심 개념 — 나머지 연산자 % 💡

%는 나눗셈의 나머지를 구하는 연산자입니다.

10 % 2  // 0  (10 ÷ 2 = 5 나머지 0)
11 % 2  // 1  (11 ÷ 2 = 5 나머지 1)
12 % 2  // 0
13 % 2  // 1

🔑 핵심 패턴 — % 2로 짝수/홀수 판별

n % 2 == 0  // n이 짝수 (0, 2, 4, 6...)
n % 2 == 1  // n이 홀수 (1, 3, 5, 7...)

no = 0 → 0 % 2 = 0 → 짝수 → 빨간 배경
no = 1 → 1 % 2 = 1 → 홀수 → 원래 배경
no = 2 → 2 % 2 = 0 → 짝수 → 빨간 배경
no = 3 → 3 % 2 = 1 → 홀수 → 원래 배경
...반복

💡 이 패턴이 왜 중요할까요?
어떤 값이 계속 증가해도 % 2를 쓰면 0과 1이 번갈아 나옵니다.
이 특성을 이용해 ON/OFF 토글 효과를 만들 수 있습니다!

---

02. 핵심 개념 — 증가 연산자 ++

no++;       // no = no + 1 과 동일
no += 1;    // no = no + 1 과 동일
no = no + 1;// 가장 풀어쓴 형태

세 가지 모두 같은 동작입니다. 실무에서는 no++가 가장 짧아서 많이 씁니다.

---

03. 핵심 개념 — let vs var 📦

let no = 0;   // 함수 밖에서 선언 — 전역변수

키워드	재선언	재할당	특징
var	✅	✅	자유롭지만 실수하기 쉬움
let	❌	✅	재선언 불가, 재할당 가능
const	❌	❌	변경 불가 상수

💡 no가 클릭할 때마다 값이 변해야 하므로 재할당이 가능한 let 을 씁니다.
값이 변하지 않는다면 const를, 지금처럼 변해야 한다면 let을 선택하세요!

---

04. 실전 예제

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<button onclick="changeBodyBackground();">변경</button>

💡 onclick="함수명();" — HTML 태그 안에 직접 이벤트를 연결하는 방법입니다.
이때는 함수 이름에 괄호 ()를 붙여서 호출합니다.

JavaScript

console.clear();

let no = 0; // 클릭 횟수를 기록하는 변수

function changeBodyBackground() {
  console.log("no : " + no);

  if ( no % 2 == 0 ) {
    $('body').css('background-color', 'red');  // 짝수 → 빨간 배경
  }
  else {
    $('body').css('background-color', '');     // 홀수 → 원래 배경
  }

  no++; // no += 1; // no = no + 1;
}

---

05. 동작 흐름 분석 🔍

처음 상태: no = 0

[버튼 1번 클릭]
  no = 0 → 0 % 2 = 0 → 짝수
  → body 배경: red
  → no++ → no = 1

[버튼 2번 클릭]
  no = 1 → 1 % 2 = 1 → 홀수
  → body 배경: '' (원래대로)
  → no++ → no = 2

[버튼 3번 클릭]
  no = 2 → 2 % 2 = 0 → 짝수
  → body 배경: red
  → no++ → no = 3

...무한 반복

🔑 no++는 왜 if문 뒤에 작성할까?

// ✅ 올바른 순서
if ( no % 2 == 0 ) { ... }
no++; // 조건 확인 후 증가

// ❌ 잘못된 순서
no++;
if ( no % 2 == 0 ) { ... } // no가 이미 변해버려서 결과가 반대로 나옴

💡 먼저 현재 no 값으로 조건을 판단하고, 그다음에 증가시켜야 합니다.
순서를 바꾸면 토글이 반대로 동작합니다!

---

06. console.log 디버깅 활용

console.log("no : " + no);

클릭할 때마다 현재 no 값을 콘솔에 출력합니다.

// 버튼 3번 클릭 후 콘솔
no : 0
no : 1
no : 2

💡 console.log는 최고의 디버깅 도구!
코드가 의도대로 동작하는지 확인할 때 변수 값을 출력해보는 습관을 들이세요.
브라우저 개발자 도구 (F12) → Console 탭에서 확인할 수 있습니다.

---

07. ⚠️ 자주 하는 실수

no를 함수 안에 선언하면?

// ❌ 잘못된 예 — 함수 안에 선언
function changeBodyBackground() {
  let no = 0; // 매번 클릭마다 0으로 초기화됨!
  ...
}

// ✅ 올바른 예 — 함수 밖에 선언
let no = 0; // 프로그램 실행 시 딱 한 번만 초기화

function changeBodyBackground() {
  // no가 클릭할 때마다 누적됨
}

⚠️ 함수 안에 선언하면 클릭할 때마다 no가 0으로 초기화됩니다.
값이 계속 누적되어야 한다면 반드시 함수 밖에 선언해야 합니다!

---

📖 핵심 요약

포인트	내용
% 나머지 연산자	n % 2 == 0 → 짝수, n % 2 == 1 → 홀수
토글 패턴	카운터 변수 + % 2로 ON/OFF 번갈아 실행
no++	no = no + 1의 축약형, if 판단 후에 실행
let	재할당 가능, 값이 변해야 할 때 사용
전역변수 위치	누적되어야 하는 변수는 함수 밖에 선언
console.log	디버깅 시 변수 값 확인용