모든지 기록하자!

React Hooks 본문

React

React Hooks

홍크 2023. 6. 23. 19:14
728x90

Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.

 

리액트의 컴포넌트는 클래스형과 함수형으로 나눠진다.

아래는 이전 게시물의 클래스 컴포넌트를 사용한 예제와  훅스를 사용한 예제이다.

 

Class component

<html>
<head>
    <meta charset="UTF-8"/>
    <title>구구단</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></div> -->
<script type="text/babel">
  class GuGuDan extends React.Component {
    state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };

    onSubmit = (e) => {
      e.preventDefault();
      if (parseInt(this.state.value) === this.state.first * this.state.second) {
        this.setState((prevState) => {
          return {
            result: '정답: ' + prevState.value,
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
          };
        });
        this.input.focus();
      } else {
        this.setState({
          result: '땡',
          value: '',
        });
        this.input.focus();
      }
    };

    onChange = (e) => {
      this.setState({ value: e.target.value });
    };

    input;

    onRefInput = (c) => { this.input = c; };

    // 컨텐츠
    render() {
      return (
        <React.Fragment>
          <div>{this.state.first} 곱하기 {this.state.second}는?</div>
          <form onSubmit={this.onSubmit}>
            <input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange}/>
            <button>입력!</button>
          </form>
          <div>{this.state.result}</div>
        </React.Fragment>
      );
    }
  }

</script>
<script type="text/babel">
  ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>

 

 

Hooks

<html>
<head>
    <meta charset="UTF-8"/>
    <title>구구단</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  const GuGuDan = () => {
    const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
    const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
    const [value, setValue] = React.useState('');
    const [result, setResult] = React.useState('');
    const inputEl = React.useRef(null);

    const onSubmitForm = (e) => {
      e.preventDefault();
      if (parseInt(value) === first * second) {
        setResult('정답');
        setFirst(Math.ceil(Math.random() * 9));
        setSecond(Math.ceil(Math.random() * 9));
        setValue('');
        inputEl.current.focus();
      } else {
        setResult('땡');
        setValue('');
        inputEl.current.focus();
      }
    };
    return (
      <React.Fragment>
        <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>
      </React.Fragment>
    );
  };

</script>
<script type="text/babel">
  ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
</script>
</body>
</html>

 

먼저 위 코드의 ref에 대해 알아보자

 

ref란 DOM에 직접 접근하기 위해 사용한다.

Html을 작성할 때 <div id="test"> 와 같이 id를 사용한다. 특정한 id에 해당하는 DOM에만 스타일이나 자바스크립트에서 여러가지 작업을 할 수 있다.

이렇게 id를 붙이는 것 처럼 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다.

 

 

state 비교

//클래스형
state = {
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };
    
//혹스
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputEl = React.useRef(null);

훅스는 각각 setState 사용할 수 있게 도와준다. (ex - result의 setState는 setResult)

728x90

'React' 카테고리의 다른 글

React 구구단 만들기  (0) 2023.06.23
React JSX 문법이란?  (0) 2023.06.23
'React' Related Articles more
Comments