[07-React] 2. React 문법 기초 및 바인딩

1. React 문법 : JSX

: JSX (JavaScript XML, JavaScript Syntax eXtension)

: 마크업 언어와 로직을 따로 분리하지 않고 하나의 파일에 보이는 컴포넌트라는 느슨하게 연결된 유닛

- Angular와 React

1. Angular의 경우 : 마크업 언어와 로직을 분리하여 개발

2. React, Vue의 경우 : 컴포넌트라는 느슨하게 연결된 유닛으로 개발

2-1. Vue: HTML + JS + CSS가 ".vue" 파일 내 존재 가능

2-2. React : HTML or XML + JS + CSS가 ".jsx" 파일 내 존재 가능

1.1 문법적 요소들

1) .jsx는 무조건 하나의 요소로 반환되어야 함 -> 전체를 감싼 하나의 태그가 필요

// Ex)
<div>
	<h1>오늘의 할 일</h1>
	<ul>
		<li>빨래하기</li>
	</ul>
</div>

-> 감싸주는 노드를 사용하지 않을 경우에는 <div> 태그 대신 아래와 같은 태그 사용

// 1) 
<React.Fragment></React.Fragment>

// 2)
<Fragment></Fragment>

//3)
<></>

 

2) class가 예약어이기 때문에 className으로 사용

<div className="container">
	클래스는 예약어
</div>

 

3) js 로직을 넣기 위해서는 중괄호 사용

<div>
	<h1>{title}</h1>
    {children}
</div>

 

4) XML이기에 명시적으로 닫는 태그가 필수 "</>"

 

5) 명명 규칙

// 1. 컴포넌트의 경우 : 대문자로 시작
// 2. 함수, 변수 : 소문자
// 3. 커스텀 훅 : use로 시작
// 4. 고차함수 및 고차 컴포넌트의 경우 : with로 시작

 

추가적인? 기초적인 것 정리 추가(약간 파싱느낌인듯...?)

2025.01.14 - [정리용/react] - [07-React] 2-1. React 문법 JSX

---

2. 바인딩(Binding)

	단방향 바인딩	양방향 바인딩
설명	JS 코드를 통한 데이터 변경 -> HTML Element 변경 부모 -> 자식으로 값이 아래로만	JS 코드를 통한 데이터 변경 <-> HTML Element 변경 부모 <-> 자식으로 값이 양쪽으로
장점	명확한 Model과 View의 책임 분리 일관된 데이터 로직 잘쓰면 성능 저하없는 DOM 리렌더 가능	코드의 단순화 (setState와 같은 데이터 감지 코드 불필요)
단점	사용자의 HTML에 대한 입력 및 이벤트 발생 시, 데이터 감지 코드를 매번 작성해야 함	역방향 변화가 발생 시, DOM 객체 전체 렌더링이 필요 -> 성능 저하
일반적인 패턴	MVC	MVVM

- 바인딩 == 화면에 보이는 요소와 메모리에 있는데이터의 일치

출처 : ASAC 수업자료 - 패턴 비교

 

2.1 MVC를 통한 단방향 바인딩의 이해

• MVC
  • Model(JS)
    : 메모리에 있는 데이터 
  • View(HTML)
    : 화면에 나타는 요소//Rendering
  • Controller(JS)
    : Model을 변경하는 함수

=> 사용자 - view - controller - model 순으로 소통

asac 수업자료

- React에서 단뱡향 바인딩이라는 특성에 맞게 Model -> View를 함수의 흐름으로 부드럽게 구분

 - 관련 없는 로직 및 보일러 플레이트 코드 X

- State + side-Effect를 분리하여 API를 제공 -> 생산성 및 유지 보수성 향상

 

---

참조 

ASAC 수업자료