[React] onClick과 component

 

 

onClick

 

onClick={함수} 또는 onClick={ ()=>{실행 내용} }으로 사용할 수 있습니다.

 

 

위와 같이 작성하면 아래와 F12를 눌러 콘솔창을 보면 아래와 같이 5가 출려됩니다.

 

그리고 state를 사용하여 하트를 누르면 숫자가 올라가는 것을 구현해보면 다음과 같이 구현할 수 있습니다.

이때 onClick에는 state의 하트변경 함수를 이용하여 하트+1을 해줍니다.

 

제목을 바꿔주고 싶으면 아래와 같이 글제목변경안에 바꾸자 하는 데이터를 넣어주면 됩니다.

 

만약 Array에서 하나의 데이터만 바꾸고 싶다면 아래와 같이 [...글제목]이라고 작성하여 deep copy를 해야한다.

 

 

 

Component

위에 코드들은 HTML 태그들이 계속 생성되어 복잡하니 Component문법으로 보기좋게 바꿀 수 있습니다.

 

위와 같이 함수를 만들어주고 <함수명></함수명>으로 하면 똑같은 결과가 나옵니다.

단, Component의 이름은 대문자로 시작해야하고, return() 안에 태그 하나로 묶어서 사용해야 합니다. 

그러나 Component를 너무 많이 만들면 상위 Component에서 만든 state를 마음대로 사용할 수 없기 때문에 props문법을 사용해야 하기 때문에 state를 쓸 때 복잡해집니다!

 

Reference

https://velog.io/@kiyoog02/React-%EA%B8%B0%EC%B4%88-3-onClick-Component

React 기초 (3) - onClick & Component