Component
component의 특징
Component는 재활용 가능한 UI 구성 단위를 말한다.
- 컴포넌트는 재활용이 가능하기 때문에 코드 유지보수에 좋다.
- 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악가능하다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
컴포넌트를 선언하는 방식은 두 가지가 있다.
- 클래스형 컴포넌트(Class Component)
- 함수형 컴포넌트(Function Component)
component의 방식
Class Component
- render 메소드가 꼭 있어야함
- 예전에 많이 쓰이던 방식이나 React 16.8버전에서 Hook기능이 추가되면서 적게 쓰이게됨
Function Component
- 예전에는 state관리를 못한다는 이유로 쓰이지 않았는데 Hook기능이 추가되면서 함수형 컴포넌트에서도 state을 사용할 수 있게 되었고 사용이 굉장히 늘어남
JSX
- JavaScript Syntax Extension의 줄임말이다.
- JSX는 React에서 사용하는 자바스크립트 확장 문법이다.
- JSX 코드는 바벨을 통하여 자바스크립트 형태의 코드로 변환된다.
JSX 장점
- HTML 태그를 그대로 사용하여 보기 쉽고 익숙하다.
- HTML 태그를 사용하는 동시에 자바스크립트도 안에서 동작하게 할 수 있다.
JSX의 특징
- 자바스크립트 표현을 쓸 수 있는데 반드시 중괄호 {}을 써야한다.
- {{}}이면 자바스크립트 문법을 쓰고 그 안에 객체를 쓰겠다는 뜻
- class의 경우 반드시 className을 써야한다.
- self-closing tag가 가능하다.
<input />
- 내용(content)가 없을시
<div />
로 <div></div>
의 기능도 대신할 수 있다.
- fragment tag
<></>
Fragment tag를 사용하는 이유: div를 쓰면 block요소이기 때문에 레이아웃에 영향을 끼칠 수 있음. 레이아웃에 영향을 안끼치고 jsx문법을 사용하기 위해서 사용(어쨋든 JSX 문법을 만족하기 위해서는 반드시 부모태그로 감싸야하기 때문에)