addClass, removeClass
우리가 앞에서 누르면 배경색이 바뀌는 버튼을 만들었었다.
이 방식은 jQuery, css를 사용해서 background-color를 바꾸었다.
&('body').css('background-color','red');
하지만 우리가 전에 css로 클래스를 만들어 태그에 추가하는 방식, 라이브러리 방식과 유사하게 jQuery를 사용하는 방식이 있다.
바로 addClass, removeClass이다.
addClass는 class를 추가할 수 있고 removeClass는 반대로 class를 제거할 수 있는 기능이다.
그럼 위 코드를 두 이벤트를 사용하여 다시 작성해보자.
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button class="btn-red">버튼</button>
<!--<body class="active">로 되어야 배경색이 빨간색을 바뀐다.-->css
/* body에 .active라는 클래스를 css에만부여해두고 addClass, removeClass로 .active라는 클래스를
body태그에서 지우고 추가함으로 css속성이 바뀔 수 있게 한다. -> 라이브러리처럼 */
/*<body class="active">로 되어야 배경색이 빨간색을 바뀐다.*/
body.active{
background-color:red;
}JS
console.clear();
let isRed = false;//isRed라는 변수에 false를 부여한다.
$('.btn-red').click(bg_change_red);
//.btn-red(버튼)을 클릭하면 bg_change_red라는 함수를 실행한다.
function bg_change_red(){
if(isRed){
$('body').addClass('active');//변수 isRed가 참이라면 body태그에 .active클래스를 추가한다.
}
else{
$('body').removeClass('active');//변수 isRed가 거짓이라면 body태그에 .active클래스를 제거한다.
}
isRed = !isRed;//isRed의 값을 제거한다.
}! $('body').removeClass('active') 뒤에 괄호 클래스는 (.active)말고 그냥(active)라고 작성한다.
addClass, removeClass를 사용해야 하는 이유
위는 모든 모든 속성을 jQuery css를 사용하여 작성한 코드이다.
그리고 이것은 클래스를 하나 만들어 addClass, removeClass를 사용해서 작성한 코드이다. addClass, removeClass로 작성한 코드는 JS코드의 양이 현저히 적다. 보통은 JS코드의 양을 줄이는 것이 현명한 작성 방법이라고 한다.(아직은 모르지만)
hasClass
hasClass도 addClass, removeClass와 비슷하다.
하지만 addClass, removeClass는 "클래스를 부여하고 제거하라!" 라는 명령문이지만
hasClass는 "그 클래스를 가지고 있다."라는 단정문이다.
$('body').hasClass('active');
이런 형식으로 작성하는데, 만약 body태그가 .active라는 클래스를 가지고 있다면 문장은 참(true), 클래스가 없다면 거짓(false)인 것이다.
위는 isRed라는 변수를 만들어 초기값을 거짓(false)으로 집어넣었지만 hasClass를 사용하면 더 명확한 방법으로 코드를 작성할 수 있다.
실제로 실무에서는 이 방식을 사용한다.
console.clear();
$('.btn-red').click(bg_change_red);
//.btn-red(버튼)을 클릭하면 bg_change_red라는 함수를 실행한다.
function bg_change_red(){
let has = $('body').hasClass('active');/*body태그가 active클래스를 가지고 있다면
변수 has는 참, 가지고 있지 않다면 변수 has는 거짓이다.*/
/*만약 if문의 경우, 이 변수를 if문 안에서 다시 정의해줘야 한다. 왜냐하면
밖에 있는 경우,
has값이 처음 클릭한 상태에서 정의 된 후, 다시 바뀌지 않는다. 함수가 실행될 때마다
has값은 다시 정의되어야 한다.
-has가 if문 밖에서 정의될 때 과정-
body가 .active를 가지고 있지 않으므로 has는 false
-> 버튼을 클릭해서 함수를 실행하고 if문안으로 들어간다. has가 false이므로 addClass
-> 다시 버튼을 클릭해도 has는 이미 false로 되어있기 때문에 addClass*/
console.log(has);
if(has){
$('body').addClass('active');//변수 has가 참이라면 body태그에 .active클래스를 추가한다.
}
else{
$('body').removeClass('active');//변수 has가 거짓이라면 body태그에 .active클래스를 제거한다.
}
}이 방식은 다른 변수를 사용할 때처럼 변수의 값을 반전(변수 = !변수)시킬 필요가 없다. 다만 if문 안에서 변수를 정의해주어서 hasClass를 작동시켜야 한다.
