React_함수 구성 요소 및 useState를 사용하여 구구단 프로그램 만들기 (feat.Utilizing Fragment)

by


React_함수 구성 요소 및 useState를 사용하여 구구단 프로그램 만들기 (feat.Utilizing Fragment)

오늘은 React Function Components와 useState를 이용하여 9:9 구구단 프로그램을 만들고 깔끔한 코딩을 위해 Fragments를 사용하는 방법에 대해 알아보겠습니다.

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    'use strict'

     function ReactButton() {  // 함수컴포넌트
        // 구조분해
        const (Liked, setLiked) = React.useState(false);
        // 무엇으르 하든 결국 return 하는 것은 화면이다.


        if(liked) {
            return 'React Message When You Click On Button!
';
        }
        return (
            <button onClick={() =>{ setLiked(true); }}>Like</button>
        )
     }
</script>

<script type="text/babel">
    ReactDOM.createRoot(document.querySelector('#root')).render(<ReactButton />); // React18버전코드
</script>

기능성 컴포넌트 생성 과정 및 방법

  1. 위와 같이 함수를 생성하고 const를 통해 변수를 생성합니다.

  2. to const (useState(변수), setuseState(저장할 변수 값)) = React.useState((‘1’, ‘2’, ‘삼’, ‘4’, ‘5’,))
  3. 만약에(사용현황) 조건을 만듭니다.

    다시 말해서, useState가 반환될 때 표시할 내용을 결정합니다.

  4. 마지막 재실행에서 조건문이 적용되지 않는 다른 기본값이 화면에 표시되었습니다.

※ 함수 컴포넌트를 사용하는 경우 .this를 사용하지 않아도 됩니다.

// useState 사용방법
const (news, setNews) = React.useState(('뉴스1','뉴스2','뉴스3','뉴스4','뉴스5'))
const (category, setCategory) = React.useState(('스포츠','연예','경제','시사','정치'))

if(category === '스포츠') {
    return '스포츠화면';
}

return (
    <button onClick={() =>{ setCategory('스포츠'); }}>SPORTS</button>
)

useState를 잘 활용하고 브라우저 화면에서 useState를 보는 것만으로 useState의 구성을 대략적으로 추측하고 훌륭한 React 개발자가 될 수 있습니다.

  • useState를 사용하여 필요한 배열을 만들고 필요한 구성 요소를 로드할 수 있습니다.

  • setState를 사용하여 useState에 저장된 값을 변환하고 다시 저장하여 값을 호출합니다.

다양한 유형의 이벤트 리스너

딸깍 하는 소리 와는 별개로 onChange, onKeyup, onKeydown, onLoad, onblur, onKeypress 다양한 이벤트가 가능합니다.

'추천 관련글,

아래 코드를 복사하여 구구단 게임을 만드세요.

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

<script type="text/babel">
  'use strict';
  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.createRoot(document.querySelector('#root')).render(<GuGuDan/>);
</script>
</body>
</html>

매우 중요한 점

setValue(e.target.value) 값 상태를 변경하려면 setValue를 사용하십시오.

구구단 게임에 대한 코드 검토

  1. div 태그에 root의 id 값을 지정하여 드로잉 보드용 화면을 준비합니다.

  2. GuGuDan이라는 기능적 구성 요소를 만듭니다.

  3. GuGuDan 함수 컴포넌트에서 useState를 사용하여 사용할 변수를 지정합니다.
    • 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); // 사용법 참조 – 구성 요소만 편집하고 쿼리합니다.

  4. onSubmitForm이라는 함수를 만들고 조건문을 설정합니다.
    • const onSubmitForm = (e) => {
      e.preventDefault();
      if (parseInt(value) === first * second) { // 작은 값이 useState의 first와 second의 곱과 같으면 참
      setResult(‘정답입니다’);
      setFirst(Math.ceil(Math.random() * 9)); // 1에서 9까지의 새로운 난수를 첫 번째 변수에 할당합니다.


      setSecond(Math.ceil(Math.random() * 9)); // 1에서 9까지의 새로운 난수를 두 번째 변수에 할당합니다.


      setvalue(”); // 작은 값에 대한 값을 초기화합니다.


      inputEl.current.focus();
      } 또 다른 {
      setResult(‘정답이 아닙니다.

      ’); // 작은 값이 첫 번째와 두 번째 useState의 곱과 같으면 false입니다.


      setvalue(”); // 작은 값에 대한 값을 초기화합니다.


      inputEl.current.focus(); // inputEl에 포커스를 줍니다.


      }
      };
  5. 브라우저 화면에 표시될 HTML 태그와 필수 JavaScript 변수는 { }를 사용하여 가져옵니다.
    • 반품(
      // 태그를 Fragment로 한 번 래핑하여 오류를 방지합니다.


      {처음}번 {초}번?

      <表单提交={onSubmitForm}>
      < 엔터
      ref={inputEl} // id by reference와 같은 개념
      유형=”숫자” // 유형
      value={value} // 입력 값입니다.

      useState는 실시간으로 렌더링될 때마다 변경됩니다.


      onChange={(e) => setValue(e.target.value)} // 중요!
      !

      />

      {결과}


      );

  6. 마지막으로 GuGuDan이라는 컴포넌트가 id가 root인 label 요소에 첨부되어 브라우저 화면에 렌더링됩니다.