(React) 컴포넌트/엘리먼트 차이, JSX란?

---

Component (컴포넌트)

컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다.

 

UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것으로, 엘리먼트 트리를 캡슐화 하는 것이다.

 

 

 

Element (엘리먼트)

element는 component를 이루는 작은 단위로, 보통 바로 사용되지 않고 Component에 리턴받아서 사용되곤 한다. 

 

엘리먼트는 인스턴스가 아니다. 엘리먼트는 immutable한 plain object이다.(엘리먼트가 생성되면, 절대로 변화되지 않는다.)

 

PlainObject 

오래된 방식의 단순 자바 객체다. 조금 더 디테일한 의미는 특별한 환경(클래스나 인터페이스 등)에 종속되지 않는 일반적인 Java 객체를 의미한다.
이 단순 자바 객체는 다른 클래스나 인터페이스를 extends 및 implements 받아 메서드를 구현해야 하는 클래스가 아닌, getter/setter 와 같이 기본적인 기능만 가진 자바 객체를 뜻한다.

 

 

---

 

 

리액트 컴포넌트의 목적은 element 생성이다.

 

그 방법에는 함수와 클래스 두가지 방법이 있다.

 

함수는 전달인자가 있는데, 이 전달인자에 어떤 것이 들어가냐에 따라 element가 달라질 수 있다.

결과물을 내기 위해 return이 필요하다. 실행 시에는 함수에 소괄호()를 붙여서 실행한다.

 

클래스는 new 클래스 라는 인스턴스로 실행한다. 결과물은 render()로 element를 내보내는데, 함수의 return과 유사하다.

 

이러한 과정을 통해 React Element가 생성된다고 이해하면 된다.

 

 

 

---

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

JSX란?

const element = <h1>Hello, world!</h1>;

JavaScript를 확장한 문법으로 UI가 어떻게 생겼는지 설명하기위해 React와 함께 사용하는것을 권장한다. 

 

자세한 설명은 위 React 공식 문서에서 확인할 수 있고 간단한 JSX 예시를 들어보겠다.

 

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

위는 JavaScript 코드내부에 HTMl 코드가 존재하지만 JSX 표현식으로, 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함

 

수 호출이 되고, JavaScript 객체로 인식 된다.

 

JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로 받아들이고, 함수로부터 반환되는 활동들이 모두 가능하다.