다시 시작하는 리액트 - 리액트 심화 1-1

 

1. Javascript Re-start! - 기본

 

꼭 알아야하는 자바스크립트 기본 문법을 짧게 요약했어요.😉

 

1-1.  변수와 상수

 

[변수 생성의 3단계]
선언 → 초기화 → 할당
- 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!)
- 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!)
- 할당: undefined로 초기화된 변수에 실제 값을 할당

 

- var : 

 

var는 가급적 사용하지 않는 게 좋아요!

 

1) var로 선언한 변수는 블록 스코프가 아니라 함수 수준 스포크를 가짐.

 

2) var는 선언과 초기화를 한 번에 함.

 

3) 재선언이 가능함.

 

4) 선언하기도 전에 사용할 수 있음.(호이스팅이 일어남)

 

// var는 이런 식의 사용도 가능합니다. 괴상하죠!
// var name은 선언! name = "perl"은 할당!
function cat(){
  name = "perl";
  alert(name);
  var name;
}

cat();

 

5) 코드 블럭을 무시함.(var는 함수의 최상위로 호이스팅 됨. 선언은 호이스팅 되고 할당은 호이스팅 되지 않음.)

 

// var name은 함수의 최상위로 호이스팅되기 때문에,
// 실행될 일 없는 구문 속에 있어도 선언이 됩니다.
// (자바스크립트가 동작하기 전에 코드를 한 번 훑는데 그 때, var로 선언된 코드를 전부 최상위로 끌어올려버립니다.
// 동작해선 안되는 구문이라도... 몽땅..!)

function cat(){
  name = "perl";
  // 이 if문 내로는 절대 들어올 일이 없죠!
  if(false) {
    var name;
  }
  alert(name);
}

cat();

 

 

- let : 

 

1) 자바스크립트에서 변수를 생성할 때 쓰는 키워드

 

2) block-scope를 가짐.

    { } 안에서 선언하면 { } 안에서만 쓰고 바깥에선 쓸 수 없음.

 

3) 재선언은 불가, 재할당은 가능!

 

// 재할당은 가능!
let cat_name = 'perl';
cat_name = '펄이';

// 재선언은 오류!
let cat_name = 'perl';
let cat_name = '펄이';

 

 

- const : 

 

1) 자바스크립트에서 상수를 생성할 때 쓰는 키워드

 

2) block-scope를 가짐.

    { } 안에서 선언하면 { } 안에서만 쓰고 바깥에선 쓸 수 없음.

 

3) 재선언 불가, 재할당도 불가! (⇒ 선언과 동시에 할당!)

 

// 재할당 오류!
const cat_name = 'perl';
cat_name = '펄이';

// 재선언도 오류!
const cat_name = 'perl';
const cat_name = '펄이';

// 선언과 동시에 할당 되기 때문에 값을 안줘도 오류가 납니다.
// declare!
const cat_name;

 

[ 2023-04-29 내용 추가됨. ]

 

 

let, const 역시 호이스팅은 일어남. but, referenceError라는게 뜨게 됨.

 

이유는, let과 const의 경우에는 초기화 단계에 들어서야 메모리 공간 확보를 하게 됨.

호이스팅이 일어나도 초기화가 되기 전까지는 메모리의 자리가 없음.고로 let, const는 메모리를 찾을 수 없음.

 

 

- TDZ(Temporal Dead Zone) = 일시적 사각지대

 

[알면 재미있는 이야기: 변수명]
변수명은 숫자로 시작할 수 없고, _와 $를 제외한 특수문자를 쓸 수 없어요!
그 외의 모든 것은 가능합니다. 심지어, 한글도 가능해요. 🤭

 

 

1-2. 자료형

 

자바스크립트는 8가지 기본 자료형을 지원합니다!
객체를 제외한 나머지 7가지를 원시형(primitive type) 이라고 불러요.
typeof 연산자로 자료형을 알아낼 수 있어요. 🙂

 

- 정수, 부동 소수점을 저장하는 숫자형 : -(2^53-1) ~ (2^53-1)까지 지원.

 

숫자에서 문자로 바꿀 때 :

1. toString()
2. String()
3. Template String(템플릿 문자열) => `${ }`
4. 빈 문자열 이어붙이기 => 123.1 + ""

 

- 아주 큰 숫자를 저장하는 BigInt형

 

- 문자열을 저장하는 문자형

 

⊙ 문자를 숫자로 바꿀 때 :

1. parseInt()
2. parseFloat()
3. Math.floor()
4. Math.ceil()
5. Math.round()
6. 문자 앞에 + 붙이기 => 묵시적인 형 변환
7. 문자열에 곱하기 1
8. 문자열에 나누기 1
9. 문자열에 빼기 0
10. Number()

 

