React 1. 용어 및 기본 개념

목차

1. React란?
2. 프레임 워크와 라이브러리의 차이는?
3. 리액트를 사용하기 위한 라이브러리
4. React 기술 용어

 

---

 

1. React란?

• 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 - 공식 문서
• 웹프레임 워크 - 위키

 

 

2. 프레임 워크와 라이브러리 차이?

개발자들은 종종' 라이브러리'와 '프레임워크'라는 용어를 혼용해서 쓴다.

프레임워크와 라이브러리는 누군가에 의해 쓰여진 코드를 재사용한다는 점에서 공통점이 있지만 몇 가지 큰 차이점이 있다.

 

그 차이에 초점을 맞춰보자.

 

• 라이브러리와 프레임 워크의 기술적 차이점은 제어 반전(=제어의 역전, 역제어)이라 불리는 용어에 있다.
• 라이브러리를사용 할때, 개발자는 어플리케이션 flow를 관리할 수 있으며 언제, 어디에서 라이브러리를 사용할 지 선택 가능하다.
•  
• 하지만 프레임 워크를 사용할 때는, 프레임워크가 flow를 관리한다.
• 따라서 개발자가 코드를 작성할 수 있는 공간(즉 코드가 위치하는 장소)을 제한한다.

(= 프레임워크는 디렉토리 구조가 있음-인구쌤왈)

 

 

 

	프레임워크	라이브러리
공통점	누군가에 의해 쓰여진 코드를 재사용
특징	일반적으로 개발자에게 무엇을 해야할 지를 알려준다. 작업을 위한 최선의 practice이며, 또한 개발자를 지원하기 위한 여러 도구들을 제공한다. (커스터마이징 되기 보다는 일반적으로 통용되는? 관례적?전형적?최적화된 사용법이 있어서 최선의 practice라고 한 거 같음)	사용법에 대해서만 초점을 맞춘다. 팀은 HTTP, routing, forms과 같은 전역의 상태 관리를 위한 라이브러리를 지원하지 않는다. 따라서, 개발자로 하여금 그들이 원하는 라이브러리를 선택할 수 있는 더 큰 선택권을 제공한다. 뭐 대충 유연하단 뜻.. (잘 선택한다면 좋은 결과를, 잘못 선택한다면... 흠)
제어의 역전 (IoC ;Inversion of Control)	프로그램이 통제권을 가짐	개발자가 통제권을 가짐
코드 구조의 자유성 수준	낮음 (opinionated)	높음 (unopinionated)
예시	Angular, Vue	React, JQuery

 

 

<Reference>
https://sofienebk.medium.com/what-is-the-difference-between-a-framework-and-library-2b712a1a1c41

 

 

 

 

3. 리액트를 사용하기 위한 라이브러리

3-1. 최소 라이브러리(react/react-dom)

(1) react : 리액트 문법

(2) eact-dom: 바뀐 값을 찾아서 그 영역만 바꿔줌

• html 파일의 head에 작성할 CDN 링크

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

 

3-2.기타 라이브러리 (페북에서 만든 라이브러리가 아님>리액트 만을 위한 라이브러리가 아님)

(1) webpack

(2) babel - babel을 통해서 JSX 문법을 사용 가능

• html파일의 head에 작성할 CDN 링크

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

• html파일의 body에 작성할 스크립트 타입

<script type = "text/babel">

 

3-3. 툴체인

(1) Create React App

• SPA 만들기에 용이함
• src 폴더 안에서만 사용하기...<이걸 먼저 하면 리액트 돌아가는 개념이 약해짐

 

(2) Next.js

• 스태틱 서버 렌더링 애플리케이션
• 서버 환경을 node.js로 가정

 

 

---

 

4. React 기술 용어

4-1. 싱글 페이지 애플리케이션(SPA; Single-page application)

• 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션/웹 사이트
• HTML, JS, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요 시 문서에 추가

 

4-2. 컴파일러

• JS 컴파일러(Compiler)는 JavaScript 코드를 변환하고 다른 형식으로 JavaScript 코드를 반환
• ex) Babel

 

4-3. 번들러

• 번들러(Bundler)는 분리된 JavaScript와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합
• ex) webpack, browserify

 

4-4. CDN

• CDN은 Content Delivery Network의 약자
• 전 세계의 서버 네트워크에서 캐시된 정적 콘텐츠를 제공