State 예제를 통해 연습하기

구현하는 기능과 배우는 컨셉

✔ 글 제목 옆에 좋아요 버튼만들기
✔ 버튼 눌렀을때 자바스크립트 실행시키기
✔ state 데이터 변경하는 방법

글 제목 옆에 성별바꾸기 버튼 만들기

◾ [글제목, 글제목변경] state 만들기
◾ button안에 onClick 이벤트 함수 만들기
◾ state만들때 default값을 '남자 바지 추천'으로 설정했기 때문에 첫번째 if문에 들어와서 다시 글제목이 '여자 바지 추천'으로 변경된다.
◾ button을 한번더 클릭하면 이번엔 두번째 if문 글제목이 '여자 바지 추천'에 조건이 성립되어 글제목이 다시 '남자 바지 추천'으로 변경된다
◾ UI를 보면, button을 클릭했을때, <h3>에 있는 state값이 변경되는 것을 알 수있다.
◾ 새로고침 없이 랜더링되는 것을 알수있다.

좋아요버튼 누를시 숫자 1증가시키기

◾ 좋아요버튼과 좋아요버튼숫자를 변경해줄 좋아요변경 변수를 state함수로 만든다
◾ 좋아요변경( 대체할 데이터 )
◾ 좋아요변경 함수의 소괄호( ) 내에 있는 데이터로 완전히 대체해주는 게 포인트!
◾ 좋아요변경 (100)이라고 사용하면 좋아요버튼이라는 state가 100으로 변경된다.