[React] 리액트의 단방향성과 JSX

🔹 단방향성과 JSX

리액트의 장점에 대해 묻는다면, 가상돔과 `batching`을 통한 효율적인 상태 관리를 들 수 있겠는데

그외에도 react 딥다이브를 읽다가 생소했던 부분, 그리고 알고 있지만 면접에서 `그래서 react가 왜 좋아서 쓰는데요?` 라는 물음에 대답하면 좋을 내용이 있어서 기록하고자 한다.

 

그동안, `react`의 장점을 언급하기 위해, `vanilla js`와 이를 비교하는 식으로 다뤄왔는데 `Angular`와s 붙여 생각해보고자 한다.

 

📍 단방향 바인딩을 하는 `React`

단방향 바인딩은 말그대로 `데이터의 흐름이 방향`으로 흐른다는 말이다.

특히, 리액트의 경우, 상태변화가 `단방향`으로 `명시적`으로 이뤄지기 때문에 부모 -> 자식으로 데이터가 흐르는 경향이 있다. 이때는 `props`로 전달 받아서 상태를 그대로 랜더링 해주거나, 이벤트를 통해서 상위 컴포넌트에게 변경 요청을 보낸다.

 

`View`에서 `Model`로 **직접적인 데이터 갱신이 불가능**하기에, set 함수를 통해서 상태를 변경하는 별도의 행위가 필요하다. 그래서 자식의 경우, 이벤트 핸들러를 통해서 상위 컴포넌트에 상태 변경 요청을 보내도록 설계해야 한다.

 

(여기에서 말하는 view는 말 그대로 눈에 보이는 것인, html 을 생각하면 되겠고,

model은 js 과 관련된 상태 변화를 떠올리면 된다.)

 

📍 양방향 바인딩을 하는 `Angular`

 

양방향 바인딩을 하게 되면 뭐가 다를까?

 

Model의 변화가 View에 반영된다고 했을때, 반대로 View의 변화가 model에도 반영된다는 말이다.

 

양방향 바인딩을 사용하면, 자동 동기화가 되기 때문에 (뷰와 모델의 상태가 같음), 효율적이고, 위의 이유 덕에, 추가로 뷰와 모델의 상태를 맞춰줄 필요가 없으니 코드가 간결해진다는 장점이 있다.

 

<추가로 알면 좋을 것>

`Angular` 에서는 주로 `ngModel` 디렉티브를 사용한다고 한다.

// `Angular` 에서 `ngModel` 디렉티브를 사용하는 간단 input 예제!
<input [(ngModel)]="name" placeholder="이름을 입력하세요">

 

 

📍 그래서 리액트가 단방향 바인딩을 해서 뭐가 좋은데요?

상태변화가 계층 구조에 따라서 흐르기에 `명시적인 상태관리`가 가능하다.

그렇기 때문에 버그 발생시, 원인을 빠르게 찾을 수 있어 디버깅할때 매우 용이하다!

뭐 구조가 작아서 오류가 일어날 가능성이 작다면 양방향 바인딩으로 효율적이게 관리해도 좋지만, 구조가 복집해질 수록 데이터 변화 추적과 디버깅이 어려워질 수 있기에, React 의 장점이 더욱 도드라진다고 할 수 있다.

 

---

 

📍 `Angular` 에서 VIEW 만드는 방법

 

`Angular` 는 템플릿 문법을 이용해서 뷰를 표현한다. 인라인 템플릿에서는 클래스와 함께 데코레이터를 사용하여 정의되는데, 그 안에 HTML 템플릿을 지정한다.

 

// `Angular` 에서 인라인 템플릿으로 뷰 만드는 아주 간단한 예제
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title }}</h1>
    <p>Angular의 템플릿 문법을 이용한 예제입니다.</p>
  `,
})

export class ExampleComponent {
  title = '안녕하세요, Angular!';
}

 

그리고 디렉티브라고 해서, `ngIf` 처럼 전용문법을 익혀야 한다고도 한다.

 

<!-- *ngIf : 조건에 따라 요소를 렌더링 -->
<div *ngIf="isVisible">보이는 내용</div>
<ul>
  <!-- *ngFor: 리스트 기반 반복문 -->
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

 

📍 JSX (JavaScript XML)

반면, `React`는 JSX를 사용중인데, 이를 통해 기존에 알고 있는 자바스크립트 문법에 HTML을 약간 가미한 수준이라 약간의 특징을 제외하고는 큰 러닝커브 없이 사용이 가능하다.

 

JSX 덕에, `UI` 마크업과 `JavaScript` 로직을 한 파일에서 관리할 수 있기에 코드 가독성이 높다. 또한, `중괄호 {}`를 사용하여 `JavaScript` 표현식을 삽입할 수 있어 동적 랜더링에 유용하다.

 

단, 브라우저는 `JSX` 코드를 직접 읽을 수 없기에, `Babel`과 같은 트랜스파일러로

`JSX 를 -> 순수 JavaScript` 코드로 변환하여 실행한다.

(`React.createElement` 로 변환함! 브라우저는 이제 자바스크립트 엔진으로 이를 읽게 되겠지? )