자바스크립트 react관련질문좀합니다

Question

버튼을 클릭하면 사각형을 특정 공간만큼 움직이려고 하거든요.

1. import React, { Component } from 'react';

2. import './App.css';

3. class App extends Component {

4. constructor(props) {

5. super(props);

6. this.state = {

7. marginElem: document.getElementById("sq")

8. }

9. this.onclick = this.onclick.bind(this);

10. }

11. onclick(e) {

12. this.setState({ marginElem: this.state.marginElem.style.marginLeft + "1.5rem"});

13. }

14. render() {

15. return (

16. <div style={{marginTop:"3rem", marginLeft: "3rem"}}>

17. <div id="sq" className="square"></div>

18. <div>

19. <input onClick={this.onclick} className="button" type="button" value="click" />

20. </div>

21. </div>

22. );

23. }

24. }

25. export default App;

버튼을 클릭하면 null 이 발생하여 에러가 뜨거든요. 상태를 업데이트 시켜주면 되는거 같은데 어느 부분이 잘못된 건가요?

Answer 1

onclick 함수를

onClick = () => { this.setState({ sqMargin: this.state.sqMargin + 1 }) }

div#sq를

<div style={{ marginLeft: `${this.state.sqMargin}rem` }}></div>

6번째 줄에 this.state에서 state로 바꿔주시면 될 것 같아요!

https://stackblitz.com/edit/react-ge8q9g

실행 테스트해봤습니다. 참조 부탁드립니다!

Answer 2

this.state = { marginElem: document.getElementById("sq") }

render후에 #sq가 만들어지기 때문에 marginElem이 null이 되는 상황입니다.

React Refs 문서를 보시고 생각을 다시 하시면 좋겠습니다.

https://reactjs.org/docs/refs-and-the-dom.html