State 이해하기

간단하게 클래스 컴포넌트를 이용해서 state를 변경해서 render 함수가 다시 호출 될 수 있도록 만들것인데,

 

버튼 클릭하면 숫자가 올라가거나 내려가게끔 만들어 보았다.

 

먼저 클래스 이름 increase 옆에 onClick은 onClick이 발생하면 클래스 안에 있는

handleIncrement, 이 함수를 호출해라라고 전달

 

컴포넌트 state에 있는 count를 증가 하는 것이 사용자의 주 목적이기 때문에 아무런

인자를 받아오지 않고 해야하는것은 state 오브젝트 안에 count를 증가한 뒤 state를 업데이트 하는 것이다.

리액트 컴포넌트에서 제공하는 this.setState()라는 함수를 이용하자.

 

리액트 컴포넌트에서 제공하는 setState라는 함수

Decrement할 때는 count변수를 지정해 준 뒤, count가 0보다 작을 때는 0을 지정해주고 아니면 count를 나타내어준다.

그리고 클래스 이름 decrease 옆에 onClick은 this에 있는 handleDecrement라는 함수를 연결

각 button className옆에다가 onClick을 설정해준다.

이렇게 해서 +누르면 1증가 -누르면 1감소를 나타내준다.

 

증가했을 때

감소했을 때

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://developer.mozilla.org/en-US/docs/Web/API/Event

Event - Web APIs | MDN

https://reactjs.org/docs/events.html

SyntheticEvent – React