[React] useState 변경하기 & 버튼 기능개발

sona·2022년 8월 2일
0

🚀 React

목록 보기
5/20

✏️ 버튼 기능 개발하기

좋아요 버튼 & 갯수 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>
)
}

오늘 배운거 요약

  1. onClick 쓰는법
    onClick={ } 안에는 함수 넣어야 함

  2. state 변경하는 법
    항상 state 변경함수 쓰기
    state변경함수(새로운 state)

0개의 댓글