본문 바로가기
개념/React

React) myComponent props value

by kiseno 2025. 4. 6.
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

'개념 > 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