첫 번째 컴포넌트

마크업 : 태그를 이용하여 문서나 데이터의 구조를 작성하는 언어

컴포넌트: UI 구성 요소

리액트를 사용하면 마크업, CSS, JS를 앱의 재사용 가능한 UI요소인 컴포넌트를 결합할 수 있다.

컴포넌트 정의하기

기존 : 웹개발자가 컨텐츠를 마크업한 다음 JS를 뿌려 상호작용을 추가
리액트 : 마크업으로 뿌릴 수 있는 JS 함수

1단계: 컴포넌트 내보내기

export default는 표준 JS 구문

export : 컴포넌트를 내보냄, import할 때, 어떤것을 import 할지 명시해야함
export default : 컴포넌트를 내보냄, import할 때, 어떤것을 import 할지 명시안하면 default 가 import 됨

2단계: 함수 정의하기

function Profile() { }을 사용하면 Profile이라는 이름으로 JS함수를 정의가능

리액트 컴포넌트는 이름은 대문자로 시작해야함!!

3단계: 마크업 추가하기

JSX에는 JS안에 마크업을 삽입할 수 있음

return 키워드와 같은 줄에 없는 경우 ()로 묶어야함, 안그러면 반환 줄 뒤의 내용이 무시됨

컴포넌트 사용하기

정의한 컴포넌트는 다른 컴포넌트에서 중첩해서 사용가능

<section>과 같이 소문자로 시작하면 HTML 태그를 참조
<Profile/>과 같이 대문자로 시작하면 리액트는 Profile 이라는 컴포넌트를 참조

컴포넌트 중첩 및 구성

컴포넌트는 JS함수이므로 한 파일에 여러개의 컴포넌트를 가질 수 있다.
컴포넌트를 한번 정의한 다음 원하는 곳에 여러번 사용할 수 있다는 점이 react의 장점