모던 자스로 배우는 리액트 입문2 - 2장 마무리

2.1 const, let을 이용한 변수 선언

var를 이용한 변수 선언의 문제점

- 덮어쓰기 가능 : 한 번 정의한 변수에 다른 값을 대입할 수 있음(의도하지 않게 덮어써질 수 있기에 무조건 덮어쓰는 것은 좋지 않음)

- 재선언 가능 : 프로그램 실행 순서에 따라 어느 변수가 사용되는지 해석하기 어려움

(var가 '변수'라는 뜻이기에 둘 다 변동 가능하다고 생각, var는 자주 사용하지 않음)

 

let을 이용한 변수 선언

- 덮어 쓰기 가능

- 재선언 불가능

(let이 'OO이라 하자~'라는 뜻이기에 선언은 한 번 했고, 덮어쓰기는 가능한 var가 선언되었다고 생각)

let v1 = 3;
console.log(v1) // 3

v1 = "문자열로 덮어써버리기~~";
console.log(v1) // 문자열로 덮어써버리기~~

type이 다른 값으로 덮어쓰기 가능

SyntaxError: Identifier 'v1' has already been declared

재선언 불가능

const를 이용한 변수 선언 : 가장 엄격한 선언

- 덮어 쓰기 불가능

- 재선언 불가능

(const가 '불변의'라는 뜻이기에 모두 불가능하다고 생각)

const v1 = 3;
console.log(v1)

v1 = "문자열로 덮어써버리기~~"; //TypeError: Assignment to constant variable.
console.log(v1) ;

const로 정의한 변수를 변경할 수 있는 예?

- primitive type

• 논릿값(Boolean): true/false
• 수치(Number): 1, 2.5, ...
• 큰 수치(BigInt): 93248230948n
• 문자열(String): "javascript", 'java'
• undefiend: 미정의
• null: 값 없음
• Symbol: 유일하며 바꿀 수 없는 값

- object type

• 객체
• 배열
• 함수
• 등 primitive type 이외의 것

객체 Case - 기본적으로 const 선언

// 객체 정의
const obj = {
    name: "승지니어",
    age: 28,
};
// 속성값 변경
obj.age = 20
console.log(obj) //{ name: '승지니어', age: 20 }
// 속성값 추가
obj.address = "jungle"
console.log(obj) //{ name: '승지니어', age: 20, address: 'jungle' }

배열 Case - 기본적으로 const 선언

// 배열 정의
const arr = ["dog", "cat"];
console.log(arr) // [ 'dog', 'cat' ]
// 첫 번째 값 변경
arr[0] = "puppy";
console.log(arr) // [ 'puppy', 'cat' ]
// 값 추가
arr.push("monkey");
console.log(arr) // [ 'puppy', 'cat', 'monkey' ]

리액트 개발에서 이용하는 변수 선언

var, let, const 중 리액트 개발에서는 const를 가장 많이 이용한다.

객체, 배열은 const로 선언하더라도 속성을 변경할 수 있다. 리액트 개발에서 동적으로 바뀌는 값은 'State(4.6절)'라는 다른 개념으로 값을 관리한다.

💡그래서 리액트에서는 대부분 const를 이용하고, State로 관리하지 않으면서 처리 도중 값을 덮어써야 하는 변수만 let으로 선언한다.

2.2 템플릿 문자열(ES2015 이후)

// 이름 저장 변수
let name2 = "승지니어";
// 나이 저장 변수
let age = 28;
// 나는 '나이'살 '이름'입니다. 출력
console.log(`나는 ${age}살 ${name2}입니다`); // 나는 28살 승지니어입니다
console.log("나는 " + age + "살 " + name2 + "입니다"); // 나는 28살 승지니어입니다

