useState  을 쓸려면 documentQueryselector을 사용하면 안되요. 

이 페이지의 렌더링에 대해 생각해봅시다

맨 마지막에 컴포넌트를 돌려주고 그게 웹사이트에서 그려지는데, 님이 하신 방법으로 queryselector같은걸 쓰면 input element가 아직 존재하기도 전에 읽을려고 합니다. 그러니까 값을 모르죠.

 useState을 사용할려면 input에 onChange 이벤트를 사용하면 될거같네요 (텍스트 인풋이라면 onchange가 끝난다음에 나오는 펑션이면 더 좋아요 스크립트를 덜 돌리니까)

예:
const [state,setState] = useState({input1:0,input2:0})

...

<input .... onChange = {e=>setState({...state,input1:parseInt(e.target.value)} />
(첫번째 인풋 예)

....
<input .... value ={JSON.stringify(state)} />
(보여주고 싶은 인풋 예)

기억나는데로 쓴거긴 한데 이런 패턴을 따라야 해요. 안그럼 리엑트가 화냄

tx ty에 useRef를 쓰거나, useState 추가해서 value에 state, onchange에 setState 넣으면 됨

그 머냐 리액트 쓸라면 그 돔 조작 최소한으로 하는게 제일 베스트인데 물론 뭐 돔 조작 아예 하지 말란건 아님

나같으면 저거 tx, ty를 useState로 준다음에 온체인지 이용해서 계속 값 바꾸고 온클릭 눌렀을때

최종 계산된 result 값을 도출하게 할꺼 같음