✏️ 버튼 기능 개발하기
좋아요 버튼 & 갯수 UI 만들기
html에 버튼 추가하기. button 태그는 안예쁘니까.. span 태그로 묶어주고 귀여운 임티 추가. 그리고 옆에 좋아요 갯수 표현해주는 부분에 0 적어주기
근데 생각해보니 따봉을 계속 누르면 숫자가 올라감. 자주 변동되는거니 state로 만들어주면 좋을 것 같음
return (
<div>
<h4> {title} <span>👍🏻</span> 0 </h4>
</div>
)
바로 useState만들고 state 적용해주기
useState의 초기값이 0인 이유는 단순하게 숫자 0부터 카운트 시작할거니까..ㅋㅋ
//state를 변경할 때 만드는 두번째 함수는 필요 없으면 안써도 됨
function App() {
let [따봉] = useState(0);
return (
<div>
//state 넣어주기
<h4> {title} <span>👍🏻</span> {따봉} </h4>
</div>
)
}✏️ onClick
이제 클릭하면 숫자가 +1 되는 기능을 넣어야 . 이 때 필요한게 "onClick"
onClick : 내가 어떤 html 요소를 클릭 했을 때 내가 원하는 js 문법을 실행시켜줌.
사용방법? 걍 아무 html 요소에 가서 onClick 열어주기. 전문 용어로 "이벤트 핸들러"라고 함.
function App() {
let [따봉] = useState(0);
return (
<div>
<h4> {title} <span onClick={}>👍🏻</span> {따봉} </h4>
</div>
)
}주의사항 한가지~
<span onClick={ 함수 }>{ 함수 } 안에는 js를 막~ 적을 수 있는게 아니라 내가 실행하고 싶은 코드에 담아서 그 함수 이름만 써줘야함
근데 방법이 2개 있음
1.함수 만들어서 넣어주기
// 실행될 함수 만들기
function 함수 () {
console.log(1)
}
return(
<div>
<span onClick={ 함수 }>
</div>
)2.귀찮으니까 그냥 onClick에 함수 넣어주기. 함수 만드는 문법 바로 넣어도 상관없음
return(
<div>
<h4> {title} <span onClick={() => { 실행할 js 코드 }}>👍🏻</span> {따봉} </h4>
</div>
)### ✏️ state 변경 그렇게 어떻게 바꾸는지 보자~ 참고로 등호(=)로 변경 안됨. 사실 되긴 되는데 Html에서 안먹힘. 이때 두번째 작명 사용
onClick 함수 안에 두번째 변경state 이름 사용
state변경함수(새로운state)
{ () => {따봉변경(1) }}
-> span 클릭 하는 순간 기본 숫자로 1이 됨
{ () => {따봉변경(10) }}
-> span 클릭 하는 순간 기본 숫자로 10이 됨
또 다른 예시 이렇게 되면 span 클릭 하는 순간 '안녕'에서 '반가워'가 됨
let [따봉, 따봉변경] = useState('안녕');
<span onClick={ () => {따봉변경('반가워')} }>그럼 이제 따봉을 누를 때 마다 기본 state에서 +1을 해주고 싶을 때는 어떻게?
(따봉+1) 추가
function App() {
let [따봉, 따봉변경] = useState(0);
return(
<div>
<h4> {title} <span onClick={() => {따봉변경(따봉+1)}}>👍🏻</span> {따봉} </h4>
</div>
)
}오늘 배운거 요약
-
onClick 쓰는법
onClick={ } 안에는 함수 넣어야 함 -
state 변경하는 법
항상 state 변경함수 쓰기
state변경함수(새로운 state)
