[React] 리액트 사용시 간단한 팁 몇 가지

1.

JSX랑 JavaScript는 섞어 쓰지 않는 게 좋다.

이 경우 자바스크립트로 작성한 것은 class의 메서드로 만들면 보기도 좋다.

render() {
          return (
            <div>
              <div>{this.state.first} x {this.state.second} = ?</div>
              <form onSubmit={(e) => {
                e.preventDefault();
                if (parseInt(value) === this.state.first * this.state.second) {
                  this.setState({
                    result: '정답',
                    first: Math.ceil(Math.random() * 9),
                    second: Math.ceil(Math.random() * 9),
                    value: '',
                  });
                } else {
                  this.setState({
                    result: "땡",
                    value: '',
                  })
                }
              }}>
                <input type="number" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value})} />
                <button>입력</button>
              </form>
              <div>{this.state.result}</div>
            </div>
          );
        }

위의 경우 JSX와 자바스크립트를 함께 작성한 케이스이다.

이를 아래와 같이 클래스의 메서드로 만들 수 있다.

 

class GuGuDan extends React.Component {
        // .. 생략 .. //
 
        onSubmit = (e) => {
          e.preventDefault();
          if (parseInt(value) === this.state.first * this.state.second) {
            this.setState({
              result: '정답',
              first: Math.ceil(Math.random() * 9),
              second: Math.ceil(Math.random() * 9),
              value: '',
            });
          } else {
            this.setState({
              result: "땡",
              value: '',
            })
          }
        };
 
        onChange = (e) => {
          this.setState({ value: e.target.value})
        };
 
        render() {
          return (
            <div>
              <div>{this.state.first} x {this.state.second} = ?</div>
              <form onSubmit={this.onSubmit}>
                <input type="number" value={this.state.value} onChange={this.onChange} />
                <button>입력</button>
              </form>
              <div>{this.state.result}</div>
            </div>
          );
        }

onSubmit={this.onSubmit}과 onChange={this.onChange}가 바뀐 부분이다.

 

또한, 이렇게 따로 빼서 만들어준 함수는 꼭 화살표 함수로 작성해야 한다.

화살표 함수가 아닌 function으로 작성하면 this가 달라지게 되어 작동하지 않는다.