React - React 를 사용하기 위해 되짚어보는 JavaScript 기초 (2)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 React 사용을 위해 JavaScript 기초를 되짚는 글을 이어서 작성해보려고 합니다.

본 포스팅에서는 간단한 사항 위주로 요약한 포스팅이며, 자세한 사항은 JavaScript 섹션에서 따로 정리할 예정입니다.

자세한 사항을 보시기 위해서는 JavaScript 탭을 참고하시면 더 좋을거 같습니다.

 

1. 변수와 상수

 

변수와 상수는 단어 그대로 이해해야 합니다.

변수는 "변하는 값" 이고, 상수는 "변하지 않는 값" 입니다.

 

ES6 기준으로 설명을 드리자면, 변수와 상수를 선언하는 방법은 3개의 키워드가 존재합니다.

 

• let
• const
• var

위 3가지는 각각 기능의 차이가 존재합니다.

일반적으로 먼저 다루는 "변수"를 선언하기 위해서는 "let" 키워드를 이용해 사용합니다.

즉 변하는 값을 선언하는 것입니다.

 

간단한 예시를 출력해보면 아래와 같이 출력할 수 있습니다.

 

let name = Hynn
console.log(name)

 

name 이라는 변수에는 Hynn 을 담았습니다.

하지만 let을 이용해 선언한 변수는 값이 바뀔 수 있는 변수입니다. 

즉 이를 간단하게 활용해본다면 아래와 같이도 작성해볼 수 있습니다.

 

let name = Hynn
console.log(name) // Hynn

let name = Tistory
console.log(name) // Tistory

 

위의 코드의 흐름을보면 첫번째의 선언된 name 은 Hynn 이라는 값을 담고 있고, 이를 2번째에서 출력합니다. 하지만 3번째에서는 Tistory 라는 이름으로 변수의 값을 바꾸게 되었습니다.

 

 이 변수를 선언하는데에는 최소한의 규칙이 존재합니다.

 

• 변수명은 "알파벳"으로 시작해야 합니다.
• 변수명에는 특수문자가 " _ " , " $ " 을 제외한 특수문자는 사용할 수 없습니다.
• 예약어를 변수명으로 사용할 수 없습니다.

각각을 해석하자면, 변수명은 항상 영어로 시작해야 합니다. 여기서 물론 대소문자를 구분하기 때문에, 이를 주의해야 합니다.

또한 특수문자는 위에서 언급한 두개의 특수문자 외에는 사용할 수 없습니다.

마지막으로 예약어 ( ex. If, for) 는 변수명으로 선언할 수 없습니다.

 

그렇다면 이제 변하지 않는 값이라고 일컫는 "상수"에 대해서 간단히 알아보도록 하겠습니다.

이는 간단하게 적용할 수 있습니다.

기존에 변수로 선언할 때 사용한 "let" 키워드를 사용했지만, 여기서 키워드만 "const"로 바꾸면 되겠습니다.

 

하지만 이 상수는 앞서 설명드린 것 처럼, 한번 선언하면, 바꿀 수 없습니다.

이를 코드로 적용해보면 아래와 같이 코드를 테스트해보면 손쉽게 확인이 가능합니다.

 

const name = Hynn
console.log(Hynn)

const name = Tistory  // Error . The name is read-only

상수는 말 그대로, 한번 선언이 이루어지면 값을 변경할 수 없습니다.

이러한 기본적인 개념만을 이해하더라도, JavaScript 에서 선언하는 종류에 대해서 손쉽게 이해할 수 있습니다.

 

이 외에도 var 라는 키워드가 존재하지만, 이 키워드에 대해서는 깊게 다루어야 할 부분이 있어, 이후에 JavaScript 섹션에서 var 와 호이스팅 포스팅을 참고해주시면 감사하겠습니다.

 

2. 자료형과 형 변환

 

JavaScript 의 데이터 타입에는 흔히 말하는 원시데이터와 참조데이터가 존재합니다.

이를 영문으로 그대로 표현한다면 Primitive-Data Type , 그리고 Non-Primitive Data Type 이라고 설명합니다.

이는 다른 프로그래밍 언어에서도 비슷한 개념으로 존재하며, 부르는 명칭이 조금 다를 수 있겠지만, 기본적인 성질은 비슷하다고 생각합니다.

 

