[React] 섹션1: 시작하기

bien·2024년 6월 17일

리액트

목록 보기

1/2

리엑트란 무엇이고 왜 사용할까?

리액트 공식 웹페이지인 react.dev 사이트에서 답을 찾을 수 있다.

The library for web and native user interfaces
- 웹 및 네이티브 사용자 인터페이스를 위한 라이브러리
- 즉, 사용자 인터페이스 구축을 위한 라이브러리

더 나아가서는,

A JavaScript library for building user interface
- 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리

실제로 리액트를 사용하는 웹 페이지를 보면, 그 이유를 알 수 있다.
넷플릭스 웹 사이트 역시 넷플릭스를 사용하고 있다.

실제 사이트를 방문해보면,

전환이 매우 부드럽고 직관적이다.
새 페이지가 로딩되는 듯한 효과가 전혀 없다.
서버에서 새 페이지를 받을때까지 기다리지 않아도 된다.
- 마치 모바일 앱 처럼
  - 모바일 앱은 즉각적인 반응과 부드러운 전환이 거의 기본이니까.

리액트 같은 라이브러리 덕에, 그런 모바일 사용자 경험은 물론, 웹용 사용자 인터페이스까지 구축 가능하다!

리액트는 자바스크립트 라이브러리라서, 브라우저의 자바 스크립트를 이용해 웹 페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트한다.

자바스크립트로 이것이 가능한 이유는, 웹 사이트 백그라운드에서 실행되며 로딩이 완료된 페이지를 읽고 조작할 수 있기 때문이다.

그런데 결국 다 자바스트립트 덕분이라면 리액트 라이브러리는 왜 필요한걸까?
자바스크립트로만 작업하는 것은 가능하지만 바람직하지 않기 때문이다.

(순수 자바스크립트 코드가 좋은 선택지가 아닌 이유)

It quickly becomes cumbersome
- 빠르게 번거로워진다.
It quickly becomes error-prone
- 빠르게 오류 발생이 쉬워진다.
It quickly becomes hard to maintain or edit
- 빠르게 유지관리와 수정이 어려워진다.
React offers a way simpler "mental model"
- React는 훨씬 더 단순한 멘탈 모델을 제공한다.
  - 멘탈 모델: 사람들이 세상을 어떻게 인식하고 이해하는지에 대한 내부적인 표상 또는 개념을 말한다
  - 멘탈 모델이 단순하다 = React가 제공하는 프로그래밍 모델이 개발자가 웹 애플리케이션을 이해하고 구축하는 과정을 더 직관적이고 간결하게 만든다

React = 선언적 UI 프로그래밍
- while React, you define the target UI state(s) - not the steps to get there.
  - React를 사용하면, 도달해야 할 목표 UI 상태(state)를 정의한다. (도달하는 방법(step)이 아니라)
- Instead, React will figure out & perform the necessary steps
  - 대신, React는 필요한 단계를 파악하고 수행한다.
선언적(Declarative): 목표(goal)을 정의. (단계(steps)가 아니라)
- React의 작동 원리
- 군더더기 없고 작성할 코드가 비교적 짧다. UI 업데이트도 알아서 해준다. 리액트 내부에서 자바스크립트로 UI를 업데이트 하는 것. 우리가 조건과 목표 상태, 상태 변경 조건만 정의하면 나머지는 리액트가 알아서 해준다.
명령적(Imperative): 단계(steps)를 정의. (목표(goal)가 아니라)
- JavaScript의 작동 원리
- 단계를 정의하는 것은 훨씬 번거롭고 어렵다. 아주 기초적이고 간단한 예시에서도 원하는 동작을 수행하기까지 여러 단계가 필요하기에, 단계를 빼먹거나 오류가 발생하기 쉽다. 간단한 코드 추가 역시 쓸데없이 복잡해질 수 있다.

npm run dev starts a development preview server that allows you to view the web app you're working on
- npm run dev는 작업 중인 웹 앱을 볼 수 있게 해주는 개발 프리뷰 서버를 시작합니다.
Kepp npm run dev up & running whilst working on your code Quit it anytime via Ctrl + C, restart it once you start working again
- 코드 작업을 하는 동안 npm run dev를 계속 실행 상태로 유지하세요. 언제든지 Ctrl + C를 통해 종료할 수 있으며, 다시 작업을 시작할 때 재시작 하세요.

왜 리엑트 코드를 작성하기 위해 추가적인 도구가 있는 로컬 작업환경을 설정해야 할까? 단순히 HTML파일과 JavaScript 파일을 만들고, HTML 파일 내 스크립트 파일을 참고하여, 스크립트 파일에 리엑트 코드를 삽입할 수는 없을까?

리액트 코드를 작성할 때는 자바스크립트 기능에 있는 특수한 HTML을 사용하는 JSX라는 문법을 사용하기 때문에 불가능하다.

React: JavaScript code that typically use JSX("HTML in JavaScript")
- React: 주로 JSX("JavaScript 안의 HTML")를 사용하는 JavaScript 코드
Code is transformed & optimized (e.g., unnecessary whitespace is removed)
- 코드 최적화 (예: 불필요한 공백 제거)
Handled by build tool(e.g., Vite): That's why a "more complex" project setup (which includes such a build tool) is needed
- 이는 빌드 도구(Vite 등)에 의해 처리됨: 이것이 빌드 도구를 포함하는 "더 복잡한" 프로젝트 설정이 필요한 이유이다.
Code that runs in the browser: JavaScript code without JSX
- 브라우저에서 실행되는 코드: JSX가 없는 JavaScript 코드