import { Hello } from './Hello'
export const Test = () => {
return <Hello name="react" />
}
export const Hello = (props) => {
return <>안녕하세요 {props.name}</>
}
import { Hello } from './Hello'
export const Test = () => {
return <Hello name="react" color="red" />
}
export const Hello = (props) => {
return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}
export const Hello = ({ color, name }) => {
return <div style={{ color }}>안녕하세요 {name}</div>
}
export const Hello = ({ color, name }) => {
return <div style={{ color }}>안녕하세요 {name}</div>
}
Hello.defaultProps = {
name: '이름없음',
}
import { Hello } from './Hello'
export const Test = () => {
return (
<>
<Hello name="react" color="red" />
<Hello color="pink" />
</>
)
}
export const Wrapper = () => {
const style = {
border: '2px solid black',
padding: '16px',
}
return <div style={style}></div>
}
import { Hello } from './Hello'
import { Wrapper } from './Wrapper'
export const Test = () => {
return (
<Wrapper>
<Hello name="react" color="red" />
<Hello color="pink" />
</Wrapper>
)
}
export const Wrapper = ({ children }) => {
const style = {
border: '2px solid black',
padding: '16px',
}
return <div style={style}>{children}</div>
}
해당 내용은 다음 자료를 참고했습니다.
https://react.vlpt.us/basic/05-props.html