HOWTO · React
React에 동적 구성 요소 추가
이 튜토리얼에서는 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가 있어야 합니다.
