리액트에서 컴포넌트 직접 접근 후 값 수정하기

Question

안녕하세요! 최근에 리액트를 접해서 연습삼아 리액트로 미니 게임을 만들고 있습니다.

컴포넌트를 클릭하면 해당 컴포넌트의 위치가 랜덤하게 바뀌는 걸 구현 하고 싶은데 방법을 모르겠습니다.(하늘에서 별이 랜덤으로 반짝 반짝 하듯이)

useRef를 통해 DOM에 직접 접근 하는 것 까지는 알았는데 값 수정을 못해서요 ㅠㅠ

예를들어 ,바닐라 js에서는

const random = () => Math.floor(Math.random()*99+1)

let x =random()

let y = random()

document.Queryselector().style = “position : absolute; top: “ + x.toString()+”%, left :”+ y.toString()+”%”;

이런 식으로 생각했는데 리액트에서는 어떻게 하면 좋을까요..? 구글링만 하루종일 했는데 해결법을 못 찾아 질문 남깁니다 ..!

김익현 · Accepted Answer

안녕하세요~ 😄 React 에서는 ref를 활용하여 직접적으로 접근하시는것 보다 state를 활용하여 접근하시면 더 좋을 것 같아요~ 예를 들어 const [top, setTop] = useState(0); const [left, setLeft] = useState(0); useEffect(() => { setTop(Math.floor(Math.random() * 99 + 1)); setLeft(Math.floor(Math.random() * 99 + 1)); }, []); return (

별~

); 이런식으로 접근하시면 더 좋을것 같습니다!! useState랑 useEffect를 꼭 보시는걸 추천드리겠습니다!! 화이팅~💪

김민혁 (Noel) · Answer

x, y좌표를 상태로써 갖고 있고, 컴포넌트 클릭 시 해당 상태를 계속 업데이트 해주면 될 것 같습니다