리액트 useState (2)

좋아요 버튼 만들기

버튼을 누르면 좋아요 개수가 1씩 증가하는 기능을 만들어보자.

 

자주 바뀔 것 같은 html 내용은 state로 저장했다가 데인터바인딩하면 된다.

좋아요 개수를 state로 만들면 될 것이다.

function App(){
  
  let [title, setTitle] = useState( ['자바스크립트 동작원리', '리액트를 쓰는 이유', '프로그래밍 공부법'] );
  let [like] = useState(0);
  return (
     <h1> { title[0] } <span>👍</span>{like}</h1>
  )
}

 

 

onClick 사용법

이제 버튼을 누르면 like라는 state를 1 증가시키면 원하던 기능 완성인데

그 전에 알아야할게 하나 있다.

어떤 html을 클릭시 원하는 코드 실행하는 법을 알아보자.

 

<div onclick="실행할 자바스크립트 코드">

일반 html 파일에서는 이렇게 하면 된다.

 

<div onClick={실행할함수}>

JSX에서는 이렇게 한다.

 

1. Click이 대문자인거

2. {} 중괄호 사용하는거

3. 그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거

 

onClick={} 안에 함수를 적는게 무슨소리냐면

onClick={} 안에는 어디서 만든 함수명을 적거나 아니면 함수 하나를 바로 만들어서 넣어줘면 된다.

function App(){
  
  function 함수(){
    console.log(1);
  }
  return (
     <div onClick={함수}> 안녕하세요 </div>
  )
}

이렇게 하면 <div>를 클릭시 함수안에 있던 자바스크립트가 실행된다.

이게 리액트에서 어떤 html 요소 클릭시 원하는 코드실행하는 법이다.

근데 함수 만드는게 귀찮으면

 

<div onClick={ function(){ 실행할코드 } }> 
<div onClick={ () => { 실행할코드 } }>

이렇게 함수를 그 자리에서 직접 만들어도 가능하다.

 

 

 

 

⭐️ state 변경하는 법

아무튼 좋아요 버튼 누르면 like라는 state를 + 1 해주고 싶다.

function App(){
  
  let [like] = useState(0);
  return (
    <h4>{title[0]}<span onClick={()=>{like = like+1}}>👍</span>{like}</h4>
  )
}

변수에 +1 해주고 싶으면 변수 = 변수 + 1 해주면 끝이다.

근데 안타깝게도 저건 변수가 아니라 state이다.

state는 state변경함수를 써서 state를 변경해야한다.

안그러면 html 재렌더링이 안된다.

 

let [ like, setLike ] = useState(0);

state만들 때 2개까지 작명할 수 있다.

두번째 작명하는거는 state 변경을 도와주는 함수이다.

이걸 써야 state 변경이 가능하다.

 

사용법은

setLike(새로운state)

이렇게 쓰면 된다.

왜냐하면 state 변경함수는 () 안에 넣은걸로 state를 갈아치워주는 함수라 그렇다.

 

setLike(1) 이라고 사용하면 like라는 state가 1로 변경된다.

setLike(100) 이라고 사용하면 like라는 state가 100으로 변경된다.

setLike(like = like + 1) 이런식으로 사용하면 안된다. 깔끔하게 새로운 state만 집어넣으면 된다. 

 

그래서 답은

function App(){
  
  let [ like, setLike ] = useState(0);
  return (
      <h4> { title[0] } <span onClick={()=>{ setLike(like + 1) }} >👍</span> { like }</h4>
  )
}

like라는 기존 state에 1을 더한 값을 setLike 함수에 집어넣었다.

그럼 버튼을 누를 때 마다 그 값으로 대체된다.

 

 

 

🌈 정리 

• 클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용한다.
• state를 변경하려면 state 변경함수를 꼭 사용하자.
• state변경함수는 () 안에 입력한걸로 기존 state를 갈아치워준다.