<aside> 🚩 Goal: 리액트의 컴포넌트를 배웁니다.

</aside>

[목차]

1. Component 알아보기

• (1) Component란 무엇인가?
• (2) Component 코드 보는 법
• (3) 반드시 주의해야 할 점

3. 퀴즈 문제

<aside> 📄 컴포넌트를 만들어봅시다.

</aside>

1. src 폴더 안에 있는 App.js 에 있는 내용을 모두 지우고 코드 스니펫 내용을 붙여 넣어 주세요.

• 코드 스니펫 👈

1. “HTML 영역” 안에서 알맞은 html 태그를 작성해 **샘플 이미지(1)**과 같은 화면을 구현해보세요.

• 샘플 이미지 (1)

1. 화면 구현을 다 하셨다면, “클릭!” 버튼을 눌렀을 때 **샘플 이미지(2)**와 같이 alert(경고)창이 나타나게 해보세요. (힌트)

• 샘플 이미지(2)

4. 퀴즈 답

• 퀴즈 답 보기

5. 더 알아보면 좋은 키워드

• 클래스 컴포넌트는 무엇이고, 함수 컴포넌트와 무엇이 다른가?