React + JS 기초 다지기 1

성장을 즐기는 개발자, 최호경·2023년 5월 20일

JSX JavaScript Kernel XML code data data type heap stack 원시타입 참조타입

JSX

JavaScript + XML = JSX

React는 사용자 인터페이스를 만들기 위한 라이브러리입니다. 프레임워크가 아니고, 다른 라이브러리와 함께 사용하거나 웹, 앱에서 다양한 애플리케이션을 만들어서 렌더링하는데 사용될 수 있습니다.

XML

HTML에서 태그는 데이터의 모양과 위치를 정의하는 반면, XML에서 태그는 데이터의 구조와 의미를 정의합니다.

XML 대신 HTML을 사용할 수는 없지만, HTML 태그로 XML 데이터를 감싸서 웹 페이지에 표시는 할 수 있습니다. HTML을 XML 대신 사용할 수 없는 이유는 HTML은 모든 사용자가 공유하는 미리 정의된 태그 집합만을 사용할 수 있기 때문입니다. 하지만 XML은 데이터 및 데이터의 구조를 설명하는 태그를 사용자가 직접 만들 수 있습니다.

<FOOD>
	<NAME>Pizza</NAME>
  	<FLAVOR>Delicious</FLAVOR>
  	<INGREDIENT>Cheese</INGREDIENT>
</FOOD>

XML 태그를 보면 직관적으로 데이터의 구성과 의미를 파악할 수 있습니다. 하지만 브라우저가 해석해서 실제 사용자에게 데이터를 출력할 때는 태그는 무시되고 태그 내부의 데이터만 표시됩니다.

Pizza Delicious Cheese

XML 태그로 표시된 데이터는 하드웨어 또는 운영 체제에 관계없이 다른 여러 시스템에서 해당 데이터를 동일하게 처리할 수 있습니다. 이러한 이식성이 XML이 데이터 변경을 위한 가장 인기 있는 기술이 된 이유 중 하나입니다.

JavaScript

원시 타입(Primitive Types) & 참조 타입(Reference Type)

자바스크립트에서 데이터는 2가지 타입으로 구분됩니다. 원시 타입과 참조 타입인데요.

원시 타입

Number, BigInt
Boolean
null
undefined
String
Symbol

원시 타입은 변수에 할당될 때, 메모리 상에 고정된 크기로 stack 영역에 저장되고 해당 변수는 원시 데이터 값을 보관합니다. 그리고 변수 선언, 초기화, 할당 시, 값이 저장된 메모리 영역에 직접 접근하여 사용합니다.

새로운 값을 할당할 때, 변수에 할당된 메모리 블록에 저장된 갑을 직접 변경하며, 값 자체를 복사한 것이기 때문에 할당했던 원본 데이터값이 변경되도 변수의 데이터값은 변경되지 않고 유지됩니다.

BigInt

Number 타입은 안정적으로 표시할 수 있는 크기가 2^53 - 1 입니다. 이것보다 큰 정수를 표시할 수 있는 내장 객체이자 원시 타입이 BigInt라고 할 수 있습니다. 단, 내장 Math 객체의 메소드와 함께 사용할 수 없고 연산에서 Number 타입과 혼합해서 사용할 수 없습니다. 또한 BigInt가 Number로 바뀌면 정확성을 잃을 수 있으니 주의해야 합니다. 대신, number 타입처럼 다양한 연산자를 같은 bigint 타입끼리 사용해서 연산이 가능합니다.

Symbol

심볼 타입은 변경이 불가능한 원시값으로 Symbol()을 호출하여 생성할 수 있고, 함수 호출 시 전달하는 인자의 문자열 값은 심볼에 대한 설명문입니다. 이는 각 심볼을 구분하고 디버깅을 하기위한 목적으로 사용됩니다.

이렇게 생성된 심볼은 항상 새롭고 고유한 값이 생성된 것이기 때문에, 객체의 프로퍼티 키로 사용합니다. 심볼을 키로 갖는 프로퍼티는 다른 프로퍼티와 충돌하지 않을 것입니다.

