React - JSX

JSX 란?

자바스크립트를 확장한 문법

일반 DOM 은 HTML, CSS, Javascript 세가지 통합사용

React DOM 은 css 와 JSX 를 사용

 

리액트는 실제로 DOM을 수정하지만, 직접적으로 하지는 않음.

대신 Virtual DOM을 사용하여 효율적으로 DOM을 업데이트함

 

작동원리

• Virtual DOM 생성: 리액트는 컴포넌트의 상태가 변경될 때마다 새로운 Virtual DOM 트리를 생성
• 비교 (Diffing): 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 식별
• 실제 DOM 업데이트: 변경이 필요한 부분만 실제 DOM에 적용합니다. 이 과정을 '재조정(Reconciliation)'이라고 

리액트에서는 직접적인 DOM 조작을 권장하지 않음.

대신 상태(state)와 속성(props)을 통해 UI를 관리하는 것이 좋음

---

 

바벨은 자바스크립트 컴파일러

하위 버전의 JavaScript코드로 변환 시켜 브라우저에서 동작할 수 있도록 하는 역할

바벨은 컴파일러의 역할과는 다르게 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 

형태만 바꾸는 작업을 진행함.
그래서 바벨은 트랜스 파일러라고불림

 

번들링 - 실행가능한 최소단위로 묶기 >> 웹팩 

 

JSX 를 사용하면 한눈에 보기 편함

JSX 가 없어도 리액트 사용은 가능하지만 사용하지 않으면 복잡해지기에 

JSX 활용

 

JSX 규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함

2. 엘리먼트 클래스 사용시 class 가 아닌 className 으로 표기

3. Javascript 표현식 사용시, 중괄호 사용!! {}

4. 사용자 정의 컴포넌트 이름은 대문자로 시작!! (PascalCase)

5. 조건부 렌더링을 하게 되면 삼항연사자 사용

6. 여러개의 HTML 을 표시해야 할떈 map() 함수를 이용