[React] 제어 컴포넌트 vs 비제어 컴포넌트

 

 

 

1. 제어 컴포넌트

---

인풋 태그의 value 속성을 지정하고 사용하는 컴포넌트이다.
리액트에서 인풋의 값을 제어하는 경우로 리액트에서 지정한 값과 실제 인풋 value 의 값이 항상 같다.

이렇게 하면 
1. 값을 예측하기가 쉽고 
2. 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있어서 리액트에서 권장하는 방법이다.

이때 State냐 Prop이냐는 중요하지 않고 리액트로 value 를 지정한다는 것이 핵심이다.

아래 두 경우 모두 제어 컴포넌트이다.

function TripSearchForm() {
  const [values, setValues] = useState({
    location: 'Seoul',
    checkIn: '2022-01-01',
    checkOut: '2022-01-02',
  })

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues((prevValues) => ({
      ...prevValues,
      [name]: value,
    }));
  }
    
  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={values.location} placeholder="어디로 여행가세요?" onChange={handleChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={values.checkIn} onChange={handleChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={values.checkOut} onChange={handleChange} />
      <button type="submit">검색</button>
    </form>
  )
}

function TripSearchForm({ values, onChange }) {
  return (
    <form>
      <h1>검색 시작하기</h1>
      <label htmlFor="location">위치</label>
      <input id="location" name="location" value={values.location} placeholder="어디로 여행가세요?" onChange={onChange} />
      <label htmlFor="checkIn">체크인</label>
      <input id="checkIn" type="date" name="checkIn" value={values.checkIn} onChange={onChange} />
      <label htmlFor="checkOut">체크아웃</label>
      <input id="checkOut" type="date" name="checkOut" value={values.checkOut} onChange={onChange} />
      <button type="submit">검색</button>
    </form>
  )
}

 

 

 

 

2. 비제어 컴포넌트

---

인풋 태그의 value 속성을 리액트에서 지정하지 않고 사용하는 컴포넌트이다.

다음과 같이 type이 file인 input을 선택하는 경우가 대표적이다.

<input type="file">

 

 

그 이유는 보안적인 측면 때문이다.

 

예를 들어 사용자가 직접 파일을 선택하지 않고 웹사이트에서 자동으로 사용자의 컴퓨터에 있는 파일을 선택하고 업로드하는 기능이 있다면 이 기능을 악용하여 사용자가 모르게 악성 파일을 업로드할 수 있다.

 

이런 악성 파일은 웹사이트나 사용자의 컴퓨터를 감염시켜 개인정보를 탈취하거나 데이터 손상을 일으킬 수 있다.

 

 

 

따라서 React에서 파일 업로드 기능을 구현하려면 다음과 같은 절차를 따른다.

1. 파일 선택: 사용자가 <input type="file" />을 통해 파일을 선택하면, 입력 요소의 onChange 이벤트를 통해 선택된 파일에 접근할 수 있다.
2. 파일 처리: 선택된 파일은 event.target.files 배열을 통해 접근할 수 있다. 이 배열에는 사용자가 선택한 파일들이 들어있다.
3. 업로드 또는 조작: 선택된 파일을 서버로 업로드하거나, 파일 API를 사용하여 JavaScript로 파일을 조작할 수 있다. (ex. 이미지 미리보기)

 

 

다음은 React에서 파일 업로드 기능을 구현하는 예제이다.

이 예제에서는 input value를 사용하지 않고 onChange 이벤트를 통해 선택된 파일을 상태에 저장한 뒤, handleFileUpload 함수에서 파일 업로드를 처리하고 있다.

import React, { useState } from 'react';

function FileUpload() {
    const [selectedFile, setSelectedFile] = useState(null);

    const handleFileChange = (event) => {
        // 선택된 파일을 상태에 저장
        setSelectedFile(event.target.files[0]);
    };

    const handleFileUpload = () => {
        if (selectedFile) {
            const formData = new FormData();
            formData.append('file', selectedFile);

            // 서버에 파일 업로드 요청
            fetch('/upload', {
                method: 'POST',
                body: formData,
            })
            .then(response => response.json())
            .then(data => {
                console.log('업로드 성공:', data);
            })
            .catch(error => {
                console.error('업로드 실패:', error);
            });
        }
    };

    return (
        <div>
            <input type="file" onChange={handleFileChange} />
            <button onClick={handleFileUpload}>업로드</button>
        </div>
    );
}

export default FileUpload;