[스나이퍼팩토리] AIaaS 마스터 클래스 8주차 DAY33 - react

[1] react란?

- 자바스크립트 ui 라이브러리

 

★ 1) Component 

• view vs 기능 단위로 구성할 수 있음
• ui를 구성하는 독립적인 코드 단위로, 컴포넌트를 통해 ui를 모듈화하고 재사용할 수 있게 함

클래스형	함수형
React 초기 버전에서 주로 사용됨	현재 대부분의 프로젝트에서 사용
lifecycle methods를 가짐	코드 간결 및 유지보수 쉬움
복잡하고 코드 유지보수 어려움	hook을 사용해 상태 및 생명주기 관리

 

2) 리액트 주요 특징

 

1. 컴포넌트 기반 아키텍처:

• 리액트는 ui를 작은 재사용 가능한 부분으로 나누어 구현하는 컴포넌트 기반 아키텍처를 채택함
• 아키텍처란?
• 시스템의 구조적 구성 방식

2. 선언적 UI:

• 무엇을 화면에 표시할지를 선언하는 방식
• 리액트에서 이 접근 방식은 상태가 변경되면 리액트가 자동으로 화면을 업데이트하게 함
• 가독성,유지보수 용이,예측 가능

3. 가상 DOM:

• 가상 DOM을 사용하여 실제 DOM과의 변경 사항을 최소화함
• 가상dom이란 실제 DOM의 가볍고 빠른 복사본

 

Why React?

- html/css,javaScript로도 웹 페이지를 만들 수 있는데 React를 사용하는 이유가 뭘까

 

1. 재사용 가능한 컴포넌트

-> 코드 유지 보수성 증가

2. 가상 DOM을 사용해서 실제 DOM에 최소한의 변경 적용하여 성능 저하에서 자유롭다

 

3) html에서 react 사용해보기 

4) CRA(Create React App)

• 초기 환경을 일일이 설정하지 않고도 리액트 프로젝트를 시작할 수 있도록 셋업을 완료해놓은 툴

 

💡 JSX란?

  JSX(JavaScript XML)는 React에서 UI를 정의하기 위해 사용하는 HTML과 유사한 자바스크립트 확장 문법이다.

• JSX는 자바스크립트 안에서 HTML을 사용하는 것처럼 보이지만, 실제로는 브라우저가 이해할 수 있도록 React.createElement() 형태로 변환된다.

---

  JSX의 주요 특징

1. HTML 유사 문법

• <div>, <h1>, <p> 등 HTML 태그 그대로 사용 가능
• 직관적이고 가독성 높음

2. 자바스크립트 표현식 포함 가능

• 중괄호 {} 안에 JS 변수나 함수 호출 가능

const name = "현지";
<h1>{name}님, 환영합니다!</h1>

 

3. 조건부 렌더링

{isLoggedIn ? <Logout /> : <Login />}

 

4. 반복 렌더링 (map 사용)

{items.map(item => <li key={item.id}>{item.name}</li>)}

---

 JSX 내부 규칙

규칙	설명
모든 태그 닫기 필수	<img />, <input /> 등 단일 태그도 닫아야 함
class → className	JSX에서는 class 키워드 대신 className 사용
htmlFor	<label>의 for 속성도 htmlFor로 사용
컴포넌트 이름 대문자	<MyComponent /> 처럼 컴포넌트 이름은 대문자로 시작해야 함

---

JSX의 보안 기능

• HTML 콘텐츠는 자동으로 이스케이프 처리되어 악성 스크립트가 실행되지 않도록 보호함.

 

const text = "<script>alert('해킹')</script>"; 
<p>{text}</p> // 안전하게 문자열로 출력됨

 

---

jsx 동작과정

React에서 사용하는 JSX 문법은 브라우저가 직접 이해할 수 없고 JSX는 결국 자바스크립트 문법이기 때문에, 실제로는 내부적으로 JS 코드로 변환된 후 실행되는 것이다.

 

JSX 코드

const element = <h1>Hello, React</h1>;

 

이 코드는 Babel이라는 트랜스파일러에 의해 다음과 같이 변환된다.

 

const element = React.createElement("h1", null, "Hello, React");

 

 변환된 코드 해석

React.createElement(
  type,     // 어떤 태그인지 (ex. 'div', 'h1', CustomComponent 등)
  props,    // 태그의 속성들 (ex. { className: 'title' })
  children  // 자식 요소 또는 텍스트
)

 

○ 이런 JSX → JS 변환은 우리가 직접 하지 않아도 된다.
React 개발 환경에서는 보통 Babel이라는 도구가 자동으로 해주기 때문에
CRA(Create React App), Vite 같은 도구를 쓰면 이 과정이 자동으로 포함돼 있어서 우리는 JSX만 작성하면 되는 것이다.

📌 react와 jsx 정리

항목	React	JSX
정의	UI를 위한 JS 라이브러리	JS에서 HTML을 쓰는 확장 문법
역할	UI를 구조화하고 관리	컴포넌트를 직관적으로 정의
이점	재사용성, 성능 최적화	가독성, 코드 간결성
브라우저 인식 방식	JavaScript 실행	Babel이 JS로 변환 후 실행

 

---

본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 (B-log) 리뷰로 작성 되었습니다.