티스토리 뷰

유튜브 강의

제로초 리액트 강의 2.1 React Hooks

2021bong 2021. 10. 31. 17:51

React Hooks = 함수 컴포넌트에서도 state와 ref를 사용할 수 있게 하는 것

useState, useRef 이런 거

리액트에서는 React Hooks를 더 추천함

(useState, useRef 이런게 hooks임. const해서 컴포넌트를 만드는 건 함수 컴포넌트임!)

 

선언해주는 순서가 중요

 

이런식으로 컴포넌트를 만들 수 있음

<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <meta charset="UTF-8">
  <title>구구단</title>
  <div id="root"></div>

  <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('');
      // [state, state전용 setState]
      // 주의할 점 state코드들을 컴포넌트 바깥으로 빼면 안됨

      return <div>React Hooks</div>;
    }
  </script>

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

</html>
<html>

<head>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <meta charset="UTF-8">
  <title>구구단</title>
  <div id="root"></div>

  <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 inputRef = React.useRef(null);

      const onChangeInput = (e) => {
        setValue(e.target.value);
      }

      const onSubmitForm = (e) => {
        e.preventDefault();
        if (parseInt(value) === first * second) {
          setResult('정답 !' + prevState.value);
          setFirst(Math.ceil(Math.random() * 9));
          setSecond(Math.ceil(Math.random() * 9));
          setValue('');
          inputRef.current.focus();     
        } else {
          setResult('땡')
          setValue('');     
          inputRef.current.focus();     
        }
      }

      return (
        <div>
          <div>{first}곱하기{second}은?</div>
          <form onSubmit={onSubmitForm}>
            <input ref={inputRef} type="number" value={value} onChange={onChangeInput} />
            <button>입력</button>
          </form>
          <div>{result}</div>
        </div>
      );
    }
  </script>

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

</html>

이런식으로 코드가 조금 더 간결해짐

+

setState를 해서 렌더링이 여러번 발생할 것 같지만 React가 알아서 처리해줘서 한번 밖에 일어나지 않음

성능 최적화를 위해 알아 둘 점!

hooks는 state값이 변경되면 함수가 재실행됨

>그래서 class보다 조금 늦을 수도 있음 (class는 render()만 실행)

함수안에 메소드가 재생성되는건 어쩔 수 없음

리액트에서는 html class 사용 불가, html for 사용 불가

className=""이라고 써야 사용 가능

htmlFor=""이라고 써야 사용 가능

 

될 때도 있는데 혼돈을 위해 써주는게 나을듯!

const onSubmitForm = (e) => {
        e.preventDefault();
        if (parseInt(value) === first * second) {
          setResult((prevResult)=>{
            return ('정답 !' + Value)
          });
          setFirst(Math.ceil(Math.random() * 9));
          setSecond(Math.ceil(Math.random() * 9));
          setValue('');
          inputRef.current.focus();     
        } else {
          setResult('땡')
          setValue('');     
          inputRef.current.focus();     
        }
      }

class 방식 컴포넌트처럼 이전 state 값을 사용할 때 state를 함수안에 넣을 수 있음

count 할 때 사용! (옛날 값에다 1을 더하는 경우)

setCount((c) => c + 1);
728x90
저작자표시

'유튜브 강의' 카테고리의 다른 글

제로초 리액트 강의 3.1 map  (0) 2021.11.04
제로초 리액트 강의 2.2  (0) 2021.11.01
제로초 리액트 강의 1.3  (0) 2021.10.31
제로초 리액트 강의 1.2 구구단 만들기  (0) 2021.10.30
제로초 리액트 강의 1.1  (0) 2021.10.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함