TIL - 18 - React.js - Component & JSX

1. Component

Component(컴포넌트) : 재활용 가능할 UI 구성 단위

• 재활용성
• 유지보수 편리
• 해당 페이지 구성은 한눈에 파악하기 용이
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.
  • 부모 컴포넌트 - 자식 컴포넌트

2. Class vs Functional Component

컴포넌트를 선언하는 방식에는 두 가지가 있다. 함수형 컴포넌트를 쓰는게 요즘 추세이긴 하나 나중에 Class형 컴포넌트를 사용한 코드를 만나면 할줄 알아야 하니 둘다 알아야 한다.

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

2-1. Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
			<div>
				<h1>This is Class Component!</h1>
			</div>
		)
  }
}

export default Component

클래스형 컴포넌트는 render함수가 필수로 있어야한다. 이를 통해 안에 보여 주어야 할 JSX를 반환한다.

2-2. Functional Component

import React from 'react'

const Component = () => {
  return (
			<div>
				<h1>This is Functional Component!</h1>
			</div>
		)
};

export default Component

• 클래스 컴포넌트에 비해 간단하고 작성하기 편리하다.

3.JSX

JSX : JavaScript Syntax Extension

• 자바스크립트 표현 : { ... javascript... }
  -class를 className이라고 작성한다.
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)

: JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능이다. 요소들을 감싸는 `div` 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다.