<!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>
<!-- first -->
<div id = "root"></div>
<script type = "text/babel">
class App extends React.Component{
render() {
const list = [
<li>apple</li>,
<li>banana</li>,
<li>pear</li>,
<li>orange</li>
]
return <ul>{list}</ul>
}
}
const container = document.getElementById('root')
ReactDOM.render(<App/>, container)
</script>
<!--second -->
<div id = "root1"></div>
<script type ="text/babel">
class App1 extends React.Component{
constructor(props){
super(props)
this.state = {
fruits: ['apple','banana','pear','orange']
}
}
render() {
const list = this.state.fruits.map((item) => {
return <li>{item}</li>
})
return <ul>{list}</ul>
}
}
const container = document.getElementById('root1')
ReactDOM.render(<App1/>, container)
</script>
<!-- third -->
<div id = "root2"></div>
<script type ="text/babel">
class App2 extends React.Component{
constructor(props){
super(props)
this.state = {
fruits: ['apple','banana','pear','orange']
}
}
render() {
return <ul>{
this.state.fruits.map((item) => {
return <li>{item}</li>
})
}</ul>
}
}
const container = document.getElementById('root2')
ReactDOM.render(<App2/>, container)
</script>
</body>
</html>### First Example: Static List
- **Component**: `App`
- **Container**: `<div id="root"></div>`
- **Description**: This component manually constructs an array of `<li>` elements containing fruit names and returns them wrapped within a `<ul>` element. The list is static and directly written within the `render` method, illustrating the simplest form of list rendering in React.
### Second Example: Dynamic List from State
- **Component**: `App1`
- **Container**: `<div id="root1"></div>`
- **Description**: Introduces state management within the component. The `fruits` state holds an array of fruit names. The `render` method uses the `map` function to dynamically generate an array of `<li>` elements from the `fruits` state, showcasing how to render lists based on dynamic data. This approach separates the data (state) from the presentation (JSX).
### Third Example: Inline Dynamic List Rendering
- **Component**: `App2`
- **Container**: `<div id="root2"></div>`
- **Description**: Similar to `App1`, this component stores fruit names in its state. However, the list rendering is done inline within the JSX returned by the `render` method. This example further simplifies the syntax by embedding the `map` call directly within the JSX, demonstrating a more concise way to render dynamic lists in React.
### Key Concepts Illustrated
- **JSX and JavaScript Expressions**: All examples demonstrate how JSX syntax can be intermixed with JavaScript expressions, such as variables (`list`) or `map` function calls, to dynamically generate UI elements.
- **State Management**: The second and third examples show how React's state system can be used to manage dynamic data that drives the UI rendering.
- **Mapping Arrays to JSX**: The use of the `map` function to transform arrays of data into arrays of JSX elements is a common pattern in React for rendering lists. It allows for dynamic creation of UI elements based on the data present in the component's state or props.
- **Keys in Lists**: While not explicitly shown in the examples, when rendering lists of elements dynamically, React recommends using a `key` prop on each element to provide a stable identity for each component in the list. This is important for performance and correctness during re-renders.
### Conclusion
These examples collectively demonstrate the flexibility of React for rendering lists, from static elements to dynamic lists based on component state, highlighting important practices and patterns in React development.
'개념 > React' 카테고리의 다른 글
| React Component) change to root component to class component (0) | 2025.01.11 |
|---|---|
| React Component) Child to Parent change state proper type (0) | 2025.01.10 |
| 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 |