참조 타입(객체 타입)

원시 타입을 제외한 모든 데이터은 참조 타입 또는 객체 타입이라고 할 수 있습니다.

Object
Array
function

참조 타입은 원시 타입과 다르게, 크기가 정해져 있지 않으며 값을 변수에게 할당된 메모리에 직접 저장하지 않고 변수의 값이 저장된 Heap 메모리의 주소 값을 저장합니다. 이 주소값으로 메모리를 참조하여 변수의 데이터값에 접근하는 것이죠. 따라서 참조 타입은 원본 데이터 값이 바뀌면 그것을 주소값으로 그대로 참조하기 때문에, 할당한 변수의 값도 함께 바뀌게 됩니다.

Stack, Heap

프로그램이 실행되기 위해서는 메모리에 프로그램 자체가 로드가 되어야 가능합니다. 그리고 프로그램 안에서 사용되는 여러 변수들도 저장할 메모리가 필요하죠. 따라서 운영체제(OS)에서는 여러 가지 메모리 공간을 프로그램 실행을 위해 제공하고 있습니다. 다음은 대표적인 4가지 메모리 공간입니다.

Code 영역

Data 영역

Stack 영역

Heap 영역

Code 영역

실행할 프로그램의 코드가 저장되는 영역입니다. CPU가 이 영역에 저장된 명령어를 하나씩 가져가서 처리해줍니다.

Data 영역

프로그램에서 사용하는 전역변수(Global)와 정적 변수(Static)가 저장되는 영역입니다. 데이터 영역은 프로그램의 시작과 함께 할당되며, 프로그램이 종료하면 소멸됩니다.

Stack 영역

스택 영역은 함수의 호출과 관계되는 지역 변수와 매개변수들이 저장되는 영역입니다. 함수의 호출과 함께 할당되며, 함수의 호출이 완료되면 소멸합니다. 스택은 말 그대로 쌓는 모양 처럼 LIFO(Last In First Out) 방식에 따라 동작합니다. 따라서 가장 늦게 저장된 데이터가 가장 먼저 인출됩니다.

Heap 영역

힙 영역은 사용자가 직접 관리할 수 있고 관리해야 하는 메모리 영역입니다. 사용자에 의해 메모리 공간이 동적으로 할당되었다가 해제되었다가 합니다. 힙 영역은 스택과 반대로 낮은 주소에서 높은 주소 방향으로 할당됩니다.

낮은 주소 >>> Code -> Data -> Heap -> 공유 라이브러리 영역 -> Stack -> 커널 영역 >>> 높은 주소

Stack이 쌓이는 방향 : Top <- Bottom , 높은 주소에서 낮은 주소 방향으로 쌓입니다.

스택은 쌓일 수록 점점 낮은 주소값을 갖게 됩니다. Bottom에서 Top으로 쌓일 수록 주소값이 작아지죠. 이렇게 스택을 설계한 이유는 커널의 반대 방향인 공유 라이브러리 방향으로 스택이 쌓이면서 커지기 때문에 영원히 커널과 만나지도 건드리지도 않게 하기 위해서 입니다. 커널은 접근불가 영역입니다.

그리고 다른 이유는 Heap 영역은 새로운 데이터가 추가될수록 더 큰 메모리 주소를 할당받게 되기 때문에, 스택과 힙이 가운데 공유 라이브러리를 두고 서로 마주보는 형태를 가져서, 메모리 공간을 효율적으로 활용하기 위함입니다.

커널(kernel) 영역

프로그램 동작을 위해 사용하는 메모리 공간(Code, Data, Stack, Heap)을 user 영역이라고 합니다. kernel 영역은 총 메모리 공간에서 유저 영역을 제외한 나머지 영역을 가리킵니다. OS 자체가 실행되기 위해서는 프로그램과 마찬가지로 메모리에 올라가야 하고, 실행 과정에서 변수 선언과 메모리 동적 할당이 필요합니다. 프로그램 실행 시 메모리 관리의 편리함을 위해 유저 영역과 커널 영역을 분리해놓은 것입니다.