React에서 자동 완성 구성 요소를 구축하는 방법
소개
자동 완성은 입력 필드가 사용자 입력을 기반으로 단어를 제안하는 기능입니다. 이는 검색이 필요한 경우와 같이 애플리케이션의 사용자 경험을 개선하는 데 도움이 됩니다.
이 기사에서는 React에서 자동 완성 구성 요소를 빌드하는 방법을 살펴봅니다. 고정된 제안 목록, 이벤트 바인딩, 키보드 코드 이해 및 상태 관리 작업을 수행합니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
- React에 대한 이해가 필요합니다. React에 대해 자세히 알아보려면 How To Code in React 시리즈를 확인하세요.
1단계 - 자동 완성 구성 요소 구축
자동 완성 구성 요소는 자동 완성 기능의 기능을 만드는 곳입니다.
Autocomplete.js 파일을 만들고 React를 가져와서 Autocomplete 클래스를 인스턴스화합니다.
import React, { Component, Fragment } from "react";
import './styles.css'
class Autocomplete extends Component {
constructor(props) {
super(props);
this.state = {
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: ""
};
}
주에서 activeSuggestion 속성은 선택한 제안의 인덱스를 정의합니다. 빈 배열로 설정된 filteredSuggestions 속성은 사용자의 입력과 일치합니다. showSuggestions 속성은 제안 목록이 표시되는지 여부를 결정하고 userInput 속성은 사용자 입력에서 단어를 수락하기 위해 자신에게 빈 문자열을 할당합니다.
클래스가 시작되고 상태가 설정되면 구성 요소에 적용할 메서드를 살펴보겠습니다.
Autocomplete.js 파일에서 onChange 메서드를 정의하고 상태를 업데이트합니다.
onChange = e => {
const { suggestions } = this.props;
const userInput = e.currentTarget.value;
const filteredSuggestions = suggestions.filter(
suggestion =>
suggestion.toLowerCase().indexOf(userInput.toLowerCase()) > -1
);
this.setState({
activeSuggestion: 0,
filteredSuggestions,
showSuggestions: true,
userInput: e.currentTarget.value
});
};
onChange 메서드는 사용자가 입력 값을 변경할 때 실행됩니다. 변경될 때마다 메서드는 제안 목록으로 필터링하고 사용자 입력이 포함되지 않은 제안을 반환합니다. 필터가 실행되면 .setState() 메서드는 값을 포함하도록 상태의 userInput 속성을 수정하고 showSuggestions 부울을 허용하도록 설정합니다. 각 메서드 호출에서 activeSuggestion 속성을 표시하고 재설정합니다.
onClick 이벤트는 사용자가 제안을 클릭할 때 호출됩니다. Autocomplete.js 파일에서 onClick 메서드를 선언하고 .setState() 메서드를 구현합니다.
onClick = e => {
this.setState({
activeSuggestion: 0,
filteredSuggestions: [],
showSuggestions: false,
userInput: e.currentTarget.innerText
});
};
.setState() 메서드는 사용자의 입력을 업데이트하고 상태 속성을 재설정합니다.
onKeyDown 메서드는 사용자가 키를 누를 때 작동합니다. Autocomplete.js 파일에서 onKeyDown 메서드를 선언하고 몇 가지 조건을 설정합니다.
onKeyDown = e => {
const { activeSuggestion, filteredSuggestions } = this.state;
if (e.keyCode === 13) {
this.setState({
activeSuggestion: 0,
showSuggestions: false,
userInput: filteredSuggestions[activeSuggestion]
});
} else if (e.keyCode === 38) {
if (activeSuggestion === 0) {
return;
}
this.setState({ activeSuggestion: activeSuggestion - 1 });
}
// User pressed the down arrow, increment the index
else if (e.keyCode === 40) {
if (activeSuggestion - 1 === filteredSuggestions.length) {
return;
}
this.setState({ activeSuggestion: activeSuggestion + 1 });
}
};
분해된 개체에 activeSuggestion 및 filteredSuggestion 속성을 저장하면 조건부가 사용자가 누른 키가 키 코드와 일치하는지 확인합니다. 첫 번째 조건은 키 코드가 Enter 키인 13과 일치하는지 확인하고 .setState() 메서드를 실행하여 userInput 속성을 업데이트합니다. 제안 목록을 닫습니다. 사용자가 위쪽 화살표 키 코드 38을 누른 경우 조건은 activeSuggestion 속성의 인덱스를 감소시키고 인덱스가 0이면 아무 것도 반환하지 않습니다. 사용자가 아래쪽 화살표 키 코드 40을 누르면 조건이 activeSuggestion 속성의 인덱스를 증가시키고 인덱스가 <filteredSuggestions 속성.
이제 메서드가 완료되었으므로 render 수명 주기 메서드 적용으로 이동하겠습니다.
Autocomplete.js 파일에서 render() 문을 설정하고 분해된 개체에서 메서드와 상태를 정의합니다.
render() {
const {
onChange,
onClick,
onKeyDown,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
let suggestionsListComponent;
변수 suggestionsListComponent에는 아래 조건에서 할당하므로 정의된 값이 없습니다.
if (showSuggestions && userInput) {
if (filteredSuggestions.length) {
suggestionsListComponent = (
<ul class="suggestions">
{filteredSuggestions.map((suggestion, index) => {
let className;
// Flag the active suggestion with a class
if (index === activeSuggestion) {
className = "suggestion-active";
}
return (
<li className={className} key={suggestion} onClick={onClick}>
{suggestion}
</li>
);
})}
</ul>
);
} else {
suggestionsListComponent = (
<div class="no-suggestions">
<em>No suggestions available.</em>
</div>
);
}
}
첫 번째 조건은 showSuggestions 및 userInput 속성의 값이 존재하는지 확인하고 다음 조건은 filteredSuggestions 속성의 길이를 확인합니다. . 조건이 충족되면 suggestionsListComponent 변수는 filteredSuggestions 속성을 통해 반복하는 값을 자신에게 할당하고 인덱스가 activeSuggestion 속성. suggestionsListComponent 변수는 onClick 메서드 실행 시 정렬된 제안 목록을 반환하고 각 제안에 클래스 이름을 할당합니다. 속성 showSuggestions 및 userInput의 값이 존재하지 않는 경우 사용 가능한 제안이 없음을 나타내는 텍스트가 나타납니다.
사용자가 나열된 조건을 충족하지 않는 경우 render() 수명 주기 메서드는 React Fragment를 반환하여 입력 필드를 적용하고 추가 노드를 추가하지 않고 메서드를 호출합니다. 문서 개체 모델:
return (
<Fragment>
<input
type="text"
onChange={onChange}
onKeyDown={onKeyDown}
value={userInput}
/>
{suggestionsListComponent}
</Fragment>
);
}
}
export default Autocomplete;
이제 자동 완성 구성 요소를 개발했으므로 파일을 내보내 해당 기능을 다른 구성 요소에 결합합니다.
2단계 — React 프로젝트 참여
앱 구성 요소는 자동 완성 구성 요소의 기능을 표시하는 곳입니다. index.js 파일에서 App 구성 요소를 선언하고 자동 완성 구성 요소를 가져옵니다.
import React from "react";
import Autocomplete from "./Autocomplete";
function App() {
return (
<div>
<h1>React Autocomplete Demo</h1>
<h2>Start typing and experience the autocomplete wizardry!</h2>
<Autocomplete suggestions={"Oranges", "Apples", "Banana", "Kiwi", "Mango"]}/>
</div>
);
}
export default App
App 구성 요소의 return 문은 고정 제안 목록이 있는 자동 완성 구성 요소를 허용합니다.
3단계 — 자동 완성 구성 요소 스타일 지정
자동 완성 구성 요소를 완료하려면 CSS로 스타일을 추가하여 애플리케이션과 입력 필드를 배치하고 색상을 지정하세요.
styles.css 파일을 만들고 CSS 규칙을 설정하여 자동완성 구성 요소를 구성합니다.
body {
font-family: sans-serif;
}
input {
border: 1px solid #999;
padding: 0.5rem;
width: 300px;
}
.no-suggestions {
color: #999;
padding: 0.5rem;
}
.suggestions {
border: 1px solid #999;
border-top-width: 0;
list-style: none;
margin-top: 0;
max-height: 143px;
overflow-y: auto;
padding-left: 0;
width: calc(300px + 1rem);
}
.suggestions li {
padding: 0.5rem;
}
.suggestion-active,
.suggestions li:hover {
background-color: #008f68;
color: #fae042;
cursor: pointer;
font-weight: 700;
}
.suggestions li:not(:last-of-type) {
border-bottom: 1px solid #999;
}
CSS 규칙이 구성되면 파일을 Autocomplete.js 파일로 가져와서 스타일을 적용합니다.
결론
React는 사용자와 상호 작용할 수 있는 기본 제공 및 사용자 지정 방법을 사용하여 하나의 구성 요소에서 사용할 수 있는 자동 완성 기능을 구성하는 방법을 제공합니다.
CodeSandbox에서 Autocomplete 구성 요소가 어떻게 작동하는지 확인하십시오.