React 입력 폼 다루기

1. 리액트에서 입력 폼 만들기

제어 컴포넌트

• 제어 컴포넌트(Controlled Component)는 React에서 Form input value를 관리하기 위해 사용하는 방법 중 하나로, <input>의 value attribute를 컴포넌트의 state에 저장하고, 변경 이벤트onChange를 핸들링하여 state를 업데이트하는 컴포넌트입니다.
  • onChange Form 요소의 값이 변경될 때 발생하는 이벤트
• 제어 컴포넌트를 사용하면 React 컴포넌트가 Form 요소의 값과 상태를 완전히 관리할 수 있으므로, Form 요소의 상태를 다른 컴포넌트에서도 공유할 수 있습니다. 또한, Form 요소의 값을 유효성 검사하고, 필요한 경우 에러를 표시하는 등의 추가적인 기능을 구현할 수 있습니다.

React에서 onSubmit 이벤트를 활용하는 방법

• handleSubmit 함수를 만들어 form submit 시 호출될 함수를 정의합니다.
• handleSubmit에서 event.preventDefault()를 호출하여 기본 동작인 페이지가 새로고침되는 것을 방지해야 합니다.

React에서 하나의 state로 Form 관리하는 방법

• <input>의 name attribute를 활용하여 state를 객체로 구성하면 됩니다.

파일 인풋

• 보안 문제로 HTMLInputElement에서 value는 반드시 사용자만 값을 바꿀 수 있고, 자바스크립트 코드로는 빈 문자열로만 바꿀 수 있습니다.
• FileInput은 value prop을 지정할 수 없고 반드시 비제어 컴포넌트로 만들어야 합니다.

스택 트레이스

• 스택 트레이스(stack trace)는 프로그램에서 오류(Error)가 발생했을 때, 해당 오류가 어디에서 발생했는지를 추적하는 과정에서 쌓이는 함수 호출 스택(call stack) 정보입니다.
• 스택 트레이스는 보통 오류 메시지와 함께 출력되며, 함수 호출 스택의 맨 위에 있는 함수부터 시작하여 오류를 발생시킨 함수까지의 모든 함수 호출 경로를 보여줍니다.
• 스택 트레이스는 코드에서 오류가 발생한 원인을 파악하고 디버깅하는 데 매우 유용합니다.

2. ref로 DOM 노드 가져오기

ref prop

• React의 ref prop은 React 컴포넌트에서 DOM 요소에 직접적으로 접근할 수 있도록 해주는 기능입니다.
• ref는 React에서 제공하는 특별한 prop으로, JSX에서 컴포넌트에 ref 속성을 추가하고 함수나 객체를 할당하여 사용할 수 있습니다.

useRef()

• useRef()는 React Hooks 중 하나로, 함수형 컴포넌트에서 ref 객체를 생성할 수 있게 해주는 함수입니다.
• useRef를 호출하면 객체가 반환되는데, 이 객체는 current라는 프로퍼티를 가지며, 이 프로퍼티를 통해 ref를 이용하여 생성된 DOM 요소를 참조할 수 있습니다.

파일 인풋 초기화

• useRef() 함수로 ref 객체를 만듭니다.
• input 태그에 ref prop으로 useRef로 만든 객체를 내려줍니다.
• ref.current가 존재하면 ref.current.value를 빈 문자열로 할당하고 onChange 아규먼트로 value 값을 null으로 전달합니다.
• 예시

import { useRef } from "react";

function FileInput({ name, value, onChange }) {
  const inputRef = useRef();
  const handleChange = (e) => {
    const nextValue = e.target.files[0];
    onChange(name, nextValue);
  };

  const handleClearClick = () => {
    const inputNode = inputRef.current;
    if (!inputNode) return;

    inputNode.value = "";
    onChange(name, null);
  };

  return (
    <div>
      <input type="file" onChange={handleChange} ref={inputRef} />
      {value && <button onClick={handleClearClick}>X</button>}
    </div>
  );
}

export default FileInput;

3. 이미지 파일 미리보기

URL.createObjecURL()

• URL.createObjectURL() 메서드는 Blob, File 등의 객체를 URL 형식의 문자열로 변환하는 메서드입니다.
• 이미지 파일을 미리보기하기 위해 Blob 객체를 생성하고, 이를 <img> 태그의 src 속성에 할당하려 할 때, URL.createObjectURL() 메서드를 사용하여 Blob 객체를 URL 형식의 문자열로 변환하고, 이 문자열을 src 속성에 할당하면 브라우저는 이 URL을 통해 Blob 객체를 로드하여 이미지를 표시합니다.
• ObjectURL를 만드는 동작은 웹 브라우저의 메모리를 할당받는 사이드 이펙트입니다.

URL.revokeObjectURL()

• URL.revokeObjectURL() 메서드는 URL.createObjectURL() 메서드를 사용하여 생성한 URL을 해제하는 함수입니다.
• 이 메서드를 사용하지 않으면, 브라우저는 메모리 누수(memory leak)가 발생할 수 있습니다.
• createObjectURL() 메서드로 리소스가 발생했으므로 useEffect()의 cleanup function으로 해제해줘야 합니다.

Feedback

• cleanup function은 콜백을 리턴해야 하는 점에 주의하자.
• React Hooks의 내부 동작 원리를 공부해보자.

Reference

• React로 데이터 다루기 - React 강의 | 코드잇