용어 정리

react를 본격적으로 들어가기 전에, react에서 자주 사용하는 전용 용어들이 있다. 또한 기존 용어들도 복습할 겸 정리를 하고 들어가자.

• 컴포넌트(Component)
  react의 기본 구성 요소로, 재사용 가능한 UI의 가장 작은 단위이다. 컴포넌트는 js, ts의 함수형 또는 class 형식으로 구현할 수 있다.

• 상태(State)
  react 컴포넌트에서 변경 가능한 데이터를 저장하는 객체로, 컴포넌트는 내에서 관리된다.
  useState() 훅을 사용하여 상태를 관리할 수 있다.

• Babel
  Babel은 자바스크립트 코드를 최신 버전의 ECMAScript 문법으로 작성하고, 이를 구버전의 브라우저에서도 동작하도록 변환해주는 도구이다. 최신 js 문법을 사용하여 개발을 하면, 모든 브라우저가 해당 문법을 지원하지 않을 수 있다. Babel은 이러한 문제를 해결하기 위해 최신 문법을 구버전의 js로 변환하여 호환성을 보장해주는 역할이다.

• JSX
  JSX는 JavaScript XML의 약자로, react에서 사용되는 문법 확장이다. JSX는 react 컴포넌트를 만들 때 사용되며, XML과 비슷한 문법으로 UI 컴포넌트를 정의할 수 있게 해준다. JSX는 보다 가독성이 높고, 코드를 작성하는데 편의성을 제공한다. 하지만 브라우저에서는 바로 실행할 수 없으므로 Babel과 같은 도구를 사용하여 일반 자바스크립트로 변환되어야 한다. 또한 ts에서는 tsx를 사용한다.

• CDN (Content Delivery Network):
  CDN은 콘텐츠 전송 네트워크의 약자로, 전 세계에 분산된 서버를 사용하여 웹 사이트의 콘텐츠를 더 빠르게 제공하는 기술이다. 보통 css, js 파일, 이미지, 폰트 등의 정적 콘텐츠를 CDN을 통해 받으면 사용자가 해당 콘텐츠를 빠르게 다운로드할 수 있다. 사용법은 단순하게 링크를 html의 코드에 작성하면 끝이다. 이를 통해 라이브러리를 다운로드하고 호스팅하는데 드는 비용과 서버 부하를 줄일 수 있다. react역시 CDN으로 로드하여 프로젝트에서 사용할 수 있지만 react 프로젝트를 만들 때에는 기존 html에 작성하지 않고, react 프로젝트를 자동으로 세팅해주는 CRA 기능을 통해 제작한다.

• 속성(Props)
  reaect 컴포넌트에 전달될 수 있는, 혹은 전달할 수 있는 읽기 전용 데이터이다. 부모 컴포넌트는 자식에게 props를 전달하고, 자식 컴포넌트는 부모에게 props를 받으며 상호작용한다.

• DOM (Document Object Model)
  웹 페이지의 구조화된 문서를 표현하는 객체의 계층 구조이다. 주로 js를 사용하여 DOM을 조작하고, 웹 페이지에 새로운 요소를 추가하거나 기존 요소를 변경함으로써 웹 페이지를 동적으로 만들 수 있다.

• 가상 DOM(Virtual DOM):
  실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다. 해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다. react가 사용하는 구조로, 실제 DOM과 동기화하여 변경된 부분만 업데이트하여 렌더링 성능을 최적화해준다.

• 바닐라 JS:
  기타 js 라이브러리를 사용하지 않은 순수 자바스크립트를 의미한다. 즉, 어떠한 프레임워크나 라이브러리를 사용하지 않고, 웹 브라우저에서 기본적으로 제공되는 js를 말한다. 하지만 대규모 애플리케이션을 관리하거나 복잡한 기능을 구현하는 데는 제한적일 수 있다. react와 바닐라 js로 제작된 웹 사이트의 차이는, 바닐라 js에서는 element의 변경이 일어나면 전체를 다시 그린다. 하지만 react는 변경된 세부 요소만 다시 그리기에 성능적인 면에서 더욱 효율적이다.