[React] 텍스트 입력 시 자동으로 필드 추가하기 (Material UI 활용)

 

 

안녕하세요 오늘은 리액트를 활용하여  

텍스트 입력 시, 새로운 창이 자동으로 추가 되는 입력 폼을 만들어보도록 하겠습니다. 

 

 

1. 먼저 깔끔한 텍스트 입력창을 위해 Material UI 라이브러리 를 프로젝트에 추가해줍니다. 

npm install @mui/material @emotion/react @emotion/styled

 

 

Material UI 공식 홈페이지 - 설치 및 사용방법 안내 

Installation - Material UI

 

- Material UI 는 Google의 Material Design 원칙을 기반으로 한 React 라이브러리입니다. 

- 버튼, 폼, 테이블, 차트 등 다양한 컴포넌트를 제공합니다. 

 

 

2. 입력 시 자동으로 줄 추가 

if (index === inputs.length - 1 && value.trim() !== '') {
  setInputs([...newInputs, '']);
}

 

- 마지막 창에 글자가 입력되면 자동으로 빈 입력창 (' ') 을 추가하는 로직입니다. 

- 즉, 항상 마지막 줄은 비워져 있고, 입력이 생기면 새로운 줄이 생겨나는 형태가 됩니다.

 

 

3. 입력창을 반복 렌더링

{inputs.map((value, index) => (
  <TextField
    key={index}
    label={`입력 ${index + 1}`}
    variant="outlined"
    value={value}
    onChange={(e) => handleChange(index, e.target.value)}
    fullWidth
  />
))}

 

- 배열의 길이만큼 TextField를 반복해서 렌더링합니다.

- 각 TextField는 고유의 인덱스(label) 를 가지고 있습니다.

- 사용자가 입력을 하면 해당 인덱스의 값만 handleChange로 업데이트됩니다.

 

 

 

 

전체 코드 입니다. 

import { useState } from 'react';
import { TextField, Container, Typography, Box } from '@mui/material';
import '@fontsource/roboto'; // Roboto 폰트

function App() {
  const [inputs, setInputs] = useState(['']);

  const handleChange = (index, value) => {
    const newInputs = [...inputs];
    newInputs[index] = value;
    setInputs(newInputs);

    // 마지막 줄에 입력이 생기면 새 줄 추가
    if (index === inputs.length - 1 && value.trim() !== '') {
      setInputs([...newInputs, '']);
    }
  };

  return (
    <Container maxWidth="sm" sx={{ paddingTop: 5 }}>
      <Typography variant="h5" gutterBottom>
        글자를 입력하세요
      </Typography>
      <Box display="flex" flexDirection="column" gap={2}>
        {inputs.map((value, index) => (
          <TextField
            key={index}
            label={`입력 ${index + 1}`}
            variant="outlined"
            value={value}
            onChange={(e) => handleChange(index, e.target.value)}
            fullWidth
          />
        ))}
      </Box>
    </Container>
  );
}

export default App;

 

 

시연 영상입니다. 

 

 

 

감사합니다.