React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자)

조건

좋아요 버튼을 누르면 각각의 게시글의 좋아요가 1씩 올라가야 한다.

---

풀이

function App() {
  let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']);
  let [like, setLike] = useState([0,0,0]);
  let handlesetLike = (i) => {
    let copyLike = [...like];
    copyLike[i] = copyLike[i] + 1;
    setLike(copyLike);
  }

  return (
    <div className="App">
      { 
        title.map(function(a,i){
          return (
          <div className="list" key={i}>
            <h4>{ title[i] }</h4>
            <p><button onClick={() => handlesetLike(i)}>👍</button> { like[i] } </p>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
      {modal == true ? <Modal></Modal> : null}
      
    </div>
  );
}

---

알게 된 점

handlesetLike는 파라미터로 i를 담았기 때문에 onClick={()=>handlesetLike(i)}로 넣어줘야 작동을 했다.
(파라미터로 아무것도 담지 않은 함수는 그냥 onClick={ 함수 }로 담아도 작동했었다.)

알게 된 점 2

아래 세 가지 코드는 모두 동일하게 작동한다.
세 가지 코드 모두 modal prop 값이 true일 때에만 <Modal> 컴포넌트를 렌더링하고, 그렇지 않은 경우에는 null을 반환한다. 첫 번째 코드와 두 번째 코드는 모두 "삼항 연산자"를 사용하여 구현되었고, 세 번째 코드는 "숏서킷 평가"를 사용하여 구현되었다.

{modal == true ? <Modal></Modal> : null}
{modal ? <Modal title={title} /> : null}
{modal && <Modal title={title} />}

---

출처 : 코딩애플 https://codingapple.com/