[4/3] 리액트 virtual DOM & JSX & 엘리먼트 & 컴포넌트

1. Virtual DOM란?

• Virtual은 말 그대로 가상이라는 뜻이고 DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미한다. 문서 객체한 HTML, head, body와 같은 태그들을 Javascript가 이용할 수 있는 객체를 의미한다. 개발을 하면서 자주보게 되는 div, input, a 등이 DOM에 해당한다.
  DOM이 존재하기 때문에 Javascript는 HTML 태그들을 수정할 수 있는 것이다.

2. Virtual DOM의 작동 원리?

화면에 표시되는 DOM과 동일한 Virtual DOM을 메모리상에 만들고 DOM조작이 발생하면 Virtual DOM에 모든 연산을 수행한 후, 이전에 저장된 Virtual DOM과 새로 생성된 Virtual DOM을 비교해 변경된 부분의 실제 DOM을 갱신하여 리플로우/리페인트의 연산을 최소화함

3. JSX란?

• JSX는 자바스크립트와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)이다
• JSX는 React 엘리먼트(element)를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다.
• React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.

1. 문법

• 반드시 태그는 열었으면 닫아야 함
• 루트 엘리먼트는 하나만 존재해야 함
• 중괄호를 사용하여 JS표현식을 쓸 수 있음
• 삼항연산자를 사용하여 조건부 렌더링을 할 수 있음

4. 엘리먼트와 컴포넌트의 차이

1. 엘리먼트란?

• 자바스크립트 객체
• 컴포넌트를 이루는 작은 단위
• 컴포넌트에서 return을 받아서 사용함
• 한번 생성되면 다시는 변형되지 않음

2. 컴포넌트란?

• 엘리먼트를 반환하는 함수 혹은 클래스를 의미
• 엘리먼트를 자유롭게 다루기 위한 하나의 문법
• UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것

5. 리액트에서 컴포넌트를 어떻게 생성하는지?

src폴더 안에 파스칼케이스로 파일명을 작성한 뒤, 확장자는 jsx를 써준다.

1. 함수 컴포넌트의 경우

• 일반함수의 경우 function으로 정의하고 return문에 jsx코드를 반환. 화살표 함수 사용도 가능하다. 다른 곳에서 불러올 수 있도록 function 앞이나 맨 아랫부분에 export문을 사용해주면 다른 곳에서도 사용이 가능하다.

2. 클래스 컴포넌트의 경우

• class로 정의하고 render에서 jsx코드를 반환