README.md

01. 컴포넌트 선언하고 사용하기: Component 기본 구조와 JSX

🎯 요구 사항

• /templates 에 있는 html 템플릿을 그대로 App.jsx에서 그릴 수 있게 해보세요.
• App.jsx를 여러 개의 컴포넌트로 분리해서 그려보세요.
  • 스타일도 별도의 css파일로 분리하여 각 컴포넌트에서 import합니다.
  • (선택) module.css 를 사용해 보세요.

구현 결과 예시

• 예를 들어, App.jsx의 return문을 아래와 같이 작성했을 때에 앱이 정상적으로 그려지도록 구현해 주세요.
• 컴포넌트의 이름이나 구조는 마음대로 변경해도 좋습니다

function App() {
  return (
    <>
      <Header />
      <main>
        <CategoryFilter />
        <RestaurantList />
      </main>
      <aside>
        <RestaurantDetailModal />
        <AddRestaurantModal />
      </aside>
    </>
  );
}

✅ 키워드

• JSX
  • class -> className
  • for -> htmlFor
  • self closing tag
  • Fragment
  • {} 내에 쓸 수 있는 JS 식
• React Component
  • 기본 구조
  • export / import

🧙‍♀️ 진행 가이드

• 진행 시간: 1시간 내에 완료하는 것을 목표로 합니다.

🔗 참고 문서

• Thinking in React의 Step1-2 에 있는 것처럼 나만의 컴포넌트 단위를 나누어 보세요.
• Your First Component