const mycomponent = props =>{
return <div>hello, my name is {props.name}</div>;
};
mycomponent.defaultProps ={
name :'user name'
};
export default mycomponent;
### Functional Component with Props
- **Functional Component**: The component is defined as a functional component that accepts `props` as an argument. This simple pattern is used for components that do not need to manage state or use lifecycle methods.
- **Rendering with Props**: Inside the returned JSX, it uses `props.name` to dynamically insert the `name` prop's value into the rendered output. This allows the component to display different content based on the `name` prop provided by the parent component.
### Default Props
- **Setting Default Props**: After the component definition, `mycomponent.defaultProps` is assigned an object that specifies default values for the component's props. In this case, if `mycomponent` is used without specifying a `name` prop, `"user name"` will be used as a default value. This feature is useful for ensuring that your component behaves predictably even when certain props are not provided by the parent component.
### Exporting the Component
- **Export Statement**: At the end of the file, the component is exported with `export default mycomponent;`. This makes `mycomponent` available for import in other parts of the application, facilitating reuse across multiple components or pages.
### Usage Example
Here's how you might use `mycomponent` in another component, optionally passing the `name` prop:
```
import React from 'react';
import MyComponent from './path/to/mycomponent'; // Adjust the import path as necessary
const App = () => {
return (
<div>
<MyComponent name="John Doe" />
<MyComponent /> {/* This will use the default prop value "user name" */}
</div>
);
};
export default App;
```
'개념 > React' 카테고리의 다른 글
React) mycomponent (0) | 2025.04.08 |
---|---|
React) mycomponent props children (0) | 2025.04.07 |
React) out of value to props (0) | 2025.04.05 |
React) propTypes (0) | 2025.04.04 |
React) pull out constructor from state (0) | 2025.04.03 |