[React] 버튼 기능개발, 리액트 state 변경하기

좋아요 버튼 만들기

span 태그를 누르면 숫자가 1씩 증가하게끔 해야한다.

 

기존에 JavaScript로 구현할 때, addEventListener나 onclick 메소드를 사용했었다.

리액트에서도 onClick={클릭될때 실행할 JS}를 사용할 수 있다.

주의사항은 click을 적을 때 대문자로 적어야하고, JS를 { 함수() } 괄호로 감싸주어야 한다!

익명함수도 가능하다! { () => {} }이런식으로 적으면 된다. 

 

 

let [따봉, 따봉변경] = useState(0);

return (

      <span onClick={() => { 따봉변경(따봉 + 1) }}>👍🏻</span> {따봉}

)

위와 같이 state변경함수로 변경해야 재렌더링이 잘 일어난다. 스무스~!

 

단순히 함수 이름을 넣을 때 onClick = { 제목바꾸기() } 하면 함수가 바로 실행되서, 버튼을 눌렀을 때 실행하게 해야하므로, ()는 빼야 한다.

onClick = { 제목바꾸기 } 가 맞다.

 

State 수정할 때 직접 원본수정은 안된다. deep copy해서 수정해야 한다.

state를 수정하고 싶으면, 복사를 한뒤, 복사한 것을 수정한다. 

const 제목바꾸기 = () => {
    let newArray = 글제목;
    newArray[0] = '구두 추천';
    글제목변경(newArray);
}

위와 같이 하면 안된다. 위는 복사가 아니라 값 공유이다! 글제목과 newArray변수는 똑같은 값을 공유하고 있는 것이다.

reference data type의 특징이다.

deep copy를 해야한다. 완전히 다른 별개의 복사본을 만들면 된다!

암기!!!!

const 제목바꾸기 = () => {
    let newArray = [...글제목];
    newArray[0] = '구두 추천';
    글제목변경(newArray);
}

 

deep copy는 서로 값 공유가 일어나지 않고, 완전히 새로운 복사본을 만들어준다.

... spread operator는 중괄호, 대괄호 다 제거해준다. 그 다음 다시 [] 로 담으면 완전히 별개의 Array가 된다.

리액트 대원칙!!!! immutable data! 직접 변경하면 안된다~! 권장한다.

 

총정리

1. Array, Object state 데이터 수정 방법 : 일단 변경함수 써야한다.

2. 변경함수에 원래 들어간 데이터 자료혀오가 똑같이 변경함수(대체할 데이터) 넣어준다.

3. state는 직접 건들면 안된다.  deep copy해서 수정해야 한다.