[React] Component & JSX

 

Component

JavaScript에서 html을 리턴하는 함수

함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다.

 

vite를 통해 생성한 프로젝트를 실행시켰을 때 원리를 간단히 보면

 

1. index.html파일에서 main.jsx실행

 

2. main.jsx에서 App Component 렌더링

 

3. App Component(함수)는 html을 리턴

 

 

 

JSX

JSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것

JSX 주의 사항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}

2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)

3. 모든 태그는 닫혀있어야 한다.

4. 최상위 태그는 반드시 하나여야만 한다.