[React]조건부로 입력필드에 focus하기

예제

import { useState, useRef, useEffect } from 'react';
import './App.css';
import MyInput from './Myinput';

export default function App() {
  //초기값 설정
  const [firstName, setFirstName] = useState('테일러');
  const [lastName, setLastName] = useState('스위프트');
  const [toggleForm, setToggleForm] = useState(true);

  function handleFirstName(e) {
    setFirstName(e.target.value);
  }
  function handleLastName(e) {
    setLastName(e.target.value);
  }

  return (
    <div className="app">
      <div className="btn_wrap">
        <button
          className="btn"
          type="button"
          onClick={() => setToggleForm(!toggleForm)}
        >
          form {toggleForm ? '숨기기' : '보이기'}
        </button>
      </div>
      {toggleForm && (
        <div className="input_area">
          <div>
            <label>이름을 입력하세요: </label>
            <MyInput
              value={firstName}
              shouldFocus={true}
              onChange={handleFirstName}
            />
          </div>
          <div>
            <label>성을 입력하세요: </label>
            <MyInput
              value={lastName}
              shouldFocus={false}
              onChange={handleLastName}
            />
          </div>
          <p>
            안녕하세요, {firstName} {lastName}님
          </p>
        </div>
      )}
    </div>
  );
}

 

결과물1

=> 기본값 : 테일러 / 스위프트라고 써있음

 

=> 적는대로 밑에 내용이 바뀜

 

결과물2 - form숨기기/ 보이기

=> form을 누르면 숨겨지고 다시 누르면 보인다.