대신, parseInt()를 이용하면 정수로 변환을 해주기 때문에 ex) "12.99" => 12로 변환.

실수까지 숫자로 변경해주고 싶다면 parseFloat()를 사용해야 함. ex) "12.99" => 12.99 반환.

Math.floor()은 값에 버림을 하여 가장 가까운 정수를 반환함. ex) "12.99" => 12 반환.

Math.ceil()은 값에 올림을 하여 가장 가까운 정수를 반환함. ex) "12.99" => 13 반환.

Math.round()는 가장 가까운 정수까지 반올림함. ex) "12.99" => 13 반환. ex) "12.24" => 12 반환.

 

 

⊙ 묵시적인 형 변환 :

 

1.

let a = "11";
let b = 22;

console.log(a + b);
// 1122 => 문자열이 됨.

 

2. 문자열 앞에 +를 붙이는 것도 묵시적인 형 변환.

let a = "11";
let b = 22;

console.log(+a + b);
// 33 => 숫자가 됨.

// boolean도 앞에 +를 붙이면 숫자로 변환이 됨.
// 빈 배열, 빈 문자열, 빈 객체등 모두 +를 붙이면 숫자로 변환이 됨.

console.log(+true);
// 1

console.log(+false);
// 0

console.log(+[]);
// 0

console.log(+{});
// NaN => 숫자에서 없음을 나타내는 값.

 

 

⊙ 숫자인지 문자열인지 판단할 때 :

1. isNum() => 숫자가 맞을시 true를 반환. but, isNaN은 숫자의 형태인 문자열도 true랑 false로 값을 도출함.
2. isNumeric()
3. isNumber() => 숫자가 맞을시 false를 반환. but, isNaN은 숫자의 형태인 문자열도 true랑 false로 값을 도출함.
4. isNaN() => 숫자가 맞을시 false를 반환. but, isNaN은 숫자의 형태인 문자열도 true랑 false로 값을 도출함.

isNaN()의 경우, 숫자 뒤에 e가 바로 붙게 되면 지수 취급하게 됨. 이 점에 주의.

 

- 논리 값 (true/false) boolean형

 

- 값이 할당되지 않음을 나타내는 독립 자료형 undefined

 

- 값이 존재하지 않음을 나타내는 독립 자료형 null

 

- 복잡한 자료구조를 저장하는 데 쓰는 객체형

 

- 고유 식별자를 만들 때 쓰는 심볼형

 

[알아두면 더 좋은 Tip: 엄격 모드]
자바스크립트는 엄청 많은 버전이 있습니다!
우리가 들어본 ES6도 사실 자바스크립트의 한 버전일 뿐입니다.
(보통 이야기하는 하위 버전 자바스크립트는 ES3, 최신이다! 모던이다! 하면 ES6 이상을 가리키죠!)

자바스크립트는 하위 호환성에 도른 언어라, 코드를 읽을 때 모던한 방식보다는 하위 호환에 초점을 맞춰 동작합니다.
최신 기능이라기에 써봤는데, 오류를 뿜어낼 수 있단 소리입니다. 😢

그럴 때 쓰는 게 엄격 모드 use strict 입니다.
'use strict;'를 스크립트 최상단에 써주면 모던 자바스크립트에서 지원하는 모든 기능을 활성화해줍니다!

 

 

2. Javascript Re-start! - 객체

 

2-1. 객체란? :

 

- 오직 한 타입의 데이터만 담을 수 있는 원시형과 달리, 다양한 데이터를 담을 수 있음.

 

- key로 구분된 데이터 집합, 복잡한 개체를 저장할 수 있음.

 

- { ... } ← 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있음.

  프로퍼티는 key : value로 구성.

  key에는 문자형, value에는 모든 자료형이 들어갈 수 있음.

 

배열 역시 object로, 배열의 key는 index로 이미 지정이 되어 있음.

 

// 객체 생성자로 만들기
let cat = new Object();

// 객체 리터럴로 만들기
// 중괄호로 객체를 선언하는 걸 리터럴이라고 하는데, 객체 선언할 때 주로 씁니다!
let cat = {};

 

- const로 선언된 객체는 수정될 수 있음. 😖

 

본래 상수로 선언될 경우 값의 재할당(변경)이 불가능함.

상수로 선언된 객체 역시 객체에 대한 참조를 변경할 수는 없지만

객체의 프로퍼티는 변경할 수 있음.

 

원시값의 경우에는 값이 들어갈 공간을 메모리에 만든 후, 거기에 값을 할당하지만,

객체(객체와 배열)는 객체가 저장될 다른 공간을 메모리에 만든 후 객체를 할당하고,

그 객체의 주소를 기존에 만들어둔 메모리 공간에 할당해주는 것.

 

