[React] 입력 폼 다루기 [모꼬지 - Trouble Shooting]

📚입력을 외부에서 바꿔주는 방법

onChange를 이용해 값이 바뀔 때마다 각각의 input에 name으로 걸어줘서 value 값을 바꿔준다.

event처리할 때 <HTMLInputElement>를 붙여줘야 에러가 뜨지 않는다.

값을 사용할 때 inputs를 가져다가 사용하면 되고, setInputs()로 초기화도 시킬 수 있다.

타입스크립트에서 사용할 예제 코드는 다음과 같다.

  const contentInputRef = useRef<HTMLInputElement>(null);
  const [inputs, setInputs] = useState({ content: "" });
  const { content } = inputs;
  const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    const { name, value } = event.target; // 우선 e.target 에서 content와 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value, // content 키를 가진 값을 value 로 설정
    });
  };
...
  return (
    <div>
      <h3>리뷰 생성 Form</h3>
      <form>
        <div>
          <label htmlFor="content">content :</label>
          <input
            name="content"
            placeholder="내용"
            type="text"
            required
            id="content"
            onChange={onChangeHandler}
            value={content}
            ref={contentInputRef}
          />
 ...

🎨 useRef를 쓰는 경우

기본값으로 저장하고 싶을 때

• input 태그의 속성으로 defaultValue를 사용한다.

• value를 사용하면 값을 입력하려 해도 바뀌지 않는다.

• 이 때 넣어줄 값이 null이 될 수도 있다면(타입스크립트 에러 발생 상황) || 연산자를 통해 null인 경우는 빈 문자열로 대체 한다.

defaultValue={props.challenge.description || ""}

useRef를 쓸 때는 포커스를 맞추고 싶을 때 사용하면 좋다.