React의 이벤트와 상태 다뤄보기 2

binary·2022년 1월 20일

React 천재가 되자되자

목록 보기

4/7

랜덤고양이

어제 만들었던 랜덤고양이의 코드이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>랜덤 고양이</title>
    <style>
      body {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      const Title = (props) => {
        return <h1>{props.children}</h1>;
      };

      const CatImg = (props) => {
        return (
          <div>
            <img src={props.img} alt='고양이' width='400' />
          </div>
        );
      };

      const Button = ({ handleButtonClick }) => {
        return (
          <button type='submit' onClick={handleButtonClick}>
            변경
          </button>
        );
      };

      const App = () => {
        const [counter, setCounter] = React.useState(1);
        const [catImg, setCatImg] = React.useState(
          "https://media.npr.org/assets/img/2021/08/11/gettyimages-1279899488_wide-f3860ceb0ef19643c335cb34df3fa1de166e2761-s1100-c50.jpg"
        );
        function handleButtonClick() {
          console.log(counter, "번째 지나감");
          setCounter(counter + 1);
          console.log("냥");
          setCatImg("https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75");
        }

        return (
          <div>
            <Title>랜덤 고양이 {counter}</Title>
            <CatImg img={catImg} />
            <Button handleButtonClick={handleButtonClick} />
          </div>
        );
      };
      const 여기다가그려 = document.querySelector("#app");
      ReactDOM.render(<App />, 여기다가그려);
    </script>
  </body>
</html>

| 실행화면

setCatImg("https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75");

원래는 setCatimg에 직접 url을 지정하여 다른 사진으로 바뀌게 했었다.

사진 배열을 만들면 되겠다 싶었는데, 괜찮은 방법이 생각났다!

const App = () => {
  // 사진 url을 변수로 지정
  const cat1 =
          "https://media.npr.org/assets/img/2021/08/11/gettyimages-1279899488_wide-f3860ceb0ef19643c335cb34df3fa1de166e2761-s1100-c50.jpg";
  const cat2 =
          "https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75";
  const cat3 =
          "https://s3.ap-northeast-2.amazonaws.com/elasticbeanstalk-ap-northeast-2-176213403491/media/magazine_img/magazine_280/5-3-1.jpg";

  // 사진 url 변수들을 모은 배열 cats 생성
  const cats = [cat1, cat2, cat3];
  const [counter, setCounter] = React.useState(1);
  const [catImg, setCatImg] = React.useState(
          "https://media.npr.org/assets/img/2021/08/11/gettyimages-1279899488_wide-f3860ceb0ef19643c335cb34df3fa1de166e2761-s1100-c50.jpg"
        );
  function handleButtonClick() {
    console.log(counter, "번째 지나감");
    setCounter(counter + 1);
    console.log("냥");
    // 배열 cats 사용
    setCatImg(cats[counter]);
  }

  return (
    <div>
      <Title>랜덤 고양이 {counter}</Title>
      <CatImg img={catImg} />
      <Button handleButtonClick={handleButtonClick} />
    </div>
  )  }  const 여기다가그려 = document.querySelector("#app")  ReactDOM.render(<App />, 여기다가그려);