*클릭 이벤트(click event)
클릭을 할 때마다 숫자가 증감되는 이벤트를 만들어줄 것인데, 여기에는 react Hook의 useState를 사용할 예정이다.
useState는 return 윗쪽에 배열로 비구조화할당을 이용하여 작성한다. 이때, react에서 useState를 import해와서 사용하면 된다.
여기서 react의 useState를 import!!
위처럼 작성했으면, useState를 사용할 때에는 두 개의 값이 들어가는데,
첫 번째 자리는 변수값
두 번째 자리는 변경할 값이다.
const [변수명, 변경할값] = useState(변수값);
변경할 값은 관례적으로 앞에 set을 붙여준다.
ex) const [num, setNum] = useState(0);
위의 경우를 쉽게 생각해보면 let num = 0이라고 생각해보면 된다. 만약 let num = 10인 경우에는 useState(10)이 되면 되는 것이다.
즉, num값이 함수 매개변수 자리에 있는 값이다.
그럼 당연하게도 현재에는 위의 h2 안에 0을 넣어뒀으나,
<h2>{num}</h2>라고 표현하면 매개변수에 들어있는 숫자가 출력되어 보이게 될 것이다.
그럼 이제 click event를 줘보려고 한다.
button 뒤로 onClick을 작성해줬을때,
js로 따지면 button에 addEventListener에 Click까지 적어둔 상태인 것이다.
안에 함수를 test용도로 써넣어보았다.
각 버튼을 클릭할 때마다 이벤트가 잘 동작하는 모습이 보인다.
그럼 이제 원래 하려던 목적대로, useState를 사용하여 -버튼과 +버튼을 누를 때마다 숫자가 증감되게 만들어보자.
setNum() 함수 안쪽으로 변경하고자 하는 걸 넣어주면 된다.
*click이벤트로 배경색 변경
이번에는 onClick의 중괄호 안에 함수를 그대로 넣는 것이 아니라 함수를 함수명을 만들어 밖으로 빼주었다.
console에 잘 찍히는지 확인하고 다음으로 넘어가 useState를 사용하여 Box의 배경색을 바꿔준다.
onClickBox가 작동할 때마다 위의 background-color에 props로 값을 전달해주면 된다.
헷갈리니 하나씩 바꿔보자!!
우선 원래 Box에 들어있던 gold라는 색상을 props를 이용하여 넣어주면 아까와 동일한 결과가 나온다. 이제 여기서 color에 gold를 빼고, bgColor을 넣어준다.
그 다음으로, useState의 기본값을 "gold"라고 두고, color에는 bgColor을 넣어주면 여전히 아까와 동일한 결과가 나올 것이다.
그럼 마지막으로 onClickBox 함수 안에 setBgColor로 bgColor를 salmon색으로 바꿔주는 코드를 넣으면 끝!
