본문 바로가기
개념/React

React) mycomponent props children

by kiseno 2025. 4. 7.
728x90
반응형
SMALL
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;


```

728x90
반응형
LIST

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