<div className="list">
<h3>{글제목[0]} <span>💖</span>0</h3>
<p>1월 19일 발행</p>
<hr />
하트를 클릭할때마다 좋아요 카운트가 올라가게 하고싶다면 event를 사용해야 한다, 자바스크립트 문법과 비슷
onClick={실행할 함수} 또는
onClick={()=>{실행할 내용}}
<span onClick={() => {console.log(1);}}>💖</span>
콘솔창에 우선 띄워보자
잘 올라감ㅎㅎ
하트 누를때마다 1씩 증가시키고 싶다면? state를 사용하자
let [count, setCount] = useState(0);
count라는 state를 만들어주고 count의 초기값을 0으로 지정해줌
대망의 state 두번째 변수(state 변경해주는 함수) 쓸 차례
<span
onClick={() => {
setCount(count + 1);
}}
>
💖
</span>
{count}
위와 같이 작성해준다
(span태그안에 onClick이벤트를 지정해주고 클릭할때마다 실행할 함수 선언해주기)
누를때마다 setCount함수에게 count변수를 하나씩 증가시켜주세요라고 요청하는것이다
클릭시 count가 잘올라간다ㅎㅎ
꼭 state를 써야 재렌더링이 잘일어난다!!!
어떤 버튼 클릭시 '남자 코트 추천'을 '여자 코트 추천'으로 바꾸고 싶다면?
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"코딩 잘하는 법",
"부평 마라탕 맛집",
]);
기존에 선언한 state를 잘 이용하면 된다
이번에는 함수를 따로 만들어보자
<button onClick={ 제목바꾸기 }>나는 버튼이다</button>
버튼이 클릭될때마다 '제목바꾸기' 함수 실행
/// 제목 바꾸기 함수
function 제목바꾸기() {
글제목변경(["여자 코트 추천", "코딩 잘하는 법", "부평 마라탕 맛집"]);
}
'글제목변경'state함수에게 배열 데이터를 바꿔주세요 요청!!!!
버튼 클릭시 문구가 잘 변경된다
만약 데이터가 엄청 많다면 위와같이 하드코딩 하기에 힘들것임 그러면??
자바스크립트의 Spread 문법을 활용하자!!!
function 제목바꾸기() {
var newArray = [...글제목]
newArray[0] = "여자 코트 추천";
글제목변경(newArray);
}
'글제목'에 원래 있던값을 ... 문법을 사용해서 그대로 가져온다고 보면됨
newArray라는 배열에 글제목의 값이 그대로 복사가 됨
따라서 0번째 인덱스만 바꿔주고 state함수(글제목변경)에게 newArray로 바꾸겠다고 요청!!!!!!!
State는 직접 건들지 말고 copy해서 사용하기
1. 기존 state에 카피본 만들고
2. 카피본에 수정사항 반영
3. 변경함수()에 집어넣기
잘 바뀐다ㅎㅎ
출처 : https://codingapple.com/ (코딩애플님 리액트 강의)