❓ Questions

1. Component의 개념과 종류는 무엇이 있나?
2. JSX의 정의와 특성은 무엇이 있나?

1. Component

Component란 재활용 가능한 UI 구성 단위이다.

웹 사이트의 header, nav, main 등을 각 컴포넌트로 나눌 수 있다. 또한 반복되는 레이아웃(ex.인스타그램 스토리)의 경우 하나의 컴포넌트를 생성하여 관리할 수 있다.

1-1. Component의 특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

1-2. Component의 선언 방식

1-2-1. Class Component

import React from 'react'

class Component extends React.Component {
  render() { // Class Component에는 render 함수가 필수이다.
    return ( // returm 내부에는 JSX 문법으로 사용자에게 보여질 코드를 작성한다.
			<div>
				<h1>This is Class Component!</h1>
			</div>
		)
  }
}

export default Component

1-2-2. Functional Component

import React from 'react'

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

export default Component

• 함수형 컴포넌트는 클래스형 컴포넌트에 비해 할 수 있는 것이 제한적이었다.
• 하지만 Hooks의 등장으로 함수형 컴포넌트의 기능이 확장되었다.

2. JSX

2-1. What is JSX?

JavaScript Syntax Extension. JSX란 리액트에서 사용하는 자바스크립트 확장 문법이다.

• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨(Babel, 컴파일러)을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

2-2. JSX의 특징

• HTML 태그를 그대로 사용한다. (편의성)

• HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있다.

• Self Closing tag : <div></div> vs. <div />

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

• 자바스크립트 표현: 중괄호로 감싸서 표현한다.{ ... javascript... }

• 클래스 선언 방식: class -> className

• Inline Styling : <div style={{color : "red"}}>Hello React</div>