React를 사용하여 렌더링한 후 입력 필드에 포커스 설정
입력 필드는 웹 사이트의 서버에 제출할 정보를 입력하는 넓은 막대입니다. 인기 있는 예는 google.com의 검색 표시줄입니다.
이 기사에서는 반응 구성 요소가 웹 페이지에서 렌더링된 후 입력 필드에 초점을 맞추는 다양한 방법을 보여줍니다.
React에서 componentDidMount() 메서드 사용
반응 프로젝트를 시작하려면 터미널에서 npx create-react-app exampleone을 사용하여 새 프로젝트를 만든 다음 프로젝트 이름으로 이동합니다.
componentDidMount() 메소드를 적용하면 페이지를 표시한 후 입력 필드에 초점을 맞출 수 있습니다. 이 함수는 첫 번째 페이지 렌더링이 끝날 때까지 데이터를 로드하지 않고 한 번 호출되므로 페이지 로드 속도를 높이는 데 좋습니다.
코드 스니펫 - App.js:
import React, { Component } from "react";
class App extends Component {
componentDidMount() {
this.nameInput.focus();
}
render() {
return (
<div>
<input
defaultValue="It Won't focus"
/>
<input
ref={(input) => { this.nameInput = input; }}
defaultValue="It will focus"
/>
</div>
);
}
}
export default App;
React에서 autoFocus Prop 메서드 사용
페이지가 처음 렌더링된 후 사용자를 위해 입력 필드가 자동으로 강조 표시됩니다. 이 방법은 페이지가 로드된 후 사용자가 입력 필드를 쉽게 찾을 수 있도록 많은 콘텐츠가 포함된 웹 사이트에 이상적입니다.
개발자는 이 autoFocus 기능을 염두에 두어야 합니다. 이러한 기능이 여러 요소에 적용되는 경우 첫 번째 기능에 초점이 맞춰지기 때문입니다.
코드 스니펫 - App.js:
import React, { Component } from "react";
class App extends Component {
render() {
return(
<div>
<input
defaultValue="It Won't focus"
/>
<input autoFocus
defaultValue="It will focus"
/>
</div>
);
}
}
export default App;
React에서 인라인 참조 속성 메서드 사용
이 방법을 사용하여 렌더 구성 요소 내부에 포커스 기능을 작성해야 합니다. 이 방법은 코딩이 쉽고 다른 개발자와 코드를 공유하는 상황에서 이해하기 쉬워 가장 편리합니다.
코드 스니펫 - App.js:
import React, { Component } from "react";
class App extends Component {
render() {
return(
<div>
<input
defaultValue="It Won't focus"
/>
<input
ref={(input) => {input && input.focus() }}
defaultValue="It will focus"
/>
</div>
);
}
}
export default App;
각 방법을 완료하면 npm start를 사용하여 애플리케이션을 실행합니다.
출력:
결론
React의 포커스 효과는 웹 페이지에 약간의 아름다움을 더하는 동시에 눈에 입력을 더 분명하게 만들어주기 때문에 사용자가 부드럽고 덜 번거로운 브라우징 경험을 얻을 수 있도록 돕는 방법입니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn