React 입문 1주차 - 1

변수 선언 매커니즘

데이터 저장 및 관리의 필요성으로 인해 변수가 필요하다.

변수는 사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야 할 때, 그리고 효율적인 데이터 관리를 위해 필요하다.

변수가 없으면 코드가 복잡해지고 오류가 발생할 확률이 높아지며 확장성과 유지보수성이 떨어진다.

변수를 사용하면 계산된 결과를 다른 여러 함수에서도 활용할 수 있게 되면서 프로그램의 유연성, 효율성, 확장성을 증진심과 함께 재사용성과 유지보수성을 향상시킬 수 있다.

let, const, var

let, const, var는 선언되는 위치에 따라서 스코프(유효 범위)가 달라진다. 분류할 수 있는데, 자바스크립트의 주요 스코프 유형은 글로벌 스코프, 블록 스코프, 함수 스코프가 있다.

 

글로벌 스코프(let, const)는 전체 코드에서 접근할 수 있으며, 블록 스코프(let, const)는 선언된 블록 내에서만 접근할 수 있고, 함수 스코프(var)는 선언된 함수 내에서 유효하다.

let blockScopeVariable = "이 블록에서만 동작";
if (true){
	let blockScope = "이 블록안에 있다";
    console.log(blockScope)//이 블록안에 있다, 안에서만 유효
}
console.log(blockScope)//오류, blockScope가 정의되지 않았기 때문
console.log(blockScopeVariable) //이 블록에서만 동작

여기서 let을 var로 바꾸면 밑에서 두 번째 줄에 있는 console.log는 오류가 나지 않는다. 

왜냐하면 var은 함수 스코프로 중괄호 { } 에 얽매이지 않기 때문이다. 따라서 var은 사용하지 않는 것이 좋다.

 

재할당 가능성으로도 분류할 수 있는데, 간단하게 var과 let은 재할당이 가능하지만, const는 재할당이 불가능하다.

 

let, const

const

1. 상수 선언의 중요성

const를 사용하여 상수를 선언하면 const는 재할당이 되지 않기 때문에 프로그램 내에서 값이 변경되지 않는 변수를 명확하게 표현할 수 있다. 이에 따라 안정성이 증가하며 의도하지 않은 값 변경으로 인한 버그를 예방할 수 있다.

 

2. 블록스코프와 안전한 프로그래밍

const는 블록 스코프로, 선언한 블록 내에서만 사용 가능하기 때문에 위에 적어놓은 var과 같은 일이 일어나지 않는다.

let

1. 변수의 유연한 관리

let은 const와 반대로 변수의 값을 필요에 따라 유연하게 바꿀 수 있다. 계산이나 조건에 따라 변할 수 잇는 값을 사용해야 할 때 적합하다고 볼 수 있다.

 

2. 블록 스코프의 이점

for문에서 블록 스코프의 케이스를 자주 볼 수 있는데,0

for (let i = 0; i < 3; i++){
	console.log(i)// 0 1 2
}
console.log(i) //오류

for (var i = 0; i < 3; i++){
	console.log(i)// 0 1 2
}
console.log(i) //3

이런 느낌이다.

 

3. const vs let 

변수 선언은 가장 먼저 const를 떠올리고, 재할당이 필요한 경우에만 let을 사용하는 것이 바람직하다.

 

var과 사용을 지양해야 하는 이유

1. 함수 스코프를 가지는 var

function testFunction() {
	var test = "any words";
    if (true) {
    	var test = "changed value";
    }
    console.log(test)
}
testFunction()

위 변수들은 var로 선언했기 때문에 any words이 아닌 changed value로 나오게 되는 것이다.

 

2. 호이스팅 문제

호이스팅이란 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 의미한다.

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

 

var 선언된 변수는 선언 전에도 참조할 수 있는 호이스팅 현상 때문에 코드를 혼란스럽게 만들 수 있다.

console.log(testValue); //오류 발생
const testValue = "hello";

console.log(testValue); //undefined
var testValue = "hello";

 

논리적인 흐름에서 벗어나기 때문에 사용하지 않는 게 좋다. 

또한 범위 관리가 어려우며 코드의 가독성과 유지 보수성이 저하된다는 점도 있다.

+const, let도 호이스팅이 된다.

 

객체와 배열

객체는 key와 value로 이루어진 값을 저장하는 구조이다.

const user {
	name: "유현지".
    age: 20,
    isAdmin: true,
    printHello: () => console.log("hello"),
};

