JSX 규칙

• 태그는 꼭 닫혀야 한다!! <div></div> or <Hello />

• 두개 이상의 태그는 감싸줘야 한다.

<>
	<div></div>
	<p></p>
</>
fragment/ 프레그먼트?

• JS 값을 보여줄때는 {} 안에 넣어준다.

• JSX 내부에서 스타일형태를 사용할 때는 , 객체 안에 넣어줘야한다.
  그리고 CSS class를 사용하게 될 때에도 , className 을 사용해야한다.

• 주석글을 쓸때는 command + 슬래쉬로 해서 {/* 주석 */} 이렇게 사용하거나,
  아니면

<div>
  <input
    //주석글
     />
</div>

props

• props는 properties 의 약자이다.

• 컴포넌트를 사용하게 될 때 특정 값을 전달해주고 싶을 때 , 사용하는 것이다.

• 만약 특정 값을 빠뜨렸을 때 , 기본적으로 사용할 값은
  defaultProps 라는 걸 사용한다.

children

• 태그와 태그 사이에 넣는 내용을 의미한다.

Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: 16,
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

App.js

import React from 'react';
import Hello from './Hello';
import './App.css';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" />
      <Hello color="pink" />
    </Wrapper>
  );
}

export default App;