001_좋아요

1. 좋아요와 싫어요

→ 👍를 누르면 좋아요수가 +1 이 되도록, 👎를 누르면 좋아요수가 -1 되지만, 0이하로는 안내려가도록 했다.

// ( src/App.js )
import React, { useState } from 'react';
import './App.css';

function App() {
  const [like, setLike] = React.useState(0);
  const clickLike = () => { setLike( (current) => current+1 ) };
  const clickDislike = () => { setLike( (current) => current-1 ) };
  
  return (
    <div className="container">
      <div className="first-container">
        <span onClick={ clickLike }>👍</span>
        <span onClick={ like <= 0 ? like : clickDislike }>👎</span>
        <p>좋아요수 : { like } </p>
      </div>
    </div>
  );
}

export default App;

2. 좋아요가 하나일 경우

→ 좋아요가 하나일 경우 처음 눌렀을 때 좋아요수가 누르지만 다시 한번 더 누르면 좋아요 수가 줄어든다.

// ( src/App.js )
import React, { useState } from 'react';
import './App.css';

function App() {
  const [realLike, setReallike] = React.useState(0);
  const [like1, setLike1] = React.useState(true);
  const otherLike = () => { setLike1( (current) => !current ); };
  
  return (
    <div className="container">
      <div className="second-container">
        <span onClick={ otherLike }>👍</span>
        <p>좋아요수 : { like1 == false ? realLike +1 : realLike } </p>
      </div>
    </div>
  );
}

export default App;

🤔 000_count에서 배웠던 것을 응용해서 좋아요를 만들어보면 좋을꺼 같아서 만들어보았다.