2. Component

💨 Function Component 

 

const MyComponent = ({ childern }) => {
  return <div style = {{
    padding: 20,
    color: "blue"
  }}>
    {childern}
  </div>;
}

// 컴포넌트 작성 

const App = () => {
  return (
    <div>
      <p> 안녕 </p>
      <MyComponent> 반가워 </MyComponent>
      <div> 바이바이 </div>
    </div>
  );
}

// 컴포넌트 사용

 

위의 코드에선 Function Component 가 사용되었다. 

Class Component 또한 사용할 수 있지만, v16 부터 새로운 Function Component 와 Hooks 개념이 발표되었으며, 현재는 Function Component 가 주로 사용되고 있다.

 

💨 Component의 특징 

 

<MyComponent user={{name: :멍식}} color="blue">
  <div>안녕하세요.</div>
</MyComponent>

 

컴포넌트에 Attribute에 해당하는 부분을 Props(Properties) 라고 한다. 

 

컴포넌트 안에 작성된 하위 Element를 childern 이라고 한다.

그리고 children 도 결국엔 props 중 하나이다. 

 

const MyComponent = (props) => {
  const { user, color, childern } = props

  return (
    <div style={{ color }}>
      <p>{user.name}님의 하위 element는!</p>
      {childern}
    </div>
  )
}

 

상위 Element 로부터 전달받은 props 를 활용하는 코드이다. 

 

이 컴포넌트의 자식(children) 요소 역시 props 로부터 값을 받아오는 것을 볼 수 있다. 

 

 

✅  요약

 

1. 컴포넌트끼리 데이터를 주고받을 땐 Props

2. 컴포넌트 내에서 데이터를 관리할 땐 State 

3. 데이터는 부모 -> 자식으로만 전달