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 문법을 만족하기 위해서는 반드시 부모태그로 감싸야하기 때문에)