<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
this.changeParent = this.changeParent.bind(this);
}
changeParent(event) {
this.setState({
value: event.target.value
});
}
render() {
return <div>
<CustomInput onChange={this.changeParent} />
<h1>{this.state.value}</h1>
</div>
}
}
class CustomInput extends React.Component {
render() {
return <div>
<input onChange={this.props.onChange} />
</div>
}
}
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
</script>
</body>
</html>
### Breakdown of the Application
- **React and ReactDOM Libraries**: The application includes React and ReactDOM libraries via CDN, using the UMD (Universal Module Definition) format. Babel standalone is also included to allow JSX syntax to be directly used within the browser.
- **The `App` Component**:
- This is a class-based component that serves as the parent component in the hierarchy.
- It initializes a state variable `value` to an empty string. This state holds the data that will be updated based on user input.
- It defines a method `changeParent`, which is bound to the instance in the constructor to ensure `this` within the method refers to the `App` component. `changeParent` updates the `App` component's state with the value entered in the `CustomInput` component's input field.
- The render method returns a `div` containing the `CustomInput` component and an `<h1>` element. The `CustomInput` component is passed the `changeParent` method via props as its `onChange` handler. The `<h1>` element displays the current state value.
- **The `CustomInput` Component**:
- This is a class-based component that represents a custom input field.
- It renders an `<input>` element. The `onChange` prop passed from the `App` component is used as the event handler for the `<input>` element's `onChange` event. This setup allows the `App` component to react to changes in the `CustomInput` field.
- **State and Props Flow**:
- When a user types into the input field in `CustomInput`, the `onChange` event triggers, invoking the `changeParent` method of the `App` component with the new input value.
- The `changeParent` method updates the `App` component's state with the new value, triggering a re-render.
- The new state value is then displayed in the `<h1>` element, effectively reflecting the input field's current value in real-time.
### Key Concepts Illustrated
- **State Management**: The application shows how React state can be updated in response to user input and how state changes trigger re-renders to reflect new data.
- **Component Composition**: Demonstrates how components can be composed together, with `CustomInput` being used within `App`.
- **Data Flow Between Components**: Highlights the unidirectional data flow pattern in React, where state is managed in parent components and passed down to child components through props. The child component communicates back to the parent via callbacks, also passed down through props.
### Conclusion
This simple yet instructive example encapsulates essential React concepts such as component structure, state management, and the parent-child component relationship, demonstrating how data and behavior can be encapsulated within components and managed across the component tree.
'개념 > React' 카테고리의 다른 글
| React Component) change to root component to class component (0) | 2025.01.11 |
|---|---|
| React Component) Component array (0) | 2025.01.09 |
| React Component) component property (0) | 2025.01.08 |
| React Component) confirm of propertype to item Component (1) | 2025.01.07 |
| React Component) format output (0) | 2025.01.06 |