JSX란??

리엑트에서 사용되는 표현이다.

이것은 자바스크립트 코드인가? HTML 코드인가?
네~ JS의 확장버전입니다~
JavaScript XML로 HTML과 비슷하게 생겼고, JS에서 작성이 가능하다.

JSX문법을 사용할 때는 주의할 사항이 있다!

1 . 태그는 꼭 닫아줘야 한다.
2 . 중첩된 요소를 만들려면 가독성을 높히기 위해서 소괄호로 감싸준다.
3 . 2개이상의 태그를 사용하려면 꼭 태그를 감싸줘야한다?
4 . 변수를 사용하려면 중괄호{} 안에 변수명을 입력해서 사용한다.
5 . class를 주고싶으면 className을 사용한다.
6 . 주석을 사용할 때는 {/**/} 중괄호로 감싸줘야 주석 내용이 안나타난다

Component

component란 재사용 가능한 최소한의 UI 단위를 말한다.
페이지를 만들때를 예로 들면 똑같은 태그가 여러개 있는데 각각 수정하기 위해 페이지를 따로 만들어 작성을 하기도 한다. 만약 똑같은 태그를 필요에 의해 하나 더 추가를 하게 된다면, 또 다른 페이지를 만들어 작성을 해야한다. 이럴 때 동일 코드가 반복되는 부분을 하나의 컴포넌트로 만들어놓으면 같은 디자인이 필요한 곳마다 넣어서 재사용 할 수 있다.
여기서 포인트는 component는 재사용을 할 수 있다는 것이다. 이렇게 component를 사용하면 유지보수하기가 좋다.

컴포넌트의 이름은 항상 대문자로 시작하는 것이 좋다. 소문자로 시작하면 React.createElement에 전달이 될 수 있기 때문이다.

Class vs Functional Component

컴포넌트의 종류는 2가지가 있다.

1) Class Component

2) Functional Component

이 두가지의 차이점은 class component는 render 함수가 꼭 있어야하며, 그 안에 JSX륿 반환한다.

함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점이 있다.