WRay
51
2021-11-24 16:25:25
7
162

React에서 setAttribute를 사용하고 싶습니다 ㅠ


    const imageRef = React.useRef();
    const num = 1;

    function nextImage(index) {

if (index) {
if (num == 4) return;
num++;
} else {
if (num == 1) return;
num--;
}
imageRef.setAttribute("src", "rec" + num + ".png");
    }

        <img src="./image/rec1.png" ref={imageRef} />
<button onclick={nextImage(0)}></button>
<button onclick={nextImage(1)}></button>



react 에선 QuerySelector를 쓰면 안 좋다고 해서 useRef로 값을 가져오고 버튼에 function달아서 이미지 src 번호 값
을 바꾸는 식으로 이미지를 넘기고 싶습니다.
그런데 렌더링 돌리면 'setAttribute is not a function'오류가 뜨네요. 리액트에서 setAttribute가 동작을 안 하는
건가요 ㅜㅜ
초보 개발자 도와주십쇼!!

0
  • 답변 7

  • 꿈의연봉1800
    344
    2021-11-24 16:27:08

    ref.current로 접근해야죠

  • 페코옹
    1k
    2021-11-24 16:37:10

    잘 못 접근하셨습니다;

    querySelector를 쓰지 않는게 아니라


    명령형으로 하지말고 (setArribute)

    선언형으로 개발을 해야해요.


    useState 사용 하세요!


  • WRay
    51
    2021-11-24 16:37:50
    imageRef.current.setAttribute("src", "rec" + num + ".png");


    이렇게 수정하면 오류가 뜹니다..ㅠ

    Cannot read properties of undefined (reading 'setAttribute')



  • WRay
    51
    2021-11-24 16:44:04

    페코옹 






      const [image, setImage] = useState(document.querySelector(".styles.rec"))

    setImage(image.setAttribute("src", "rec" + num + ".png"))

    혹시 이런 식일까요..? 클래스 명은 제가 module css로 작업 중이라 저렇게 넣었습니다!
  • 페코옹
    1k
    2021-11-24 16:47:04

    노노 아닙니다!

  • 페코옹
    1k
    2021-11-24 16:53:55
    import React from "react";

    export default function App() {
    const [index, setIndex] = React.useState(1);

    const handleNextImage = () => {
    setIndex((val) => (val === 4 ? 1 : val + 1));
    };

    const handlePrevImage = () => {
    setIndex((val) => (val === 1 ? 4 : val - 1));
    };

    return (
    <div className="App">
    <h2>{index}</h2>
    <img src={`./image/rec${index}.png`} alt="" />
    <br />
    <button onClick={handlePrevImage}>◀</button>
    <button onClick={handleNextImage}>▶</button>
    </div>
    );
    }

  • WRay
    51
    2021-11-24 17:18:16

    페코옹

    오 마이 갓 감사합니다 슨생님 ㅜㅜ..


  • 로그인을 하시면 답변을 등록할 수 있습니다.