// my_cat이라는 상수를 만들었어요!
const my_cat = {
  name: "perl",
  status: "좀 언짢음",
}

my_cat.name = "펄이"; 

console.log(my_cat);
// 펄이
// 고양이 이름이 바뀌었죠!

my_cat = {name: "perl2", status: "많이 언짢음"};
// 여기에선 에러가 날거예요. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없거든요!

 

 

2-2. 상수는 재할당이 안된다고 했지만...

 

- const로 선언된 객체는 수정될 수 있음.

 

- const로 선언된 객체는 객체에 대한 참조를 변경하지 못한다는 것을 의미.

 

- 즉, 객체의 프로퍼티는 보호되지 않음.

 

// my_cat이라는 상수를 만들었어요!
const my_cat = {
  name: "perl",
  status: "좀 언짢음",
}

my_cat.name = "펄이";

console.log(my_cat)
// 고양이 이름이 바뀌었죠!

// 여기에선 에러가 날거예요. 프로퍼티는 변경이 되지만, 객체 자체를 제할당할 순 없거든요!
my_cat = { name: "perl2", status: "많이 언짢음" };

 

 

3. Javascript Re-start! - 함수

 

3-1. 함수란? :

 

자바스크립트는 함수를 특별한 값 취급을 해요.
자바스크립트는 ()가 있으면 함수를 실행하고 ()가 없으면 함수를 문자형으로 바꿔 출력하기도 서슴치 않거든요.
(함수를 값으로 취급하는거죠!)
이걸 응용하면, 함수를 복사할 수 있고, 또 매개변수처럼 전달할 수 있어요.
(소근) - 함수는 기본적으로 undefined를 반환해요. return으로 어떤 값을 넘겨주지 않는다면요!

 

 

3-2. 함수 선언 방식 :

 

- 함수 선언문 :  

 

1. 독립된 구문으로 존재.
2. 코드 블록이 실행되기 전에 미리 처리되어 블록 내 어디서든 사용할 수 있음.                                                                    (먼저 함수를 호출하고 뒤에 함수를 선언해도 호출이 된다는 사실)

// 이렇게 생긴 게 함수 선언문 방식으로 함수를 만든 거예요.

function cat() {
  console.log('perl');
}

console.log(cat());

function cat() {
  console.log("perl");
}

// 함수가 호출되어 perl이 출력됨.

 

- 함수 표현식 : 

 

1. 함수가 표현식의 일부로 존재. 
2. 함수 표현식은 실행 컨텍스트가 표현식에 닿으면 만들어짐. (변수 취급을 함.)

 

// 이렇게 생긴 게 함수 표현식을 사용해 함수를 만든 거예요.

let cat = function() {
  console.log('perl');
}
// 물론 화살표 함수로 써도 됩니다.
// 다만 주의하실 점! 화살표 함수는 함수 표현식의 단축형이라는 거! 주의하세요! :)

let cat2 = () => {
  console.log('perl2');
}

console.log(cat());

const cat = function() {
  console.log("perl");
}

// error가 뜨게 됨.

 

- 화살표 함수 : 함수 표현식의 축약 표현.

 

const a = ( ) => { }

이렇게 사용.

 

 

3-3. 지역 변수와 외부 변수 :

 

- 지역 변수 : 

 

1. 범위가 지정된 코드.
2. 함수 내에서 선언한 변수.
3. 함수 내에서만 접근 가능

 

- 외부 변수(global 변수) : 

 

1. 함수 외부에서 선언한 변수.
2. 함수 내에서도 접근 가능.
3. 함수 내부에 같은 이름을 가진 지역 변수가 있으면 사용 불가능.

 

let a = 'a';
let b = 'b';
let c = 'outter!';
// 외부 변수

const abc = () => {
  let b = 'inner!';
  c = 'c';
  let d = 'd';
  // 지역 변수

  console.log(a, b, c, d);
}

console.log(a, b, c, d);
// a, b, outter, undefined
// 외부에서 지역 변수인 d를 출력하면 undefined가 뜨게 됨.

abc();
// a, inner, c, d

console.log(a, b, c, d);
// a, b, c, undefined
// 함수를 호출한 후 외부에서 다시 콘솔을 찍게 되면
// 재선언을 해준 b는 무시되고 c는 "c"가 재할당. d는 지역 변수이므로 무시되어 undefined가 뜨게 됨.

 

 

3-4. 콜백함수 :

 

- 콜백함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수를 콜백 함수라고 함.

 

const playWithCat = (cat, action) => {
  action(cat);
}

const useBall = (cat) => {
  alert(cat+"과 공으로 놀아줍니다.");
}
//playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!

playWithCat("perl", useBall);
// perl과 공으로 놀아줍니다.