• Primitive-Data Type
  • Number ( 숫자 )
  • String ( 문자 )
  • Boolean (참/거짓)
  • Undefined
  • Null
  • Symbol
  • BigInt 
• Non-Primitive Data Type
  • Object ( 객체 ) 
  • Array ( 배열 )
  • Function ( 함수 )

 

위와 같은 데이터 타입에 대한 설명을 별도로 작성하지는 않겠습니다.

이 두개의 차이점은 아래의 1가지만 이해해도 충분할 것이라고 생각 합니다.

 

• PrimitiveData 는 한번의 하나의 값만 가질 수 있고, 하나의 고정된 저장 공간을 사용합니다.
• Non-PrimitiveData 는 한번에 "여러" 개의 값을 가질 수 있고, 고정되지 않는 동적 공간을 사용합니다.

즉, 코드로 간단하게 예시로 표현하면 아래와 같습니다.

 

let Number = 1

let Numbers = [1,2,3,4,5]

 

Number 라는 원시형 데이터인 "숫자"는 1이라는 하나의 값을 가지고 있고, 지정된 저장공간을 사용합니다.

하지만 Numbers 라는 참조형 데이터인 "배열"은 여러개의 값을 가질 수 있고, 가지고 있는 여러개의 값에 따라 동적인 저장공간을 사용하게 됩니다. 

이 차이점이 원시데이터와 참조데이터의 가장 큰 차이라고 할 수 있습니다.

 

또한 이러한 데이터 타입에 따라, JavaScript 는 다른 동작 결과를 출력합니다.

 

먼저 데이터 타입을 "변환"하는 과정은, 묵시적 형변환과 명시적 형 변환이 존재합니다.

실제 다른 포스팅 중, Ethereum 과 같이 Block-Chain 에서는 이러한 형 변환을 많이 사용하게 됩니다. 

 

여기서 형 변환은 말 그대로 데이터타입을 변환하는 과정입니다. 

이를 예시로 살펴보도록 하겠습니다.

let numberA = 12;
let numberB = "2";

console.log(numberA * numberB); // 24

가장 손쉽게 테스트를 구현할 수 있는 위의 코드를 구현해보면, 현재 A는 숫자타입의 원시타입이고, B는 스트링, 즉 문자의 원시타입입니다.

이 두개를 곱하기를 하게 되면 결과는 24가 출력될 것입니다.

하지만 각각 원시 타입이 다르지만, JavaScript 런타임 엔진에서 이를 묵시적으로 형변환을 하여 2를 숫자로 변환하고, 그를 계산하여 출력한 것이 현재의 결과입니다.

 

반면에 이를 덧셈으로 표현하면 아래와 같이 출력됩니다.

 

let numberA = 12;
let numberB = "2";

console.log(numberA + numberB); / 122

 

이를 위해 console.log 를 출력시 아래의 명령을 추가로 입력하면, 결과 값이 어떠한 타입을 가지고 있는지 알 수 있습니다.

 

let numberA = 12;
console.log(typeof numberA);
let numberB = "2";
console.log(typeof numberB);

let numberResult = numberA + numberB;
console.log(typeof numberResult);

console.log(numberResult);

위와 같이 작성하면  console.log 에서는 선언한 변수/상수의 값이 어떠한 타입을 가지고 있는지를 반환합니다.

이를 통해 현재 변수의 데이터 타입을 올바르게 파악할 수 있습니다. 

 

위 출력을 통해, "2"가 문자열이고, 결과 값 역시 문자열로 반환된 것을 우리는 파악할 수 있습니다.

이를 이제 "명시적" 형 변환을 통해 12+2 라는 계산으로 처리되도록 코드를 수정할 수 있습니다.

 

let numberA = 12;
console.log(typeof numberA); // number
let numberB = "2"; 
console.log(typeof numberB); //string

let numberResult = numberA + parseInt(numberB);
console.log(typeof numberResult); // number

console.log(numberResult); // 14

 

이는 코드 작성자가 명시적으로 형 변환을 작성하고, 그를 통해 number + number 의 연산이 처리되었으므로, 자동적으로 결과 역시도 숫자로 타입이 결정된 것을 볼 수 있습니다.

이 데이터 타입에 따라 코드가 올바르게 동작하고, 오류를 반환할 수 있기 때문에, 값이 눈으로는 보이지만, 기대한 값이 아닐 경우에는 꼭 데이터 타입을 체크해야 합니다.

 

감사합니다.