첫번째 컴포넌트

App.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";

function App() {
  const name = "react";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: 30,
    padding: "1rem"
  };
  return (
    <>
      <Hello style={style} name={name} isSpecial />
      <div style={style}>{name}</div>
      <div className="gray.box"></div>
    </>
  );
}
export default App;

Hello.js

import React from "react";

//첫번째 컴퍼넌트 생성
// function Hello(props) {
//   return (
//     <div
//       style={{
//         color: props.color
//       }}
//     >
//       안녕하세요{props.name}
//     </div>
//   );
// }
// 비구조화 할당시
function Hello({ color, name, isSpecial }) {
  return (
    <div
      style={{
        color
      }}
    >
      {/* isSpecial값이 true면 * 추가 아니면 null*/}
      {isSpecial ? <b>*</b> : null}
      {/* {isSpecial && <b>*</b>} */}
      안녕하세요{name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름없음"
};
export default Hello;