[React] state 변경함수 사용법

state 변경함수 사용법

1. 간단한 함수인 경우

html 속성란에 이벤트명을 camelCase로 작성한 뒤 중괄호를 열어 그 안에 화살표 함수를 넣는다

<div 이벤트={()=>{변경함수(변경내용)}}></div>

function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아동 코트 추천']);
  let [따봉, 따봉변경] = useState(0);
  return (
    <div className="App">
        <h3>{글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span>{따봉}</h3>
    </div >
  );
}

2. 복잡한 함수인 경우

함수를 따로 빼서 작성한 뒤 함수 이름만 {중괄호} 안에 넣어준다

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 코트 추천', '아동 코트 추천']);

  function 제목바꾸기() {
    let newArray = [...글제목]; //1. 기존 state 카피본 만들기
    newArray[0] = '여자코트 추천'; //2. 카피본에 수정사항 반영하기
    글제목변경(newArray); //3. 수정된 카피본을 변경함수 (괄호) 안에 집어넣기
  }

<button onClick={제목바꾸기}>카테고리 변경</button>

리액트의 원칙은 immutable data이다. 즉, 데이터를 직접적으로 수정해선 안된다!(그것을 권장한다) 따라서 무언가를 수정할 때는 복사를 해서 복사본을 수정해야한다. 새로운 변수에 복사본을 담아서 사용하면 된다.
[...state이름] ,{...state이름}

출처: https://www.youtube.com/watch?v=CowLAnmhxMY&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&index=6