[ onClick ]

- 클릭하였을 때 이벤트가 나타날 수 있도록 해주는 리스너

• onClick={ 클릭될 때 실행할 함수 }
• onClick=()=>{ 실행할 코드 }

let [좋아요, 좋아요변경] = useState(0);
//useState를 만들면 뒷값(좋아요변경)은 함수가 만들어지며 정의해주면 된다.
//let [state, state함수]
<span onClick={ ()=>{ 좋아요변경(좋아요+1) } } > 👍🏻 </span>

state함수로 state값을 변경해주면 됨.
state함수를 이용해주어야 재렌더링이 잘 일어남.

[ state값 변경 ]

- state값은 직접적으로 바꿔줄 수 없으므로 state의 복사본을 만들어(deep copy) 바꿔줘야한다.

deep copy는 (주소)값을 복사하지 않고 새로운 독립적인 값을 만들어달라는 뜻이다.

//deep copy
[...변수명]

function 제목바꾸기() {
  var newArray = 글제목; // 값 복사가 아닌 (주소에 해당하는)값을 공유

  var newArray = [...글제목];
  // newArray { 값1, 값2, ... } 새로운 값이 할당됨.
  newArray[0] = '변경 값';
  글제목바꾸기( newArray );
}

리액트에서는 모든 state 데이터들은 immutable data (직접 수정이 되면 안 된다.)라고 권장하고 있음.

<button onClick= { 제목바꾸기 }> 버튼 </button>
// { }안에 함수를 넣어주는데 이때 괄호()는 제외하고 넣어준다.
// 버튼 클릭시 이벤트가 발생한다.

[ Array, Object state 데이터 수정 방법 ]

• 변경함수 사용
• 변경함수(대체할 데이터)
• state는 직접 건들지 말 것.