[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1일차 학습 회고( ES6 최신 문법, 타입스크립트 타입 지정 )
2024.08.19(월) - 1일 차
ES6의 주요 개념과 문법을 다루고 각 예제들을 다루어 보았습니다. (ES6란 ECMAScript 6라고 하는 것으로 2015년에 도입된 최신 버전의 JavaScript 표준입니다.)
1. let 과 const
이전의 자바스크립트 문법에서는 var 라는 키워드를 사용했지만
다음과 같은 문제점들로 인해 ES6 제정 이후로는 사용되지 않습니다.
● var의 문제점
- 중복 선언 가능
- scope 범위가 전역 / 함수로 제한됨
- 호이스팅이 가능하다
따라서 ES6(2015년) 이후에는 let과 const를 사용합니다.
let과 const는 변수를 선언할 때 사용하는 키워드입니다
● let : 재할당 필요할 때
● const : 재할당이 필요 없을 때
let num = 10;
num = 20; // 가능
const a = 'jiwoo';
a = 'jihee'; // 불가능 (TypeError 발생)2. 화살표 함수(arrow function)
자바스크립트에서 함수를 생성하는 방법으로는 함수 선언문과 함수 표현식이 있습니다
● 함수 선언문 - function 키워드로 시작하고 함수 이름을 명시한다.
function printHello() {
console.log("Hello");
}
● 함수 표현식 - 변수에 함수를 할당하는 형태로 작성된다.
const printHello = function() {
console.log("Hello");
}
본론으로 들어가 ES6에서 등장한 화살표 함수(arrow function)을 알아보겠습니다.
● 화살표 함수는 간결한 함수 표현식을 제공합니다.
● 주로 콜백 함수로 활용되며, 문법이 간단하여 코드의 가독성을 높입니다.
// 화살표 함수
const printHello = () => {
console.log("Hello");
}
위의 코드만 봐서는 그렇게 편리한지 모르겠지만 아래 코드를 보면 확연한 차이를 알 수 있습니다.
// 기존 함수 표현식
const add1 = function(a,b){
return a+b;
}
// 화살표 함수
const add2 = (a,b) => a+b;3. 비구조화 할당
- 비구조화 할당 기능이 생기기 이전엔 배열의 값을 참조하기 위해서는 인덱스로서 참조하는
방법 뿐이었습니다.
// 기존 배열 참조 방법
const fruits = ['appple', 'banana', 'cherry'];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
하지만 비구조화 할당으로 인해 다음과 같이 편리성이 높아졌습니다.
// 비구조화 할당
const [a,b,c] = ['appple', 'banana', 'cherry']; //a,b,c 이름은 내맘대로!
console.log(a);
console.log(b);
console.log(c);
객체에도 비구조화 할당이 가능합니다.
단, 배열에서의 비구조화 할당 방법과는 다르게 객체의 이름과 할당 받는 변수의 이름이 일치해야합니다.
객체가 name, age, gender로 구성되기에 객체 변수도 name, age, gender로 같은 것에 할당이 됩니다.
따라서 순서는 상관이 없습니다.(아래 코드와 같이 gender, age, name이어도 각자의 것에 알맞게 할당)
// 기존 할당 방법
const user = {
name:'철수',
age: 20,
gender: 'male',
}
console.log(user.name); // 철수
console.log(user.age); // 20
console.log(user.gender); // male
// 비구조화 객체 할당 방법
const {gender, age, name} = {
name:'철수',
age: 20,
gender: 'male',
}
console.log(name); // 철수
console.log(age); // 20
console.log(gender); // male4. 스프레드 연산자( . . . )
스프레드 연산자를 알아보기 전에 얕은복사(shallow copy) 와 깊은복사 (deep copy)에 대해 알아봅니다.
- 얕은 복사(shallow copy) : 복사한 배열이 원본 배열과 같이 변경되는 형태로 복사되는 것
const arr1 = [1,2,3];
const arr2 = arr1;
arr1.push(4);
console.log(arr1); // [1,2,3,4]
console.log(arr2); // [1,2,3,4]
console.log(arr1 === arr2); // true
4 라는 값을 arr1 에만 push 하였지만
console.log(arr1 === arr2) 결과값이 true 임을 확인할 수 있습니다.
이는 값 자체를 복사하는 것이 아닌 주소값을 복사하여 실질적으로 같은 메모리를 가리키고 때문입니다.
- 깊은 복사(deep copy) : 새로운 배열을 만들고 안에 값을 할당함으로써 새로운 배열이 생성되는 것
이 때 스프레드 연산자가 쓰입니다. 리액트에서의 병합에 자주 쓰이는 패턴입니다.
// arr3에 새로운 배열을 [] 생성하고
// 스프레드 연산자(...)를 통해 arr1의 값을 할당
// 스프레드 연산자 = 전개 연산자라고도 하며
// ...arr1 -> 1,2,3 이다(대괄호를 벗김)
const arr3 = [...arr1];
console.log(arr1 === arr3);
// 기존 병합 방식
const numbers1 = [1,2];
const numbers2 = [3,4];
const combined = [numbers1[0], numbers1[1], numbers2[0], numbers2[1]];
console.log(combined);
// 스프레드 연산자를 이용한 병합 방식
const combined2 = [...numbers1, ...numbers2];
console.log(combined2);
배열 뿐만 아니라 객체에도 가능합니다.
// 얕은 복사(shallow copy)
const user1 = {name: '철수'};
const user2 = user1;
user1.name = '영희';
console.log(user1); // 영회
console.log(user2); // 영희
// 스프레드 연산자를 이용한 깊은 복사(deep copy)
const user3 = {name: '철수'};
const user4 = {...user3};
user3.name = '영희';
console.log(user3); // 영희
console.log(user4); // 철수
//병합
const obj1 = {name: '철수'}
const obj2 = {age: 20};
const combined1 = {name: obj1.name, age:obj2.age}; // 기존 방식
const combined2 = {...obj1, ...obj2}; // 스프레드 연산자
console.log(combined1); // { name: '철수', age: 20 }
console.log(combined2); // { name: '철수', age: 20 } 동일한 것을 확인할 수 있다
이렇게 ES6를 정리한 뒤 타입스크립트로 넘어가 학습했습니다.
타입스크립트란?
-> 간단하게 말해 값에 타입을 지정하는 언어입니다.
변수 자료형에는 기본 자료형, 참조 자료형이 있습니다.
기본 자료형에는 number, string, boolean, null undefined, symbol 이 있고
참조 자료형에는 object, array, function 이 있습니다.
타입스크립트에서는
다음과 같은 형식으로 타입을 지정합니다.
let/const 변수명 : 타입 = 값;
그리고 타입스크립트에서 추가된 기본 타입은 다음과 같습니다.
- string
- number
- boolean
- object
- Array (대문자 주의)
- tuple
- any
- null
- undefined
먼저 기본 타입 정의를 살펴보겠습니다.
// 기본 타입 지정
let uname:string = "홍길동"; //문자열 타입
let num:number = 5; //숫자 타입
let isTrue:boolean = true; //논리형 타입
const user:object = { name:"jiwoo", age:25}; //객체 타입
//객체타입 추가 예시 -> 배열과 함수도 가능
let obj1: {name:string; numberArr:number[]; add:(a:number, b:number) => (number)} = {
name: 'jiwoo',
numberArr: [1,2,3],
add: (a,b) => a+b,
}
const fruits:string[] = ['apple', 'banana', 'orange']; //배열 타입
// 배열타입 추가 예시
let arrr:number[] = [1,2,3];
//arr.push('a') -> 에러
let arr2:string[] = ['a','b','c'];
//arr2.push(2) -> 에러
let arr3:boolean[] = [true, true, false];
let arr4:null[] = [null, null];
let arr5:{name:string; age:number}[] = [{name:'철수', age:20}, {name:'영희', age:30}];
const arr:[string, number] = ['apple', 10]; //튜플 타입: 특정 형태를 갖는 배열
//튜플타입 추가 예시
let arr6:[number, string, boolean, null, object] = [1, 'a', true, null, {name:'영희', age:30}];
let arrrrr:[number,string] = [1,'a'];
const nul:null = null; //특수자료형
let und:undefined = undefined; //특수자료형
const arr: any = 10; //any 타입 : 모든 타입 허용
유의 사항으로 여러개의 타입을 지정할 때 콤마(,)가 아닌 세미콜론(;)으로 구분지어야 합니다.
//타입 지정할땐 콤마x 세미콜론o
let animal:{ name: string; age:number; isLive:boolean; nul:null; und: undefined; sym: symbol;} = {
name: "puppy",
age: 3,
isLive: true,
nul:null,
und:undefined,
sym:Symbol('key'),
}
위에서 객체 타입 예시에서 잠깐 보았지만 기본 타입이 아닌
함수 타입 정의 하는 법을 알아보겠습니다.
함수에는 매개변수와 반환값이 있습니다.
매개변수와 반환값에 타입을 지정하는 예시는 다음과 같습니다.
// 1. 매개변수에 타입 저장하기
function add(a:number, b:number) { return a + b } // a, b는 숫자형 타입만!
add(10, 20); // o
add('a', 'b'); // x
// 2. 반환값에 타입 지정하기
function add(a, b):number { return a + b } // 반환값도 숫자형 타입만!
두 가지 방법을 합쳐서 매개변수와 반환값에 타입을 지정합니다.
하지만 반환값은 보통 자동으로 타입 추론이 되는 것을 이용하는 편이라 생략합니다.
옵셔널 프로퍼티 ? 기호로 표시합니다. ? 기호로 표시하면 타입으로 지정한 매개 변수를 생략할 수 있게 됩니다.
● 옵셔널 프로퍼티
옵셔널 프로퍼티 ? 기호로 표시합니다. ? 기호로 표시하면 타입으로 지정한 매개 변수를 생략할 수 있게 됩니다.
// 두번째에만 age가 있다면
const arr: [{name:string}, {name:string; age:number}]
= [{name:'지우'}, {name:'지희', age: 20}];//튜플을 쓰거나
const arr2: {name:string; age?:number}[]
= [{name:'지우'}, {name:'지희', age: 20}];//옵셔널 프로퍼티(?) (필수가 아닌 선택의 개념이 됨)
▶ 타입 오퍼레이터
자바스크립트의 OR(||)연산자와 AND(&&) 연산자와 같은 역할을 하는 타입스크립트 오퍼레이터는
1. 유니언 타입 : OR(||)연산자 역할을 하는 오퍼레이터(|)로 여러 개의 타입을 결합한 타입. 유니언 타입은 연결된 타입 중 1개만 만족하면 됨.
2. 인터섹션 타입 : AND(&&) 연산자와 같은 역할을 하는 타입스크립트 오퍼레이터(&)를 사용하여 2개 이상의 타입을 결합한 타입. 연결된 타입 모두 만족해야 함.
//타입오퍼레이터
// or연산자 = 유니언 타입(|)이라고함 두 개가 아닌 하나 씩만 씀
let strAndNum: number|string = 10;
strAndNum = 'Hello';
let user1: {name:string, money:number|null} = {
name: 'Neo',
money: null, //null
}
const getElements = (arr: number[] | string[]) => {
return arr[0];
}
console.log(getElements([1,2,3]));
console.log(getElements(['a','b','c']));
// and연산자 = 인터섹션 타입
const user2: {name:string} & {age:number} = {
name: 'Neo',
age: 20,
}
// 이제 튜플 아니여도 할 수 잇게 됨
const arr: (number | string)[] = [1, 'a'];
—————————————————————
본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #React #리액트프로젝트 #프론트엔드개발자양성과정 #개발자교육과정