(React) 블로그 만들기 - 좋아요 증가시키기

노란색 warning 잠재우기

콘솔에 사용 안 한 변수가 있다고 warning이 잔소리를 한다 ?
👉 /* eslint-disable */ 를 js 파일 제일 위에 추가해주면 해결됨.

❤️ 좋아요 버튼 만들기

하트를 누르면 0에서 1씩 증가하도록 만들어보자.
아래와 같이 제목 부분에 하트와 좋아요 개수를 추가해주자.
좋아요 개수도 가변성이니 state 로 만들어야겠다.

const [liked, setLiked] = useState([0, 0, 0]);
.
.
 <h4>
   {posts[0].title}
   <span>❤️</span> {liked[0]}
 </h4>

이제 하트에 이벤트 처리를 JSX 식으로 처리해주려면
<span onClick={()=>{코드}}>❤️</span>
<span onClick={function(){코드}}>❤️</span>
<span onClick={함수이름}>❤️</span>
이런식으로 해주면 된다.

이벤트 처리할때 포인트

1. onclick (x) onClick (o)
2. { } 사용
3. 함수형식

이제 liked를 하나씩 증가시켜주려면 아래처럼.

 <span onClick={() => {
   const newLiked = [...liked];
   newLiked[0] += 1;
   setLiked(newLiked);
   }}>❤️</span> {liked[0]}

리액트에서는 immutability 를 매우 중요하게 여기기 때문에
state를 바꾸려면 복제 후 사용해야한다.
set어쩌고() 함수 안에는 갈아끼우는 대상을 넣어야한다. 실행코드 같은거 넣으면 안됨.
liked가 배열이니 newLiked와 같은 배열만 들어갈 수 있다는 말임.