React - 버튼에 기능개발을해보자 & 리액트 staet변경하는 법

좋아요 버튼 만들기

현재 아래의 페이지에서 

각 게시물의 좋아요 버튼을 만들고 버튼을 누르면 갯수가 1씩 증가하는 기능을 만들어보겠습니다. 

글제목 옆에 span태그를 활용해 좋아요를 만들어줍니다.

<h4> { 글제목[0] } <span>👍</span> 0 </h4>

지금은 0이라고 하드코딩했는데 이렇게 하면 안될거 같습니다. 

저번시간에 "자주바뀔거 같은 html 내용은 state로 저장했다가 데이터바인딩하세요"라고 배웠습니다.

 

따라서 state로 만들어보겠습니다.

function App(){
  
  let [따봉] = useState(0);
  return (
     <h4> { 글제목[0] } <span>👍</span> { 따봉 }</h4>
  )
}

 

onClick사용법

이제 버튼을 누르면 따봉이라는 state를 1증가시키면 원하던 기능완성입니다. 

기존에 html에서는 아래처럼 코드를 실행해야 했습니다. 

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

 

JSX에서는 아래와 같이 사용가능합니다. 

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

 

주목해야할점은 다음과 같습니다

• Click이 대문자
• {} 중괄호 사용하는 것
• 코드가 아닌 함수를 넣어야 잘 작동합니다. 

 

onClick={} 안에 함수를 적는다는 것은

함수명을 적거나 아니면 함수 하나를 바로 만들어서 집어넣는 것 입니다. 

즉 아래와 같이 함수명을 넣거나 

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

 

직접 만들어줍니다.

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

 

state 변경하는법

그럼 함수를 아래와 같이 작성해봅시다.

function App(){
  
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >👍</span> { 따봉 }</h4>
  )
}

변수=변수+1해주면 끝입니다. 하지만 저건 변수가 아니라 state 입니다. 

따라서 state변경함수를 사용하여 state를 변경해야합니다.(html 재랜더링)

 

 

state만들 때 2개까지 작명할 수 있었는데

두번째 작명한건 state변경을 도와주는 함수입니다. 

let [ 따봉, 따봉변경 ] = useState(0);

 

사용법은

• 따봉변경(새로운state);

따봉변경(1)이라고 사용하면 따봉이라는 state가 1로 변경되고 state(100)이라고 사용하면 따봉이라는 state가 100으로 변경됩니다. 

따라서 좋아요를 눌렀을 때 따봉이라는 state가 1증가하려면 아래와 같이 작성해주면됩니다. 

function App(){
  
  let [ 따봉, 따봉변경 ] = useState(0);
  return (
      <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉변경(따봉 + 1) } } >👍</span> { 따봉 }</h4>
  )
}

한번 실행해서 확인해보겠습니다. 

 

 

처음실행했을 때 화면입니다. 좋아요 따봉버튼을 눌러보겠습니다. 

잘 변경되는 것을 확인할 수 있습니다. 

 

정리

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

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