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

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서도 React 를 사용하기 위해 되짚는 기초 개념 몇가지를 다루도록 하겠습니다.

시작해보겠습니다.

 

1 . 연산자

 

JavaScript 에는 연산자라고 하는, 부등호가 존재합니다.

예를 들어, 우리가 일반적으로 사용하는 계산기에서 사용하는 사칙연산이나, 대입등을 하는 연산자들을 총칭합니다.

이는 생각보다 다양하게 많이 쓰이므로, 한번 간단하게 작성해보도록 하겠습니다.

 

1) 대입 연산자

 

let a = 1

여기서 말하는 대입연산자는 a 라는 변수에 1이라는 값을 대입하므로 " = " 이 대입연산자가 됩니다.

 

2) 사칙연산자

 

let a = 1
let b = 2

console.log(a+b)
console.log(a-b)
console.log(a/b)
console.log(a*b)

 

기존의 계산기 형태와 다를 바 없습니다.

 

3) 연결 연산자

 

이를 문자열에서 사용하면 "연결 연산자"로 표현할 때도 있습니다.

바로 이러한 예가 존재합니다.

let a = 1
let b = "2"

console.log(b+a)

위처럼 String, 문자열을 +연산자를 사용하면 문자열을 이어주는 연산자로 동작합니다. 즉 사칙연산과는 다른 것이죠.

이러한 형태를 연결연산자라고 합니다.

이는 사용자가 작성하는 데이터 타입에 따라 다르게 나타날 수 있으므로, 항상 타입이 어떠한 것인지를 알아야 합니다. 이러한 것을 보다명시적으로 도와주는 TypeScript 는 이후 포스팅에서 다시 다루도록 하겠습니다.

 

4) 복합 연산자

 

복합 연산자는 단어 그대로 이해하는게 쉽습니다.

let a = 5

a = a + 10

console.log(a) // 15

---------------------------
let a = 5
a += 10

console.log(a) // 15

1번과 2번 모두 같은 결과를 출력합니다.

하지만 복합연산자는 대입연산자와, 사칙연산이 조합되어, 처리됩니다. 이는 + , - , * , / 모두 활용이 가능합니다.

이를 사용하면 코드를 보다 간결하게 작성이 가능합니다. 

 

 

5) 증감 연산자

 

단어 그대로 값을 증가하거나 감소시키는 연산자입니다.

당연히 의미 그대로 숫자형의 데이터 타입에만 사용이 가능합니다.

이를 예시로 작성해보도록 하겠습니다. 사실 이미 JavaScript 의 기초항목을 공부하신 분들이라면, 한번쯤 보셧던 증감연산자입니다.

 

let a = 10
a++ // a--

console.log(a)

 

추가적으로 이 증감연산자는 변수의 앞과 뒤에 모두 작성이 가능합니다.

규칙을 하나 이해해야 한다면, 변수의 앞에 붙으면, 계산한 결과가 변수에 담기지만, 변수뒤에 증감연산자가 붙으면, 이후의 값에 증감이 반영됩니다.

즉 표현하면 아래와 같습니다.

 

let a = 10
console.log(a++) // 10
console.log(a) // 11

console.log(--a) // 10
console.log(a--) // 10
console.log(a) // 9

예시와 값을 보면 쉽게 이해가 가능합니다.

 

6) 논리 연산자

 

이 연산자는, 말 그대로, 논리적 값을 위한 연산자입니다.

쉽게 말하면 Boolean 이라고하는 true, false 라는 참 , 거짓 유형의 데이터 타입에서만 사용이 가능합니다.

이는 작성이 간단하게 처리할 수 있습니다.

 

console.log(!false) // ture 
console.log(true && ture)  // true
console.log(true || true) // true

위의 논리연산자는 간단히 이해할 수 있습니다.

첫번째부터 !는 not 을 의미합니다. 

두번째는 두개의 조건이 모두 true, 혹은 false 여야 합니다.

세번째는 둘 중에 하나가 true 여야 합니다. 

 

이는 이후에 자주사용하게 될 If 문에서 자주 사용할 예정입니다.

 

7) 비교 연산자

 

let compareA = 1 == "1" 
console.log(compareA) // true

let compareB = 1 === "1"
console.log(compareB) // false

 

비교 연산자는 "=" 표시를 두번하는지, 세번하는지를 알 수 있습니다.

= 을 두번 입력하는 비교연산자는 "값" 만 일치여부를 비교합니다. 

하지만 "=" 이 3번 사용하면, 데이터타입까지를 비교하게 됩니다.

 

여기서 추가적으로 한가지를 활용하면 아래와 같은 비교식도 사용이 됩니다.

 

let compareA = 1 != "1" 
console.log(compareA) 

let compareB = 1 !== "1"
console.log(compareB)

 

느낌표를 앞에 사용하여 =을 하나 빼면 틀린지를 파악하게 됩니다. 

이를 활용하여, 이제 숫자역시도 비교연산자를 사용할 수 있습니다. 과거에 초등학교나 중학교 수학시간에 배웠던 그것과 일치합니다.

 

1 < 2 
1 =< 2

1 >= 2
1 > 2

이 비교에 대해서는 간단히 생략하겠습니다. 수학적으로 기초적인 사항으로 이해해주시면 되겠습니다. 

 

8) 병합연산자

 

병합연산자는 null 혹은 undefined 값일 경우를 필요할 때 , null병합연산자라고도 합니다.

예시를 작성해보겠습니다.

 

let a;
a = a ?? 10
console.log(a)

 

위 사항을 보면, a를 선언만하고, 값을 할당하지 않았습니다.

이를 보면, a 는 값이 없는 null이 됩니다. 하지만 위와 같이 작성을하면 ,null 이기때문에 변수에 10이 담기게 됩니다.

이러한 작성을 null 병합연산자라고 합니다.

 

다음 포스팅에서는 이제 JavaScript 에서 가장 기초적 구문 몇가지를 다루도록 하겠습니다.