객체는 여러 가지 값을 가지고 있기 때문에 중괄호를 사용해야하며 어떤 값이든 들어갈 수 있다.

 

객체 접근

객체에 접근할 수 있는 방법은 객체명.키값이며 위의 함수에 접근할 수 있는 방법은 user.printHello()이다.

const attribute = "name"'
const.log(user[attribute]); //"유현지"

이런 방식으로도 출력할 수 있다.

 

객체 수정, 삭제

user.email = "abcde@gmail.com"; //추가
user.age = 31; //수정
delete user.isAdminl //삭제

위의 방법은 불변성을 유지해서 새로운 객체나 배열을 생성해서 값을 변경하는 것이다.

즉, 객체의 기본 주소까지 바꾼 것이 아니기 때문에 객체 자체는 변경된 것이 아니다. (불변성 유지)

 

객체 주요 메서드

const user {
	name: "유현지".
    age: 20,
    isAdmin: true,
    printHello: () => console.log("hello"),
};

 

1. Object.keys()

const keys = Object.keys(user)
console.log(keys) //['name', 'age', 'isAdmin']

객체의 키를 배열로 뽑고싶을 때 사용한다.

 

2. Object.values()

const values = Object.keys(user)
console.log(values) //['유현지', '20', 'true']

객체의 values를 배열로 뽑고싶을 때 사용한다.

 

3. entries

const entries = Object.entries(user)
console.log(entries) //['name', '유현지'], ['age','20'], ['isAdmin','true']

객체의 키와 값을 쌍으로 배열로 출력하고 싶을 때 사용한다.

 

4. assign

const userDetails = {
	occupation: "개발자",
}

Object.assign(user, userDetails);
console.log(user) //{name: "유현지", age: 20, isAdmin: true, occupation: "개발자"}

원본 객체의 추가적인 객체의 값들을 복사하는 것이다. 앞이 원본 객체, 뒤가 추가적인 객체

 

---

 

배열은 대괄호 안에 콤마의 부분으로 존재한다.

간단하게 const/let 변수명 = [값1, 값2]; 이런 식이다.

const numbers = [1, 2, 3];
console.log(numbers);

 

배열 접근, 수정, 삭제

console.log(numbers[1]); //2
numbers[1] = 10; //수정
console.log(numbers[1]); //10

 

 

배열 주요 메서드

const fruits = ["Apple", "Banana"];
console.log(fruits);

 

1. push, pop

fruits.push("Orange"); //값 추가
console.log(fruits); //["Apple", "Banana", "Orange"]

const lastFruit = fruits.pop(); //값 제거
console.log(lastFruit); //Orange
console.log(fruits); //["Apple", "Banana"]

push는 값을 제일 끝에 밀어넣을 때 사용하며 pop는 제일 뒤에 있는 값을 제거할 때 사용한다.

 

2. map

기존의 배열에서 가공을 붙여서 새로운 배열을 return하는 함수이다.

• 배열 내의 모든 요소 각각에 대해
• 주어진 함수를 호출한 결과를 모아
• 새로운 배열을 반환

const numbers = [1, 2, 3, 4, 5]
const squared = numbers.map(function(num) {
	return num * num; //주어진 함수
});

console.log(squared)//[1, 4, 9, 15, 25]

배열의 길이만큼 함수를 도는데, 이때 주어진 함수를 호출한 결과를 return으로 내보낸다는 것이 중요하다. 

 

3. filter

주어진 함수의 테스트를 통과하는 모든 요소를 새로운 배열로 만드는 것

const numbers = [1, 2, 3, 4, 5]
const evenNumbers = numbers.filter(function(num) { //num은 변수명
	return num % 2 === 0; //주어진 함수
});

console.log(evenNumbers)//[2, 4]

const evenNumbers = numbers.filter(function(num) { //num은 인자
	return.키 === 0; //이런 식으로도 가능하다.
});

 

4. reduce

const numbers.reduce = [1, 2, 3, 4, 5]
numbers.reduce(function(누적된값, 일반값){
	console.log("---------");
    console.log("누적된값");
    console.log(일반값);
}); //호출

여기서 return 누적된값 + 일반값; 을 넣어주면 위의 undefined가 return(누적된 값)값으로 바뀌게 된다.

const numbers.reduce = [1, 2, 3, 4, 5]
numbers.reduce(function(누적된값, 일반값){
	console.log("---------");
    console.log("누적된값");
    console.log(일반값);
    
    return 누적된값 + 일반값;
}); //호출

