개념/React

React) myComponent props value

kiseno 2025. 4. 6. 21:25
728x90
반응형
SMALL
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;


```

728x90
반응형
LIST