이벤트 처리 하기(part1 . 골격 만들기)

클릭이 되면 count를 증가하고 감소하고 삭제까지 되는 걸 해보자

 

핸들링하는 로직들을 전부 다 지워주고 동일하게 클릭 이벤트를 처리해준다.

 

핸들링하는 로직삭제

 

delete 버튼에도 클릭 이벤트를 처리해준더.

(this.handleDelete라고 이름을 지어주고)

여기에서 동일하게 정의해준다.

 

이렇게 해서 Habit이라는 습관 컴포넌트는 자체적으로 가지고 있는 상태 state는 없다. 외부에서 props로 전달받은 습관, habit라는 오브젝트의 데이터를 보여주는 컴포넌트이다.

 

 

그래서 클릭이 되면 내부적으로 데이터를 처리하기 보다 외부에서 플러스 버튼이 클릭되면 함수를 호출하고, 마이너스 버튼 클릭되면 이 함수 호출해라고 주어진 콜백함수 단순히 호출만 하는 컴포넌트를 만들어 보자

 

props로 전달된 habit의 이름과 count를 보여주고 클릭이 되면 암것도 하지 않는 함수를 호출하도록 만든다.(아래그림)

props로 전달된 habit의 이름과 count를 보여주고 클릭이 되면 암것도 하지 않는 함수를 호출

 

 

habit안에 있는 세 가지 함수를 복사해서 habits에 붙여준다. habits라는 습관들 컴포넌트에서 모든 습관들의 데이터가 들어 있고 습관들의 데이터에 숫자를 증가하고 감소하고 습관을 삭제하는 모든 로직들을 가지고 있을거다.

 

그리고 숫자를 증가하고 감소하는 것은 특정한 습관의 count를 증가하고 감소 하는 거기 때문에 인자로는 특정한 habit 습관을 전달받으면 그 습관에 해당하는 count를 증가해 주면 된다. 그리고 decrement도 동일하게 습관의 count를 감소 할 건지를 전달 받아야 한다.

 

그래서 habit을 받고 삭제를 할 때도 어떤 습관을 삭제 할 건지 해당 인자를 받아와야 한다.

 

컴포넌트에서 사용자가 onClick이 발생하면 이런 함수를 호출 해라고 한거 처럼 동일하게 사용자가 정의한 onIncrement가 발생하면(+버튼이 클릭되면) 전달해준 handleIncrement라는 함수를 호출하고 콜백함수로 전달한다.

 

handleIncrement라는 변수는 함수를 가리키고 있고 함수는 오브젝트의 일종이다. 그래서 handleIncrement라고하는 변수는 함수를 가리키고 있어서 함수의 이름을 인자로 전달해 주면 함수를 가리키고 있는 참조 값을 전달해서 함수를 바로 호출하지는 않고 함수를 가리키고 있는 참조값만 onIncrement라는 prop으로 전달해 준다.

 

그래서 컴포넌트 안에서 +버튼일 글릭되면 onIncrement라는 prop이름으로 전달한 콜백함수를 호출하고 - 버튼을 클릭하면 onDecrement라는 prop으로 전달된 것을 호출하고 삭제되는 이벤트 발생하면 onDelete를 호출해라고 전달해준다.

 

+,- delete 클릭되면 컴포넌트 안에 있는 멤버함수 호출increment 발생하면 this.props 안에 있는 onincrement라는 함수 호출해주고 (onIncrement라는 것은 habit라는것을 인자로 받아서 어떤 것을 해주는 함수)

사용자가 숫자를 증가하고자 하는 해당하는 습관을 함수에 인자로 전달해 준다.

그래서 사용자가 this.props 안에 있는 habit을 전달해 주면 된다.

 

 

 

 

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

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

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