console.log(result ); //15

 

5. sort

sort는 배열을 오름차순, 내림차순으로 정렬하는 것으로 원본 내부 배열의 값 자체를 바꾼다. 불변성이 깨짐

const numbers = [40, 100, 1, 5, 25];
numbers.sort();

console.log(numbers); //[1, 100, 25, 40, 5]

위와 같은 결과가 나온 이유는 sort 뒤의 괄호에 아무것도 넣지 않았기 때문에 자동으로 문자열로 비교하기 때문이다.

즉 유니코드 상으로 비교한다는 것이다.

 

이를 해결하기 위해서는 비교 함수를 넣어줘야하는데, 비교 함수에 따라 정렬하게 된다.

const numbers = [40, 100, 1, 5, 25];
numbers.sort(function (a, b){
	return a -b;
});

console.log(numbers); //[1, 5, 25, 40, 100]

 a - b는 오름차순, b - a는 내림차순이다.

 

 

Template Literals, Destructuring, Spread Operators

Template Literals

템플릿 리터럴은 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법이다.

템플릿 리터럴은 백틱(` `)을 이용해 안에 문자열을 삽입하고 그 안에서 여러가지 동작을 하게 하는 것이다.

const customer {
	name: "유현지",
};

const item {
	name: "커피",
    price: 4000,
};

console.log("감사합니다." + customer.name + "님!" + item.name ); //감사합니다. 유현지님! 커피

위 console.log를 보면 알겠지만, 저 문장 하나를 출력할 때 많이 복잡해보인다. 

이때 템플릿 리터럴을 쓰면 

console.log(`감사합니다. ${customer.name}님! ${item.name}`); //감사합니다. 유현지님! 커피

이렇게 간단해질 수 있는 것이다.

 

const orderDetails = "고객 : " + customer.name + "\n" + "상품 : " + item.name;
console.log(orderDetails); 
//고객 : 유현지
//상품 : 커피;

너무 복잡하고 브레이크 포인트를 넣어줘야하는데, 템플릿 리터럴을 쓴다면 

const orderDetails2 = 
`고객 : ${customer.name}
상품 : ${item.name}`

console.log(orderDetails2); 
//고객 : 유현지
//상품 : 커피;

이렇게 간단해진다.

Destructuring

Destructuring은 의미를 살펴보자면 

De : not

structuring : 구조

로, 구조를 찢어낸다고 볼 수 있다. 각 속성들을 변수화 시키는 것이 기본이다.

 

사용법 : const { 키1, 키2 } = 객체명;

 

const item {
	name: "커피",
    price: 4000,
};

//여기서 커피와 4000을 각각 따로 쓰고싶을 때

const name = item.name;
const price = item.price;

커피와 4000을 따로 쓰고싶을 때 위와 같이 사용할 수 있다. 하지만 그렇게 한다면 나중에 item의 속성이 여러개일 때 const name과 같은 구문들이 많아지기 때문에 이를 한 번에 찢기 위해 필요한 것이다.

 

const { name, price } = item;

Destructuring은 이렇게 사용할 수 있다.

 

객체에서의 Destructuring

function greet(person){
	console.log(`안녕하세요. 제 이름은 ${person.name}입니다. 나이는 ${person.age}에요.`);
};

const person = {
	name: "유현지",
    age: 20,
};

greet(person); //안녕하세요. 제 이름은 유현지입니다. 나이는20에요.

이 코드를 Destructuring을 사용하면 아래와 같이 간단하게 사용할 수 있는 것이다. react에서 많이 사용한다.

 

function greet({name, age}){
	console.log(`안녕하세요. 제 이름은 ${name}입니다. 나이는 ${age}에요.`);
};
//객체 형태로 받은 것을 파괴해버리는 것이다.
const person = {
	name: "유현지",
    age: 20,
};

greet(person); //안녕하세요. 제 이름은 유현지입니다. 나이는20에요.

+) Destructuring은 key가 중요하다.

 

배열에서의 Destructuring

배열은 요소의 위치를 기반으로 할당한다.

const colors = ["red", "green", "blue"];
const [firstColor. secondColor] = colors;

구조분해할당을 해서 좌측의 변수에 값을 하나하나 담겠다는 것.

여기서 배열은 위치로 할당이 된다는 것을 알아야 한다. 마지막으로 blue를 담고싶을 때는

const [, , thirdColor] = colors;

이렇게 콤마를 통해 할당할 수 있다.

 

