React, Part I

왜 React인가?

React는 Facebook이 만든 JavaScript 라이브러리로, 복잡한 웹 사이트의 화면을 컴포넌트 단위로 나누어 개발하고, 데이터 변경 시 화면을 빠르고 효율적으로 업데이트 하는데 특화되어 있다.Codecademy에서는 React의 강점을 아래 다섯 가지로 얘기하고 있다.

1. 빠르다(Fast): 애플리케이션의 속도와 성능을 최적화
   • Virtual DOM: 실제 DOM이 완성된 집이라면, Virtual DOM은 집에 설계도이다. 설계도를 고치는건 쉽고 빠르지만, 완성된 집을 고치는건 어렵다. 이와 같이 React는 메모리상의 Virtual DOM을 통해 변경된 부분만 계산하여 실제 화면에 반영한다. 불필요한 연산을 최소화하여 사용자에게 빠르고 부드러운 경험을 제공하게 된다.
2. 모듈화(Modular): 화면의 요소를 작고 독립적인 조각인 컴포넌트로 나눔
   • 한 번 만든 버튼, 헤더, 입력 폼 등을 여러 페이지에서 계속 재사용할 수 있어 재사용성이 높고, 코드가 거대한 하나의 파일이 아니라 기능별로 쪼개져 있어 코드를 읽고 이해하기 쉽다.
3. 확장성(Scalable): 작은 프로젝트가 거대한 엔터프라이즈급 애플리케이션으로 커져도 관리가 용이
   • 수천 개의 컴포넌트가 있어도 모듈화된 구조 덕분에 특정 기능만 수정하거나 업데이트하기가 쉽고, 데이터가 부모에서 자식으로 한 방향으로만 흐르기 때문에, 데이터의 흐름을 추적하기 쉬워 버그를 찾고 고치는 데 유리하다.
4. 유연성(Flexible): 프레임워크가 아니라 라이브러리이기 때문에 제약이 적음
   • 기존에 만들어진 사이트의 일부분에만 적용할 수도 있을 정도로 어디든 적용 가능하고, React Native로 iOS와 Andorid 모바일 앱까지 개발할 수 있다.
5. 인기(Poopular): 전 세계에서 가장 많이 사용되는 라이브러리 중 하나
   • 거대한 커뮤니티와 풍부한 생태계, 수요가 높아 취업 시장에서도 유리하다. (아...)

JSX란?

JSX(JavaScript XML)는 React에서 UI를 구성할 때 사용하는 문법으로, JavaScript의 모든 기능을 갖춘 확장 문법이다. 겉보기에는 HTML과 거의 똑같으나 실제로는 JavaScript이다. React는 별도의 HTML 파일과 JS 파일을 분리하는 대신에 렌더링 로직과 비즈니스 로직이 본질적으로 결합되어 있다고 보며, JSX를 사용한는 이유는 가독성, 생산성, 안정성 등에 있다.

• 가독성: 복잡한 createElement 함수를 쓰는 것보다 HTML 태그 형태가 구조를 파악하기 쉽다.
• 생산성: HTML 구조와 JavaScript 로직을 한 공간에서 자유롭게 섞어 쓸 수 있다.
• 안정성: JSX에 포함된 값을 렌더링하기 전에 이스케이프 처리하므로 XSS 공격을 방지하는 데 도움이 된다.

브라우저는 JSX를 이해하지 못하고 표준 JavaScript만 이해할 수 있다. 따라서 Babel 같은 트랜스파일러(컴파일러)가 JSX 코드를 브라우저가 이해할 수 있는 일반 JavaScript 코드로 변환해 준다.

필수 규칙 3가지

1. 하나의 부모 요소로 감싸야 한다.
   컴포넌트는 반환할 때 반드시 하나의 덩어리여야 하며, 두 개 이상의 태그가 나란히 있다면 div나 <>...</>(프래그먼트, Fragment)로 감싸주어야 한다.
2. JavaScript 표현식은 { }를 사용한다.
   JSX 내부에서 변수나 함수 같은 JavaScript 값을 쓸 때는 중괄호로 감싸준다.
3. 속성 이름은 camelCase를 따른다.
   JSX는 JavaScript이므로, HTML 속성 이름 대신 JavaScript 프로퍼티 이름을 사용해야 한다.

로컬에서 확인하기

$ npm create vite@latest
$ npm install
$ npm run dev

 

Codecademy에서는 내부 셋팅 때문에 한 화면에서 다 처리하는데, Vite에서는 main.jsx에 준비하고 태그 찾는 역할을, App.jsx에 내용을 작성하는 역할이 있는듯 하다. 그래서 조금 다른 느낌.

 

https://github.com/hongbre/codecademy-project/tree/main/ReactPart1

codecademy-project/ReactPart1 at main · hongbre/codecademy-project