import myComponent from "./frames/Component_file/MyComponent";
const mycomponent = props => {
return (
<div>
hello, my name is {props.name}.<br/>
children value is {props.children}.
</div>
);
}
mycomponent.defaultProps = {
name : 'basic name'
};
export default mycomponent;
### Component Definition
- **Functional Component**: `mycomponent` is defined as a functional component that accepts `props` as its argument. This is a common pattern for creating components that don't require state or lifecycle methods (prior to React Hooks).
- **Props Usage**: Inside the component, it utilizes `props.name` and `props.children` to dynamically render content based on the props passed to it. The `props.name` is used to display a name, and `props.children` is used to display any child elements or content included between the opening and closing tags of `mycomponent` when it's used.
### Default Props
- **`defaultProps`**: After the component definition, `mycomponent.defaultProps` is defined, setting a default value for the `name` prop. This means if `mycomponent` is used without the `name` prop being passed, it will default to `'basic name'`.
### Import and Export
- **Import Statement**: At the beginning of the snippet, there seems to be an unused import statement (`import myComponent from "./frames/Component_file/MyComponent";`). Given the context of this code snippet, it appears unnecessary and might be a remnant from a copy-paste or refactor. Unless it's intended for use in parts of the code not shown here, it could be removed to clean up the code.
- **Export Statement**: The component is exported at the end of the file using `export default mycomponent;`, making it available for import in other files.
### Usage Example
To use `mycomponent` in another component, you could import it and pass `name` as a prop (and optionally include children):
```
import MyComponent from './path/to/mycomponent'; // Adjust the import path as necessary
const App = () => {
return (
<MyComponent name="React">
<p>This is a child component or content.</p>
</MyComponent>
);
};
export default App;
```
'개념 > React' 카테고리의 다른 글
React) multiple state value (0) | 2025.04.09 |
---|---|
React) mycomponent (0) | 2025.04.08 |
React) myComponent props value (0) | 2025.04.06 |
React) out of value to props (0) | 2025.04.05 |
React) propTypes (0) | 2025.04.04 |