문제

//문제1
//다음 자바스크립트 객체에서 name과 age를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성하세요.
const person = {
    name: '르탄이',
    age: 25,
    job: '개발자',
};

const { name, age } = person;
console.log(name, age);

//문제2
//다음 자바스크립트 객체에서 title과 year를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성하세요.
const movie = {
    title: 'Inception',
    director: 'Christopher Nolan',
    release: {
        year: 2010,
        month: 'July',
    },
};
const { title, release: { year }} = movie;
console.log(title, year);

//문제3
//다음 자바스크립트 배열에서 첫 번째와 세 번째 요소를 디스트럭처링을 사용하여 추출하여 first, third 변수에 담아 출력하는 코드를 작성하세요.
const numbers = [10, 20, 30, 40, 50];
const [firstNumbers, , thirdNumbers] = numbers;
console.log(firstNumbers, thirdNumbers);

//문제4
//호텔의 예약 확인 시스템의 함수라고 가정합니다. 아래 결과와 같이 출력되도록 함수를 완성해 보세요.
function confirmReservation(user) {
    // 여기에 user 객체를 구조 분해 할당 하세요.
    const { name, roomType, date: firstDate } = user;
    return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`;
}

const userInfo = {
    name: 'James',
    roomType: 'Deluxe',
    date: '2023-05-30',
};
const result = confirmReservation(userInfo);
console.log(result);

 

여기서 year은 movie안의 release안에 있기 때문에 우선은 const { title, release }가 된다.

그런데  release가 객체이기 때문에 또 구조분해할당을 해주면 const { title, release: { year }} = movie;가 된다.

 

마지막 문제는 바깥에 있는 userInfo를 구조분해할당을 하는 것이 아니라 안으로 들어온 userInfo를 할당하는 것이기 때문에 안에서 구조분해할당을 진행해주어야한다. 이때 userInfo가 user로 들어가는 것이기 때문에 뒤에는 userInfo가 아닌 user가 온다.

 

하지만 userInfo에는 firstDate가 없어서 date이름은 바꾼다는 의미로 date: firstDate를 넣어야한다.

그리하여 const { name, roomType, date: firstDate } = user;이 들어가게 되는 것이다.

Spread Operators

사용법 : { ...객체명 }, [ ...배열명 ]

const originalUser = {
	name: "유현지",
    age: 28,
};

cosnt updatedUser = originalUser;
updatedUser.name = "류수진";

console.log(originalUser)//{name: "류수진", age: 28}
console.log(updatedUser)//{name: "류수진", age: 28}

 

객체를 복사할 때 = 연산자를 사용하고 나서 객체명을 입력하게 되면 객체 안의 값을 받아오는 것이 아니라 객체의 주소를 참조하게 되는 것이기 때문에 복사한 객체에서 값을 변경하면 원본 객체도 같이 변경이 된다. (불변성 유지 실패)

 

그리하여 Spread Operators를 사용하게 되었는데, 사용방법은 {...객체명}으로 하는 것이다. 

const originalUser = {
	name: "유현지",
    age: 28,
};

cosnt updatedUser = {...originalUser};
//cosnt updatedUser = {name: "유현지", age: 28,};
updatedUser.name = "류수진";

console.log(originalUser)//{name: "유현지", age: 28}
console.log(updatedUser)//{name: "류수진", age: 28}

간단하게 ...객체명 으로 객체 안에 있는 값들을 풀어낸 뒤 { } 이것으로 다시 묶는 것이다.

배열은 괄호가 대괄호가 된다.

 

+) 객체 2개를 합칠 때 키가 중복된다면 뒤에 있는 객체의 값이 앞의 객체의 값을 덮어쓰게 된다.

즉 obj1에 age: 20, obj2에 age: 24가 있고, ...obj1, ...obj2하면 age:24, ...obj2, ...obj1하면 age:20

 

Rest Operators

사용법 : ...변수명

1. 함수의 매개변수

function sum(...numbers){
	console.log(numbers) //[1, 2, 3, 4, 5]
	return numbers.reduce((acc, cur) => acc + cur);
}

const result = sum(1, 2, 3, 4, 5);
console.log(result)//15

 

2. 객체 분해 할당 시, 여러 값(나머지)을 그룹핑

const person = {
	name: "유현지",
    age: 20,
    country: "usa",
    occupation: "Developer",
};

const { occupation, ...rest } = person;
console.log(rest)//{ name: "유현지", age: 20, country: "usa" }