[React] 이벤트 리스너(핸들러) 장착

<h3> { 글제목[0] } <span onClick={ 함수() }>좋아요♥</span> 0 </h3> 
// 기존 js :
// 리액트 :  onClick= { 클릭될 때 실행할 js 함수 }
 
<h3> { 글제목[0] } <span onClick={ ()=>{ console.log(1) } }>좋아요♥</span> 0 </h3> 
// 리액트 :  onClick= { () => { 실행할 내용 } }
// 좋아요 누를 시 0 값 증가해야 함 ->  state로 변경
 
let [좋아요, 좋아요변경] = useState(0);
// [state 데이터, state 데이터 변경 함수]
<h3> { 글제목[0] } <span onClick={ ()=>{ console.log(1) } }>좋아요♥</span> { 좋아요 } </h3> 

<h3> { 글제목[0] } <span onClick={ ()=>{ 좋아요변경( 좋아요 + 1) } }>좋아요♥</span> { 좋아요 } </h3> 
// 좋아요변경() 함수를 이용


<button onClick={ ()=>{ 글제목변경( ['맛있는집 추천!', '신발 추천!', '옷 추천!']) }}>버튼입니다</button>
//함수로 변경하여 재작성

function 제목바꾸기() {
	글제목변경( ['맛있는집 추천!', '신발 추천!', '옷 추천!'] );
  }

<button onClick={ 제목바꾸기 }>버튼입니다</button>
// 제목바꾸기() 로 작성하게되면 버튼 누름과 상관없이 함수 바로 실행되기때문에 '()'를 빼고 작성 

function 제목바꾸기() {
  // 복사본을 하나 생성한다
  var newArray = 글제목; // 잘못된 복사, 그냥 복사하면 큰일나요! -> 값 공유일뿐

  var newArray = [...글제목]; // deep copy해서 수정한다, array =[...], object ={} -> 서로 독립적인 복사
      newArray[0] = '맛있는집 추천!'; // 복사본을 만들어서 수정한다
      글제목변경( newArray );
 }

Array, Object state 데이터 수정 방법

1. 변경함수를 써야한다

• let [글제목, 글제목변경] = useState(['맛집 추천!', '신발 추천!', '옷 추천!']);
• 글제목변경 ();

2. state 원본은 건들지 않고 deep copy해서 수정사항 변경한다

• var newArray = [...글제목];
• newArray[0] = '맛있는집 추천!';
• array =[...], object ={}

3. 변경함수()에 집어넣기

• 글제목변경( newArray );