개요

React에서 컴포넌트에 데이터를 전달하는 방법은 다양합니다.
가장 기본적인 props 전달부터, 여러 속성을 한 번에 넘기는 스프레드 문법, 그리고 children을 활용한 컴포넌트 중첩까지 한 번에 정리해봅니다.

1. 기본 props 전달 방식

<Button text="카페" color="red" />

• text, color는 Button 컴포넌트에 props 객체로 전달됩니다.

2. 스프레드 연산자 (...props)로 props 한 번에 넘기기

const buttonProps = {
  text: "메일",
  color: "red",
  a: 1,
  b: 2,
  c: 3
};

<Button {...buttonProps} />

• ...buttonProps는 text, color, a, b, c를 모두 개별 props처럼 넘겨줍니다.

• 구조적으로 편리하고, 공통 속성 재사용할 때 좋습니다.

3. children을 통한 콘텐츠 전달

<Button text="블로그" color="green">
  <div>하하하<div>
</Button>

• <Button>...</Button> 사이에 있는 JSX는 자동으로 children이라는 props로 전달됩니다.

• button.jsx 에서는 ({ children}) 으로 받아서 사용할 수 있어요 :

const Button = ({children, text, color = "black"}) => {
    console.log(children, text, color);
    return (
        <button style = {{ color : color}}>
            {text} - {color.toUpperCase()}
            {children}
        </button>
    )
}

정리