📖[React] useRef()

word를 입력받을 component 형성

CreateWord.js

export default function CreateWord() {
  return (
    <form>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" />
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" />
      </div>
      <div className="input_area">
        <label>Day</label>
        <select>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
      <button>저장</button>
    </form>
  );
}

입력받는 <form> 태그 이용!

이때, day는 data에서 불러옴

CreateWord.js

import useFetch from "../hooks/useFetch";

export default function CreateWord() {
  const days = useFetch("http://localhost:3001/days");
  return (
    <form>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" />
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" />
      </div>
      <div className="input_area">
        <label>Day</label>
        <select>
          {days.map((day) => (
            <option key={day.id} value={day.day}>
              {day.day}
            </option>
          ))}
        </select>
      </div>
      <button>저장</button>
    </form>
  );
}

앞서 만들어 두었던 useFetch()를 활용하여, day의 data를 불러옴
각 day들을 선택하는 형태로 다시 나열해야 하므로, 즉 형태만 변환! => map함수 사용

저장 버튼을 누르면, 새로고침을 막는 함수 추가

import useFetch from "../hooks/useFetch";

export default function CreateWord() {
  const days = useFetch("http://localhost:3001/days");

  function onSubmit(e) {
  e.preventDefault();
}

  return (
    <form onSubmit={onSubmit}>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" />
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" />
      </div>
      <div className="input_area">
        <label>Day</label>
        <select>
          {days.map((day) => (
            <option key={day.id} value={day.day}>
              {day.day}
            </option>
          ))}
        </select>
      </div>
      <button>저장</button>
    </form>
  );
}

event가 생겨도 새로 고침을 하지 않도록, preventDefault()를 사용
form태그로 감싸져 있어, 새로고침이 되는 것이므로 form에 onSubmit함수 추가
=> 기본 기능을 막아 주는 것

저장 버튼을 눌렀을 때, 단어와 뜻의 정보를 찍기

input창에 적힌 값들을 얻기 위해서 useRef() 사용

useRef()는 DOM에 접근할 수 있도록 함 (스크롤 위치 확인, 포커스 줄 때 등 사용), DOM 요소가 생성된 후 접근할 수 있음

import { useRef } from "react";
import useFetch from "../hooks/useFetch";

export default function CreateWord() {
  const days = useFetch("http://localhost:3001/days");
  
  function onSubmit(e) {
  e.preventDefault();
  
  console.log(engRef.current.value);
  console.log(korRef.current.value);
  console.log(dayRef.current.value);
}

const engRef = useRef(null);
const korRef = useRef(null);
const dayRef = useRef(null);
  return (
    <form onSubmit={onSubmit}>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" ref={engRef} />
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" ref={korRef} />
      </div>
      <div className="input_area">
        <label>Day</label>
        <select ref={dayRef}>
          {days.map((day) => (
            <option key={day.id} value={day.day}>
              {day.day}
            </option>
          ))}
        </select>
      </div>
      <button>저장</button>
    </form>
  );
}

각 입력 부분에 대한 Ref() 생성 후 연결
DOM 요소 생성 이후 접근 가능
저장 버튼 -> 렌더링 결과가 DOM에 반영된 이후를 보여줌
const engRef = useRef(null); 입력하고, 저장버튼을 눌렀을 때 그에 대한 입력 결과에 접근할 수 있음
current 속성 = 해당 요소에 접근
value = input에 입력된 값