javascript 좋아요, 싫어요 기능 질문 2

Question

javascript 좋아요, 싫어요 기능을 만들고 있습니다. 버튼을 누르면 selected class가 나오면서 color를 바꿔주고 이미 selected 클래스가 있으면 없어지는 간단한 기능을 만들고 있는데 한가지 이상한게 있어서 질문드립니다.

땅콩파파 · Answer

자세히 들어다보진 않았는데 일단 버튼이 여러개가 있죠?그리고 그 버튼들을 likeHandle 함수에서 관리를 해주고 있구요. 그러면 각각의 버튼이 눌렸는지 안눌렸는지 버튼들이 다 자기 상태를 갖고있어야 하잖아요근데 보면const videoLikeBtn &#61; document.querySelectorAll('.videoLikeBtn'); const data &#61; ['selected', 'hide']; // 좋아요 또는 싫어요 클릭시 실행되는 함수 let likeChk &#61; false; let unlikeChk &#61; false;이런식으로, likeChck, unlikeChk를 함수 밖에다 꺼내놨어요 이렇게 변수 선언 하는걸 글로벌 변수를 선언한다 하는건데 이런식으로 하면, 버튼이 5조 5억개를 만들어도 다 저 상태 하나를 모든 버튼들이 똑같이 갖고있어요예: 버튼1 &#61; 버튼상태1, 버튼2 &#61; 버튼상태2 이런게 아니구버튼1 &#61; 버튼상태1, 버튼2 &#61; 버튼상태1 ... 근데 likeHandle버튼이 실행되면, 저기 라이크체크 변수가 true로 바뀌잖아요그럼 저 likeCheck 변수를 상태로 갖고있는 버튼들은 클릭되지도 않았는데도 true값을 갖고있게 되는거에요 [첫 클릭]: 그래서 버튼 하나를 클릭해서, 색상을 바꾸고(likeChk &#61; true) [두번째 클릭]: 다른 버튼을 클릭하면 바뀌어야 하는데 색이 안바뀌죠 (likeChk &#61; false로 돌아오니깐요)[세번째 클릭]: 그래서 다시 클릭해보면 색이 바뀌어요 (likeChk &#61; true) 이런 문제를 해결하기 위해서 이제 사용하게 되는게 리액트에서는 상태관리라고 해요. 하나의 버튼이 자기 자신만의 상태를 갖고있는 변수를 갖도록 해야 하는거죠. 이 문제를 해결하려면 closure라는 개념을 한번 살펴보시면 도움될거에요

javascript 좋아요, 싫어요 기능 질문 2

1개의 답변

Q&A 목록