컴포넌트

Source: Dev.to

컴포넌트란?

React에서 컴포넌트는 애플리케이션 뷰의 일부분을 제어하는 독립적이고 재사용 가능한 사용자 인터페이스 조각입니다. 컴포넌트는 보통 JSX(HTML과 같은 구문)를 반환하는 JavaScript 함수나 클래스로 작성됩니다.

컴포넌트 종류

• 함수형 컴포넌트 – JSX를 반환하는 간단한 JavaScript 함수입니다. 현대 React에서 주로 사용됩니다.
• 클래스형 컴포넌트 – React.Component를 상속받는 ES6 클래스입니다. 이전에 상태와 라이프사이클 메서드를 관리하기 위해 사용되었습니다.

XML이란?

XML(Extensible Markup Language)은 데이터를 구조화된 형식으로 저장, 전송 및 조직하는 데 사용되는 마크업 언어입니다. 태그를 사용해 데이터를 설명하며 인간이 읽기 쉽고 기계가 읽기에도 적합합니다.

XML이 사용되는 곳

• 시스템 간 데이터 교환
• 설정 파일
• 웹 서비스(SOAP)
• 문서 저장

JSX란?

JSX(JavaScript XML)는 JavaScript의 구문 확장으로, 개발자가 JavaScript 안에 HTML과 같은 코드를 작성할 수 있게 해줍니다. 주로 React에서 사용자 인터페이스를 기술하는 데 사용됩니다.

예시

function Welcome() {
  return 
## Hello User
;
}

JSX를 사용하는 이유

• UI 코드를 더 읽기 쉽고 쓰기 쉽게 만든다.
• JavaScript와 HTML을 함께 결합할 수 있다.
• React가 UI 요소를 효율적으로 생성하도록 돕는다.

JS와 JSX의 차이점

JavaScript(JS)는 웹 애플리케이션에 논리, 기능 및 인터랙티브성을 추가하는 프로그래밍 언어입니다.

JavaScript (JS) 예시

const element = document.createElement("h1");
element.innerText = "Hello User";

JSX(JavaScript XML)는 React에서 HTML과 같은 구문을 사용해 UI 요소를 작성하기 위한 JavaScript의 구문 확장입니다.

JSX 예시

function App() {
  return 
## Hello World
;
}
export default App;