노란색 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">
=> 이런 문제가 발생한다
=> 제대로 형식을 못 받아들이는듯 ...