react 추가 study

⭐ class 방식으로 react 코드 짤때,

실무에서 constructor,super 생략하고 state만 더 자주 사용한다

 

class GuGuDan extends React.Component{
	contructor(props){
    super(props);
    this.state = {
    	first: ~ ,
        second: ~ ,

    }
  }
}

//실무에서는 생략 후 아래 방법을 더 많이 쓴다
class GuGuDan extends React.Component{
	state = {
    	first: ~ ,
        second: ~ ,
    }
}

 

 

⭐ render함수 내부에서는 function을 사용해도 되지만,

      class 내부에서 메서드를 만들어서 사용할때는, arrow function을 사용해야한다.

(render내에서 onsubmit 을 정의해도 되지만, render 밖으로 빼서 보기 좋게 정리.)

 

class GuGuDan extends React.Component{
   this.state = {
    	first: ~ ,
        second: ~ ,
    };
    
   onSubmit = (e) => { e. preventDefault()}
   
   render(){
   //return ( ),괄호도 선택사항 / 보통 html코드를 깔끔하게 정리하기 위해선, 쓰는게 좋음
   	 return (
		<div>
        	<button onSubmit={this.onSubmit}></button>
        </div>    
     )   
   }
}

 

 

⭐ +복습) input의 value가 매번 바뀌길 원한다면 -> this.setState 사용.

 

 

⭐ render 내부에 쓸데없이 빈 div가 들어가는 것을 원하지 않는다면, <React.Fragmanet>사용하기

 

class GuGuDan extends React.Component{
   this.state = {
    	first: ~ ,
        second: ~ ,
    };
    
   onSubmit = (e) => { e. preventDefault()}
   
   render(){
     return (
         <React.fragment>
        	<button onSubmit={this.onSubmit}></button>
	  </React.fragment>
     );
   }
}

 

 

⭐⭐ class vs React Hooks 비교해보기 (react는 hooks를 더 권장한다)

⭐ class

 

class GuGuDan extends React.Component {
	//state 선언
    state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };
    ////state 선언

    onSubmit = (e) => {
      e.preventDefault();
      if (parseInt(this.state.value) === this.state.first * this.state.second) {
         //setState 사용
        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 (
        <React.Fragment>
          <div>{this.state.first} 곱하기 {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>
        </React.Fragment>
      );
    }
  }

 

 

⭐ hooks

 

const React = require('react');
const { useState, useRef } = React;

const GuGuDan = () => {
	//state 선언
  const [first, setFirst] = useState(Math.ceil(Math.random() * 9));
  const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = useState('');
  const [result, setResult] = useState('');
  const inputEl = useRef(null);
  //state 선언

  const onSubmitForm = (e) => {
    e.preventDefault();
    if (parseInt(value) === first * second) {
    //setState 사용
      setResult('정답');
      setFirst(Math.ceil(Math.random() * 9));
      setSecond(Math.ceil(Math.random() * 9));
      setValue('');
      inputEl.current.focus();
    } else {
      setResult('땡');
      setValue('');
      inputEl.current.focus();
    }
  };
  return (
    <>
      <div>{first} 곱하기 {second}는?</div>
      <form onSubmit={onSubmitForm}>
        <input
          ref={inputEl}
          type="number"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <button>입력!</button>
      </form>
      <div id="result">{result}</div>
    </>
  );
};
module.exports = GuGuDan;

 

 

⭐ webpack을 사용하는 이유

- 수십 수만개의 자바스크립트 파일을 하나로 합쳐줌

- node를 알아야한다 (node는 서버가아니라 자스 실행기이다.)