만들면서 배우는 react : 기초 - 9

하트 버튼을 눌렀을 때 고양이 이미지가 추가되는 기능을 만들어보려고 한답..

---

우선, 가장 먼저 해야할 것은 하트 클릭 함수를 끌어올리는 것이다.

const App = () => {
  const CAT1 = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
  const CAT2 = "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
  const CAT3 = "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";

  const [counter, setCounter] = React.useState(1);


  function handleFormSubmit(event) {
    event.preventDefault();
    console.log("폼 전송됨");
    setCounter(counter + 1);
    setMainCatImg(CAT2);
  }

  function handleHeartClick() { // 하트 클릭 이벤트
    console.log("버튼 클릭");
  }

  return (
    <div>
      <Title>{counter}번째 고양이 가라사대</Title>
      <Form handleFormSubmit={handleFormSubmit} />
      <MainCard img={mainCatImg} alt="고양이" handleHeartClick={handleHeartClick} /> //props로 전달
      <Favorites favorites={favorites} />
    </div>
  );
}

handleHeartClick을 APP으로 끌어올리고,
props로 handleHeartClick을 넘겨주었다~

그 다음으로 할 일은 바로바로!
하트를 클릭하면, 새로운 이미지가 추가될 수 있도록 하는 것이다.
그럴려면, state를 사용해주어야겠지….???

const App = () => {
  const CAT1 = "https://cataas.com/cat/60b73094e04e18001194a309/says/react";
  const CAT2 = "https://cataas.com//cat/5e9970351b7a400011744233/says/inflearn";
  const CAT3 = "https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript";

  const [counter, setCounter] = React.useState(1);
  const [mainCatImg, setMainCatImg] = React.useState(CAT1); //이미지 추가 state


  function handleFormSubmit(event) {
    event.preventDefault();
    console.log("폼 전송됨");
    setCounter(counter + 1);
    setMainCatImg(CAT2);
  }

  function handleHeartClick() {
    console.log("버튼 클릭");
    setFavorites([...favorites, CAT3]); //하트 클릭 시, 추가될 수 있도록 한다.  
  }

  return (
    <div>
      <Title>{counter}번째 고양이 가라사대</Title>
      <Form handleFormSubmit={handleFormSubmit} />
      <MainCard img={mainCatImg} alt="고양이" handleHeartClick={handleHeartClick} />
      <Favorites favorites={favorites} />
    </div>
  );
}

앞서 배운 것들을 종합해서 한 번에 기능을 써보니,
사용법에 더 익숙해지는 것 같다 ㅎㅎ
역시 뭐든지 실전에서 사용을 해봐야 제대로 사용법을 알 수 있는 것 같다!!