react에서 HTML 요소 값 수정

Question

안녕하세요! 최근에 리액트를 접해서 연습삼아 리액트로 미니 게임을 만들고 있습니다.컴포넌트를 클릭하면 해당 컴포넌트의 위치가 랜덤하게 바뀌는 걸 구현 하고 싶은데 방법을 모르겠습니다.useRef를 통해 DOM에 직접 접근 하는 것 까지는 알았는데 값이 수정되지 않아서요 ㅠㅠ예를들어 ,바닐라 js에서는const random &#61; () &#61;> Math.floor(Math.random()*99&#43;1)let x &#61;random()let y &#61; random()document.Queryselector().style &#61; “position : absolute; top: “ &#43; x.toString()&#43;”%, left :”&#43; y.toString()&#43;”%”;이런 식으로 생각했는데 리액트에서는 어떻게 하면 좋을까요..? 구글링만 하루종일 했는데 해결법을 못 찾아 질문 남깁니다 ..!

코린이듈리 · Answer

리액트 코드는 어떻게 작성하셨나요?리액트 함수형 컴포넌트에서는 useState에 저장한 값이 변경되어야 컴포넌트가 리렌더링 됩니다!클래스형은 this.state가 변경되어야 합니다.

songline · Answer

스타일을 적용할 목적이라면

...

이런식으로 사용하시면 됩니다. 아래 코드를 참고해주세요.const Game = () => { // 스타일용 객체를 state로 생성. const [style, setStyle] = React.useState({ backgroundColor: "green", position: "absolute", width: "100px", height: "100px", top: "0px", left: "0px", }); // 실행되면 top, left를 바꾸는 함수. const reposition = () => { const random = () => Math.floor(Math.random()*99+1); let x = random(); let y = random(); setStyle({ ...style, top: y, left: x, }); }; // 처음에 한 번 자동으로 랜덤한 위치로 움직이라고 넣어줌. React.useEffect(() => {reposition()}, []); return (<>

) }

react에서 HTML 요소 값 수정

2개의 답변

Q&A 목록