React에 동적 구성 요소 추가
모든 React 애플리케이션에서 동적 요소를 사용하는 것은 매우 일반적입니다. 동적 요소의 가장 흥미로운 기능은 사용자가 변경 사항을 확인하기 위해 웹 페이지를 새로 고칠 필요가 없다는 것입니다.
예를 들어 하나 이상의 입력 필드가 필요한 경우 버튼을 클릭하여 쉽게 새 입력 필드를 생성할 수 있습니다.
이 짧은 기사에서는 React JS에 동적 요소를 포함하는 방법을 살펴보고 주제를 더 쉽게 만들기 위해 필요한 예제와 설명을 사용하여 주제에 대해 논의합니다.
React에 동적 구성 요소 추가
웹 애플리케이션에 대한 동적 요소를 추가하려면 아래와 같은 기본 구성 요소로 별도의 JS 파일을 만들어야 합니다.
코드 - App.js:
import react from 'react';
class DynamicComponent extends react.Component {
constructor() {
super() {
this.state = { addNew: [{}] }
}
}
addLine() {
this.setState(({addNew: [...this.state.addNew, {}]}))
}
render() {
return(
<div>
<center>
{this.state.addNew.map(()=>(
<h2>This is a dynamic text</h2>
))}
<button onClick={()=>this.addLine()}>Add new</button>
</center>
</div>
)
}
}
export default DynamicComponent;
먼저 위의 예제 파일에서 애플리케이션에 필요한 파일과 패키지를 가져왔습니다. 그런 다음 react.Component로 확장되는 클래스를 만듭니다.
이제 클래스 구조의 중요한 부분에 대해 논의하겠습니다. 먼저 constructor() 클래스에는 통계 배열을 정의하는 super()가 포함되어 있습니다.
각 요소를 시작하는 addLine()이라는 함수입니다. 마지막으로 전체 사용자 인터페이스를 구성하는 render() 함수가 있으며 이 함수 내에서 상태를 매핑하고 동적으로 구현해야 하는 코드를 정의하기 위해 map()을 만들었습니다.
그런 다음 버튼 요소를 만들고 함수의 onclick 이벤트는 addLine()입니다.
index.js 파일을 살펴보겠습니다. 이 파일은 다음과 같이 몇 가지 변경이 필요합니다.
코드 - index.js:
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import DynamicComponent from './component';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<DynamicComponent />
</React.StrictMode>
);
reportWebVitals();
위의 JS 파일에서 JS 파일을 import한 후 클래스만 전달했습니다. 위의 예제를 실행하면 콘솔에 아래와 같은 출력이 표시됩니다.
출력:
이 글에서 공유하는 예제 코드는 React JS 프로젝트로 작성되었습니다. React 프로젝트를 실행하려면 시스템에 최신 버전의 Node JS가 있어야 합니다.
Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.
LinkedIn