백틱(`) 문자열 안에 ${ } 형태의 안 쪽에는 자바스크립트로 입력할 수 있다. 따라서 위의 코드처럼 ${name}으로 변수를 전개할 수 있다. 이를 템플릿 문자열이라고 한다. 기본적으로 문자열과 변수를 결합하는 방법(마지막 log)도 가능하다.

2.3 화살표 함수arrow function ( ) => { } (EX2015 이후)

새로운 함수 표기법으로 기존보다 간단하게 함수를 기술할 수 있다.

기존 함수

// 기존 함수 정의
function func1(value) {
    return value;
}

console.log(func1("인풋 value")); // 인풋 value

// 함수를 변수로 정의
const func2 = function (value){
    return value;
}
console.log(func2("함수를 변수로 정의")); // 함수를 변수로 정의

함수를 정의하는 두 가지 방법을 알아보았다.

화살표 함수

// 화살표 함수 정의
const func1 = value => {
    return value;
}
// 실행 결과 출력
console.log(func1("밸류")); // 밸류

// 화살표 함수 정의2
const func2 = (val1, val2) => {
    return val1 + val2;
}
// 실행 결과 출력
console.log(func2("밸류1", "밸류2")); // 밸류1밸류2

// 화살표 함수 정의3
const func3 = (val1, val2) => val1 + val2
// 실행 결과 출력
console.log(func3("밸류1", "밸류2")); // 밸류1밸류2

1. 화살표 함수 정의1
   • value가 '한 개'인 경우 소괄호 없이 작성 가능!
2. 화살표 함수 정의 2
   • value 요소가 '두 개' 이상인 경우 소괄호 작성 필요
3. 화살표 함수 정의 3
   • 즉시 return 하는 형태로 사용 가능
4. 화살표 함수 정의 4

반환 값이 여러 행일 경우 ( )로 감싼 뒤 단일 행과 같이 모아서 반환할 수 있다.

// 괄호로 감싸서 모은 뒤 생략해서 반환
const func4 = (val1, val2) => (
    {
        name: val1,
        age: val2,
    }
)
// 실행 결과 출력
console.log(func4("seungineer", 280)); // { name: 'seungineer', age: 280 }

 

이 방법은 리액트를 다룰 때 자주 사용되므로 코드를 보는 즉시 의미를 알 수 있도록 의미를 익혀두는 게 좋다.

2.4 분할 대입 { } [ ]

분할 대입이란, 객체나 배열로부터 값을 추출하기 위한 방법이다. 분할 대입을 활용하지 않은 case를 먼저 보면서 알아본다.

const myProfile = {
    name: "seungineer",
    age: 24,
}
const message = `저의 닉네임은 ${myProfile.name}이고, ${myProfile.age}살입니다.`
console.log(message) // 저의 닉네임은 seungineer이고, 24살입니다.

백틱 내에 포함되어 있는 자바스크립트를 보면 객체의 name과 age를 가져오기 위해서 '객체명.속성명' 형태로 객체명을 반복해서 사용하는 것을 볼 수 있다. 객체 변수명이 더 길어지고, 입력해야 하는 곳이 많아질 경우 가독성 및 조작성 측면에서 떨어질 것이다.

객체 분할 대입

const myProfile = {
    name: "seungineer",
    age: 24,
    address: "jungle",
}
const {age, name} = myProfile; // 분할 대입
const message = `저의 닉네임은 ${name}이고, ${age}살입니다.`
console.log(message) // 저의 닉네임은 seungineer이고, 24살입니다.

위 코드와 같이 '분할 대입'을 하면 아래와 같이 작성 가능하다.

• 순서를 바꾸어서 추출 가능
• 객체의 일부 속성만 추출 가능

const myProfile = {
    name: "seungineer",
    age: 24,
    address: "jungle",
}
// 콜론으로 다른 변수명을 이용할 수 있음
const {age: newAge, name: newName} = myProfile;
const message = `저의 닉네임은 ${newName}이고, ${newAge}살입니다.`
console.log(message) // 저의 닉네임은 seungineer이고, 24살입니다.

추출한 속성에 별명을 붙이고 싶을 때는 다음과 같이 :(콜론)을 이용해서 해당 변수명으로 이용이 가능하다.

배열 분할 대입

const myProfile = ["seungineer", 28]

const message = `저의 닉네임은 ${myProfile[0]}이고, ${myProfile[1]}살입니다.`
console.log(message) // 저의 닉네임은 seungineer이고, 28살입니다.

myProfile이라고 하는 배열에 index로 접근해서 배열의 값을 활용하는 예이다. 여기에 분할 대입을 이용해 동일한 처리를 다음과 같이 할 수 있다.

const myProfile = ["seungineer", 28]
const [newName, newAge] = myProfile;

const message = `저의 닉네임은 ${newName}이고, ${newAge}살입니다.`
console.log(message) // 저의 닉네임은 seungineer이고, 28살입니다.

분할 대입 코드를 살펴보면 myProfile 객체 내의 순서대로 배열에 할당되는 것을 알 수 있다. 객체와 달리 순서를 변경할 수 없으며 직접 설정한 변수명(newName, newAge)을 사용할 수 있다. 인덱스 중간까지만 필요한 경우에는 이후 요소를 생략할 수도 있다. 리액트에 매우 자주 사용되므로 꼭 기억할 것!

2.5 디폴트값=

디폴트값은 '함수의 인수'나 '객체를 분할 대입'할 경우 설정해 사용 가능하다. 값이 존재하지 않을 때 초깃값으 설정할 수 있어 더욱 안전한 처리가 가능하다.

인수의 디폴트값

const sayHello = (name = "Guest") => console.log(`안녕하세요. ${name}님.`)

sayHello() // 안녕하세요. Guest님.

위 코드와 같이 어떤 인자도 들어가지 않았을 때의 name 변수에는 "Guest"로 할당되도록 할 수 있다. 만약 위 처릴르 하지 않은 경우 name log 시 undefiened로 나타나게 된다.

객체 분할 대입 시의 디폴트값

const myProfile = {
    age: 28,
}

const {name = "default"} = myProfile;
console.log(`${name}`);

인수 case와 마찬가지로 변수명 뒤에 '='로 값을 설정하면(예시 코드는 'default'), 디폴트값이 log되는 것을 알 수 있다. 이는 인수 때와 마찬가지이다. 이는 리액트에서도 자주 사용되는 개념이므로 반드시 숙지해야 함.

2.6 스프레드 구문 ...

스프레드 구문은 배열이나 객체에 이용할 수 있는 표기법이다.

요소 전개

const arr1 = [1, 2]
console.log(arr1) // [1, 2]
console.log(...arr1) // 1 2

내부 요소의 순차적 전개

const arr = [1, 2];
const func1 = (val1, val2) => val1 + val2;

console.log(func1(arr[0], arr[1])); // 3
console.log(func1(...arr)); // 3

요소 전개를 사용하면 위 코드와 같이 한 번에 인자를 전개할 수 있다.

요소 모으기

스프레드 구문은 요소를 모으는 데도 활용할 수 있다.

const arr1 = [1, 2, 3, 4, 5, 6]
const [num1, num2, ...left] = arr1

console.log(num1) // 1
console.log(num2) // 2
console.log(left) // [ 3, 4, 5, 6 ] (요소 모으기)
console.log(arr1) // [ 1, 2, 3, 4, 5, 6 ]

요소 복사와 결합

const arrA = [1, 2, 3, 4]
const arrB = [5, 6, 7, 8]

const arrAB = [...arrA, ...arrB]
console.log(arrAB) // [1, 2, 3, 4, 5, 6, 7, 8]

const arrApB = arrA + arrB
console.log(arrApB) // 1,2,3,45,6,7,8
console.log(arrApB[0]) // 1
console.log(arrApB[1]) // ,
console.log(arrApB[2]) // 2
console.log(arrApB[3]) // ,

스프레드 구문을 사용해서 arrAB에 요소를 결합할 수 있었다. 단순히 두 배열을 더할 경우 배열의 형태로 출력되는 게 아니라 각각의 배열을 문자열로 출력한다.

const obj1 = {
    val1: 10,
    val2: 20,
};
const obj2 = {
    val3: 30,
    val4: 40,
};
const obj11 = {...obj1}
obj1obj2 = {...obj1, ...obj2};
console.log(obj11) // { val1: 10, val2: 20 }
console.log(obj1obj2) // { val1: 10, val2: 20, val3: 30, val4: 40 }

위 코드와 같이 스프레드 구문을 객체에 이용하여 객체를 복사할 수 있다.

그렇다면, 등호(=)를 사용하여 복사하는 것은 안 될까? 등호로 배열이나 객체를 복사하는 경우 '참조값 역시 상속'되기 때문에 의도한 바와 다르게 동작할 수 있다.

// 등호를 이용한 복사 시
const obj1 = {
    val1: 10,
    val2: 20,
};
const obj11 = obj1
obj11.val2 = 200;
console.log(obj11) // { val1: 10, val2: 200 }
console.log(obj1) // { val1: 10, val2: 200 }

2.7 객체 생략 표기법

객체 기술 방법 중 쇼트핸드(생략표현, shorthand)가 있다. '객체의 속성명'과 '설정할 변수명'이 같을 때 생략 가능하다.

const name = "seungineer";
const age = 280;

const user = {
    name: name,
    age: age,
}

const user2 = {
    name,
    age,
}
console.log(user); // { name: 'seungineer', age: 280 }
console.log(user2); // { name: 'seungineer', age: 280 }

위 코드에서 user1의 경우 가장 표준적인 작성법이며, user2의 경우 '객체의 속성명'과 '설정할 변수명'이 같으므로 생략한 경우이다.

2.8 map, filter

배열 처리에서 자주 사용된다.

기존 for문

const nameArr = ["seungineer", "승지니어"]

for (let idx = 0; idx < nameArr.length; idx++) {
    console.log(nameArr[idx])
}
// seungineer
// 승지니어

배열의 요소 수만큼 루프 처리를 실행한다. 구문이 다소 복잡하고 코드 양도 늘어날 수 밖에 없다.

map 함수 이용 방법

map 함수에서는 배열을 순서대로 처리한 결과를 배열로 받을 수 있다.

// 배열 정의
const nameArr = ["seungineer", "승지니어"];

// map을 이용한 배열 처리
const nameArr2 = nameArr.map((name) => {
    console.log(name)
});

const testArr = [1, 2, 3]
const mappedArr = testArr.map(()=>{})
console.log(mappedArr) // [ undefined, undefined, undefined ]

const testArr2 = [1, 2, 3]
const mappedArr2 = testArr.map((val)=>{
    val = 1;
    return val})
console.log(mappedArr2) // [ 1, 1, 1 ]

testArr.map(()=>{}) 형태로 출력하면 undefiend로 testArr의 요소 수 만큼 리스트가 만들어지는 것을 알 수 있다. 즉, 배열의 각 요소에 ()의 변수로 하나씩 접근하여 {}가 실행되며 배열로 만드는 것을 알 수 있다.

mappedArr2 변수를 통해 이를 직관적으로 알 수 있다.

// for문 없이 배열의 모든 요소 순차적으로 출력

const arr = ["seungineer", "승지니어"]
arr.map((val)=>{console.log(val)})
// seungineer
// 승지니어

💡 .map((value)=>{ }) 형태로 배열 각 요소를 for문 없이 처리할 수 있다!

filter 함수 이용 방법

map 함수와 동일하지만 return 뒤에 조건식이 true인 요소만 반환한다.

// 숫자가 저장된 배열에서 홀수만 추출하는 예
const numArr = [1, 2, 3, 4, 5];

const oddArr = numArr.filter((num) => {
    return num % 2 === 1;
});

console.log(oddArr) // [1, 3, 5]

(참고) map, filter 함수에서 두 번째 인자에는 index 값이 들어간다!

const arr = ["seoul", "busan", "daejeon"]
arr.map((city, idx)=> {
    console.log(`${city}는 ${idx+1}번 째 도시이다.`);
})
// seoul는 1번 째 도시이다.
// busan는 2번 째 도시이다.
// daejeon는 3번 째 도시이다.

map을 이용한 예시

• 누시다, 사키오카, 고토의 이름이 저장된 배열이 있다. 누시다 이외의 이름  뒤에는 '님'을 붙인 새로운 배열을 생성하자.

const namelist = ["누시다", "사키오카", "고토"]

const newArr = namelist.map((name)=>{
    if (name === "누시다"){
        return name
    } else{
        return `${name}님`
    }
});
console.log(newArr) // [ '누시다', '사키오카님', '고토님' ]