04.03

2023.04.03일(월)

Props

• Props는 부모로 부터 값(문자열, 숫자, boolean, 배열, 객체 등)을 받아와 컴포넌트를 구성합니다.
• 공통되는 요소가 아닌 부분은 Props로 받아옴으로써 재 사용성을 높일 수 있습니다.
  -App.jsx

import Card from "./components/Card";
function App() {
  return (
    <div className="min-h-screen grid grid-cols-4 gap-2">
      <Card color="red" name="A" />
      <Card color="orange" name="B" />
      <Card color="yellow" name="C" />
      <Card color="green" name="D" />
      <Card color="blue" name="E" />
      <Card color="purple" name="F" />
    </div>
  );
}
export default App;

-components/Card.jsx

function Card(props) {
  return <div className={`bg-${props.color}-100 w-30 h-30`}>{props.name}</div>;
}
export default Card;

구조분해

배열은 순서가 존재하나 객체는 순서가 존재하지않는다!

Map 함수, 3항 연산자

Router

npm install react-router-dom