const { id, password, confirmPassword } = this.state;

#this.idInputRef = React.createRef();

ㄴ 투데이 원데이 투데이. 포인트!!

---

class App extends Component {

클래스형 컴포넌트를 만들거야 ok?App.js에 만들거다~

constructor(props) {

구조는 프롭스로 생성할꾸야! 자 {}중괄호를 썼다면? 리턴이랑 객체랑 같이 가는거야!

super(props);

슈퍼에 프롭스를 보낼거야. 프롭스?!매개변수 기억나지!

this.state = {

그리고 이.상태 라는 객체를 만들거야~
객체안에 id pw 컨펌pw/ errors안에도 똑같이 id pw 컨펌pw를 만들거야~
왜냐면, 잘못입력했을때도 생각해보자!는 의미에서~

this.idInputRef = React.createRef();

응. 이.id에 레퍼런스넣을건데 얘네 전체~를 "리액트.크리에이트레퍼런스" 로 만들어주는거지

---

코드완성

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      password: "",
      confirmPassword: "",
      errors: {
        id: "",
        password: "",
        confirmPassword: "",
      },
    };
    this.idInputRef = React.createRef();
    this.passwordInputRef = React.createRef();
    this.confirmPasswordInputRef = React.createRef();
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const { id, password, confirmPassword } = this.state;

    let errors = {
      id: "",
      password: "",
      confirmPassword: "",
    };
    let focusField = null;

    if (!id.trim()) {
      errors.id = "ID를 입력하세요.";
      focusField = this.idInputRef;
    } else if (!password.trim()) {
      errors.password = "비밀번호를 입력하세요.";
      focusField = this.passwordInputRef;
    } else if (password !== confirmPassword) {
      errors.confirmPassword = "비밀번호가 일치하지 않습니다.";
      focusField = this.confirmPasswordInputRef;
    }

    this.setState({ errors }, () => {
      if (focusField) {
        focusField.current.focus();
      } else {
        alert("등록이 완료되었습니다!");
      }
    });
  };

  render() {
    const { id, password, confirmPassword, errors } = this.state;

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>
              ID: 
              <input
                type="text"
                name="id"
                value={id}
                onChange={this.handleChange}
                ref={this.idInputRef}
              />
            </label>
            {errors.id && <div style={{ color: "red" }}>{errors.id}</div>}
          </div>
          <div>
            <label>
              Password: 
              <input
                type="password"
                name="password"
                value={password}
                onChange={this.handleChange}
                ref={this.passwordInputRef}
              />
            </label>
            {errors.password && (
              <div style={{ color: "red" }}>{errors.password}</div>
            )}
          </div>
          <div>
            <label>
              Confirm Password: 
              <input
                type="password"
                name="confirmPassword"
                value={confirmPassword}
                onChange={this.handleChange}
                ref={this.confirmPasswordInputRef}
              />
            </label>
            {errors.confirmPassword && (
              <div style={{ color: "red" }}>{errors.confirmPassword}</div>
            )}
          </div>
          <button type="submit">등록</button>
        </form>
      </div>
    );
  }
}

export default App;

더 자세한 설명은
https://velog.io/@mgkik/react-reference 여기를 클릭해봐!

밥먹으러가야지. .. 꼬르륵... 하얼빈 보고싶다.. 현빈 잘생겼어..

Корея, ура!까레아! 우라! 한국 만세!

Корея, ура!까레아! 우라! 한국 만세!

Корея, ура!까레아! 우라! 한국 만세!

3번 외치고 간..현빈..