[웹 게임을 만들며 배우는 React] - 끝말잇기(class와 hooks 사용, controlled & uncontrolled)

 

출처: https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의

 

 

* class version

▶ Component 사용

▶ this 사용

const React = require("react");
const { Component } = React;

class WordRelay extends Component {
  state = {
    word: "제로초",
    value: "",
    result: "",
  };

  onSubmitForm = (e) => {
    e.preventDefault();
    if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
      this.setState({
        result: "딩동댕",
        word: this.state.value,
        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 (
      <>
        <div>{this.state.word}</div>
        <form onSubmit={this.onSubmitForm}>
          <input
            ref={this.onRefInput}
            value={this.state.value}
            onChange={this.onChange}
          />
          <button>클릭!!!</button>
        </form>
        <button>클릭!!!</button>
        <div>{this.state.result}</div>
      </>
    );
  }
}

module.exports = WordRelay;

 

 

* Hooks 사용

▶ 코드가 간결해짐(this 사용하지 않음)

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

const WordRelay = () => {
  const [word, setWord] = useState("제로초");
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");
  const inputRef = useRef(null);

 const onSubmitForm = (e) => {
    e.preventDefault();
    if (word[word.length - 1] === value[0]) {
      setResult("딩동댕");
      setWord(value);
      setValue("");
      inputRef.current.focus();
    } else {
      setResult("땡");
      setValue("");
      inputRef.current.focus();
    }
  };
  const onChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <div>{word}</div>
      <form onSubmit={onSubmitForm}>
        <input ref={inputRef} value={value} onChange={onChange} />
        <button>클릭!!!</button>
      </form>
      <div>{result}</div>
    </>
  );
};

module.exports = WordRelay;

 

 

* controlled VS uncontrolled

- controlled 

▶ 리액트에서 더 권장, value(state가 들어있음, setState로 value를 바꿔줌)와 onChange가 input에 존재

▶ input 요소의 onChange 콜백함수에서 setState를 통해 State가 업데이트됨

▶ 업데이트된 State는 랜더링을 통해 input의 value 속성으로 들어감

▶ 단점 : 각각의 input에 대한 useState와 Handler를 선언해야 함

 

- uncontrolled

▶ input의 원시적인 형태에 가까움, state를 직접 가지고 있지 않음

▶ useState가 아닌 HTML State로 관리됨

▣ State를 직접 가지고 있지 않기 때문에 기능적으로 많은 것이 닫혀있음

 

* 예시 참고 : https://mygumi.tistory.com/419

[React] Controlled vs Uncontrolled :: 마이구미