[React] 버튼에 기능개발을 해보자 & 리액트 state변경하는 법

노란색 warning은 에러는 아님

노란색 warning은 -eslint가 잘못된 코딩 습관 같은거를 체크해줌

예, 변수 만들고 안썼어요!

보기 싫으면 가장 상단에

/*eslint-disable*/

=>와 꿀팁

좋아요 버튼

      <div className="list">
        <h3>{ 글제목[0] }<span onClick={ ()=>{} }>👕</span> 0 </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>

onClick={클릭될 때 실행할 함수}
onClick={()=>{실행할 내용}}

=> 예시로 보여줬지만 " 1+1 ", { 1+1 }
=> 이런건 안된다.

=> ()=>{실행할 내용} 요것은 es6의 화살표 함수

그럼 이 버튼을 누르면 h3안의 0에 영향을 주고 싶다.

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

<h3>{ 글제목[0] }<span onClick={ ()=>{ 따봉변경('rse')} }>👕</span> {따봉} </h3>

=> 따봉 변경 함수를 활용해주면 된다.
=> 이렇게 하면 'rse'로 따봉 변수가 아예 바뀌고

<h3>{ 글제목[0] }<span onClick={ ()=>{ 따봉변경(따봉+1)} }>👕</span> {따봉} </h3>

=> 요래 해주면 따봉 변수에 +1이 된다.
=> 또 이런식으로 state를 바꿔줘야 재 렌더링이 발생한다.

과제

글 제목을 변경해봐라

=> 당연히 쉽게

<button onClick={ ()=>{ 글제목[0] = '여자 코트 추천'; console.log(글제목[0]) } }>버튼</button>

=> 이렇게 생각했는데 안된다 ...
=> console로는 잘 바뀐채로 나오는데
=> 밑에 글 제목으로는 안된다

=> 알고보니 그 이유는 이렇게 바꿔주는건

=> 글제목에 들어있는 전체를 바꿔주어야한다.
=> 고로 [] 리스트 형식으로 들어가 있기 때문에 [] 형식 전체를 바꿔줘야함

안그러면

<button onClick={ ()=>{ 글제목변경(글제목[0] = '여자코트') } }>버튼</button>      <div className="list">

=> 이런 문제가 발생한다
=> 제대로 형식을 못 받아들이는듯 ...