[React] 버튼 기능 개발 & 리액트 state 변경 방법

터미널 / 브라우저 콘솔창에 warning 뜨는 이유

빨간 error는 해결해야하지만 warning은 무시해도 됨.

대부분 eslint 라는 기능이 잘못된 코딩관습을 교정해주는 건데

초보때는 warning 수정도다 코드 짜보고 실행하는게 중요해서 /*eslint-disable*/ 라는 주석을 js 파일 최상단에 추가해서 eslint 기능을 잠시 꺼두기.

버튼 기능 개발

하트버튼을 누르면 하트가 하나씩 추가 되도록 하는 기능

일단 html 레이아웃을 작성하고, 

<h4> {title[1]} <span>❤️</span> </h4>

 

여기서 변경 되는 부분인 ❤️ state로 저장해서 데이터바인딩하기

let [heart, heartChange] = useState("❤️");
  
<h4> {title[1]} <span>{heart}</span> </h4>

 

클릭시 무언가 실행하고 싶으면 onClick={함수} 이벤트 핸들러 사용

JSX에서 onClick 사용은 Click 이 대문자이고, {} 중괄호를 사용하며, 코드가 아니라 함수를 넣어야 잘 작동함!

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

 

onCLick={ } 안에 함수

onClick={ } 안에는 함수명을 적거나 함수 하나를 만들어서 넣으면 됨.

//  span 클릭 시 함수 안에 있던 자바스크립트가 실행됨.
function heartChange(){
	heart + "❤️";
}
return (
	<h4>{title[1]} <span onClick={heartChange}>{heart}</span> </h4>
)


// 함수 만들기 귀찮으면 함수를 그 자리에 직접 만들기 1.
return (
	<h4>{title[1]} <span onClick={ function heartChange(){heart + "❤️";} }>{heart}</span> </h4>
)

// 함수 만들기 귀찮으면 함수를 그 자리에 직접 만들기 2.
return (
	<h4>{title[1]} <span onClick={ () => heartChange(){heart + "❤️";} }>{heart}</span> </h4>
)

 

state 변경시 state 변경함수 꼭 사용

state는 state 변경함수를 써서 state를 변경해야 함. (그렇지 않으면 html 재랜더링 안됨)

state 만들때 두번째로 작명한게 state 변경을 도와주는 함수.

let [heart, heartChange] = useState("❤️");

heartChange(heart + "❤️");

이렇게 써야 state 변경이 되는데, state 변경함수는 () 안에 넣은걸로 state를 변경해주는 함수이기 때문임.

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!