[React] 4. Event 처리

<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/ (코딩애플님 리액트 강의)