close
프로필 배경
프로필 로고

Reading Room 01

리액트 · 2024. 5. 10. fullscreen 넓게보기

리액트 객체, 배열, 연산자

오늘은 리액트 강의를 들어본다...

 

리액트 공부를 시작하면서 필요한 자바스크립트 부분은 정리를 해주셔서 일단 듣고 내용 정리!

 

1. let, const

변수는 프로그래밍에서 데이터를 저장하고 관리하는 핵심 요소로, 
코드의 재사용성, 유지보수성, 가독성을 높이는 데 중요한 역할을 합니다. 
자바스크립트에서는 주로 let, const, var 세 가지 키워드를 사용하여 변수를 선언합니다. 
이들 각각은 다른 특성과 사용 사례를 가지고 있으며, 
적절한 사용은 프로그램의 안정성과 확장성에 크게 기여합니다.

let과 const는 블록 스코프를 가지며, 
이는 해당 변수들이 선언된 블록 내에서만 유효함을 의미합니다. 

const는 값을 재할당할 수 없는 상수를 선언할 때 사용되며, 
프로그램 내에서 변경되지 않는 값을 명확히 표현할 수 있어 코드의 안정성을 높입니다. 

반면, let은 변수의 값을 필요에 따라 유연하게 변경할 수 있는 경우에 적합합니다.

var는 함수 스코프를 가지며, 이는 선언된 함수 내 어디에서든 접근할 수 있음을 의미합니다. 
하지만 var의 사용은 호이스팅과 예상치 못한 범위에서의 변수 접근으로 인해 
코드의 가독성과 유지보수성을 저하시킬 수 있어, 
현대적인 자바스크립트 개발에서는 let과 const의 사용을 권장합니다.

변수 선언 시 가장 먼저 const를 고려하고, 
재할당이 필요한 경우에만 let을 사용하는 것이 좋습니다. 
이러한 접근 방식은 프로그램의 안정성을 높이고, 
의도치 않은 값 변경을 방지하여 버그를 줄일 수 있습니다. 

또한, let과 const 모두 호이스팅되지만, 
var와 달리 초기값을 undefined로 미리 할당하지 않아 논리적인 흐름을 해치지 않으며, 
코드의 가독성과 유지보수 측면에서 더 나은 선택이 됩니다.

2. 객체

자바스크립트에서 객체는 키(Key)와 값(Value)의 쌍으로 이루어진 데이터 구조입니다. 
이러한 객체는 프로그래밍에서 중요한 역할을 하며, 
자바스크립트에서는 거의 모든 것이 객체로 취급됩니다. 
객체를 이해하면 JSON(JavaScript Object Notation) 같은 데이터 형식도 쉽게 다룰 수 있습니다.

 

객체 선언 및 속성 접근

객체 선언은 let 또는 const를 사용하여 변수화시켜 선언합니다.

객체의 속성에는 함수를 포함한 모든 데이터 타입이 올 수 있습니다.

let user = {
  name: "르탄이",
  age: 30,
  isAdmin: true,
  printHello: () => console.log("hello!")
};
객체의 속성에 접근하는 방법은 크게 두 가지입니다:

1. 점 표기법(Dot Notation): user.name 처럼 속성 이름을 직접 사용합니다.

2. 괄호 표기법(Bracket Notation): user['name'] 처럼 속성 이름을 문자열로 사용합니다. 
이 방법은 키 값이 변수일 때 또는 속성 이름에 공백이나 특수 문자가 포함된 경우 주로 사용됩니다.

 

 

**

리액트에서는 state라는 개념을 사용하기 때문에 아래처럼

직접적으로 객체의 속성을 삭제하거나 수정하는 대신,

상태를 불변하게 유지하는 방법을 선호합니다.

따라서 아래의 방법은 참고만!

객체 속성 추가, 수정 및 삭제

객체에 새로운 속성을 추가하거나 기존 속성을 수정할 때는 단순히 새로운 값을 할당하면 됩니다.

// 속성 추가 또는 수정
user.email = "john.doe@example.com";
user.age = 31;
// 속성 삭제
delete user.email;

 

배열

 

배열은 같은 타입의 여러 데이터를 하나의 변수에 순차적으로 저장하기 위해 사용되는 데이터 구조입니다.

JavaScript에서 배열은 다양한 타입의 데이터를 포함할 수 있으며, 객체와 마찬가지로 매우 유연합니다.

배열은 대괄호 []를 사용하여 선언되며, 배열 내 각 요소는 쉼표 ,로 구분됩니다.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length);  // 출력: 5

 

요소의 접근과 수정

배열의 특정 요소에 접근하거나 수정할 때는 대괄호 [] 안에 인덱스를 지정하여 사용합니다.

배열의 인덱스는 0부터 시작합니다. 따라서 배열의 첫 번째 요소는 인덱스 0으로 접근할 수 있고,

두 번째 요소는 인덱스 1로 접근할 수 있습니다.

console.log(numbers[0]); // 첫 번째 요소에 접근
numbers[2] = 10; // 세 번째 요소를 10으로 수정

주요 메서드 정리

 

객체

1. Object.keys()

-> key를 추출해 배열로 반환한다.

 

2. Object.values()

-> 값을 추출해 배열로 반환한다.

 

3. Object.entries()

-> 키와 값을 같이 반환한다.

 

4. Object.assign()

const userDetails = {
occupation: "개발자"
};
Object.assign(user, userDetails);

console.log(user);

// {name: "르탄이", age: 30, isAdmin: true, occupation: "개발자"}

원래 있던 user 객체에 userDetails를 복사해 넣고 싶을 때 사용한다.

 

배열

1. push()

-> 배열 끝에 하나 이상의 요소를 추가하고 반환한다.

 

2. pop()

-> 배열의 마지막 요소를 제거하고 반환한다.

 

3. map, filter

map은 하나하나의 요소를 다른 것으로 가공해서 출력해준다.

< 새로운 배열을 반환한다는 것은 기존 배열의 내용을 직접 수정하는 것이 아니라

불변성을 유지해 새로운 배열을 생성하여 사용토록 하자는 것>

const numbers = [1, 2, 3, 4, 5]  // 배열 내의 모든 요소 각각에 대해
const squared = numbers.map(function(num){
  return num * num;
) // 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환한다.

console.log(squared)

* 1이 num으로 들어감. 
* 1 * 1이 되어 배열에 담김
* 그 다음 2, 3, 4, 5 실행 된 후 결과는 변수 squared에 담김


간단하게!
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared);  // [1, 4, 9, 16, 25]

 

 

filter 

const numbers = [1, 2, 3, 4, 5]

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
} // 함수는 요소 하나하나를 검증하면서 새로운 배열에 담길지 말지를 결정


간단하게!
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4]

 

4. reduce

배열의 각 요소에 대해 주어진 함수를 실행하고

결과물을 누적해 반환한다.

const numbers = [1, 2, 3, 4, 5]

numbers.reduce(function(누적된 값, 일반값) {
  console.log(누적된 값); // 첫번째 요소
  console.log(일반 값); // 두번째 요소
  
  return 누적된 값 + 일반 값;
 });
 
 ** 누적기
 
 간단하게!
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15
// function 제거, 화살표 함수 사용)

 

5. sort

원본 배열 값 자체를 바꿔버린다.

기본적으로 문자열로 변환된 요소들을 각각의 유니코드 포인트에 따라 정렬한다.

그래서 숫자 배열을 정렬할 때는 정렬 순서를 정의하는 비교 함수를 제공해야 한다.

// 기본 사용법
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits);  // ["Apple", "Banana", "Mango", "Orange"]
// 숫자 배열 정렬
const numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers);  // [1, 5, 25, 40, 100]
// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers);  // [100, 40, 25, 5, 1]

 

템플릿 리터럴

 

여러 줄의 문자열을 쉽게 작성하고, 문자열 내에 변수나 표현식을 직접 삽입할 수 있게 해줍니다.

이 기능을 사용하려면 백틱( )을 사용하여 문자열을 구성해야 하며,

${expression} 구문을 통해 변수나 표현식의 결과를 문자열 안에 직접 삽입할 수 있습니다.

 

객체 Destructuring (파괴, 찢는다)

1. 다중 속성 추출

객체 Destructuring을 사용하여 객체 내부의 여러 속성을 한 번에 추출할 수 있습니다.

이 방식은 객체로부터 필요한 정보만을 빠르게 가져오고 싶을 때 매우 유용합니다.

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

const { name, price } = item;

console.log(name);  // 출력: 커피
console.log(price); // 출력: 4000

 

2. 함수 매개변수에서의 사용

함수를 정의할 때 매개변수로 객체를 받고, 그 객체 내부의 속성을 직접 사용하는 경우가 많습니다.

객체 Destructuring을 사용하면 함수 내부에서 객체의 속성을 더 쉽게 사용할 수 있습니다.

이 방식은 특히 리액트(React) 컴포넌트를 작성할 때 매우 흔히 사용됩니다.

function greet({ name, age }) {
  console.log(`안녕하세요, 제 이름은 ${name}이고 나이는 ${age}살입니다.`);
}
greet({ name: "르순이", age: 28 });

 

배열 Destructuring

객체와 달리 요소의 순서가 중요합니다.

let colors = ["red", "green", "blue"];

let [firstColor, secondColor] = colors;

console.log(firstColor);  // 출력: red
console.log(secondColor); // 출력: green

배열 Destructuring을 통해 배열의 첫 번째 요소와 두 번째 요소를

각각 firstColor, secondColor라는 변수에 할당하였습니다.

이 방법을 통해 배열 내부의 요소에 보다 직접적으로 접근할 수 있으며,

코드의 가독성을 향상시킬 수 있습니다.

 

연습문제

더보기
더보기

1. 다음 자바스크립트 객체에서 name과 age를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성하세요.

 

const person = {
  name: "르탄이",
  age: 25,
  job: "개발자"
};

 

const {name, age} = person

console.log(name) // 르탄이

console.log(age) // 25

 

2. 다음 자바스크립트 객체에서 title과 year를 디스트럭처링을 사용하여 추출하고 출력하는 코드를 작성하세요.

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  release: {
    year: 2010,
    month: "July"
  }
};

 const { title, release: {year} } = movie;

 

console.log(title) // Inception;

console.log(year) // 2010;

 

3. 다음 자바스크립트 배열에서 첫 번째와 세 번째 요소를 디스트럭처링을 사용하여 추출하여 first, third 변수에 담아 출력하는 코드를 작성하세요.

const numbers = [10, 20, 30, 40, 50];

const [first, , third] = numbers;

 

console.log(first) // 10

console.log(third) // 30

 

4. 호텔의 예약 확인 시스템의 함수라고 가정합니다. 아래 결과와 같이 출력되도록 함수를 완성해 보세요.

function confirmReservation(user) {
        // 여기에 user 객체를 구조 분해 할당 하세요.
        
        return `${name} 고객님의 ${roomType}룸 입실날짜는 ${firstDate} 입니다.`
}

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

const { name, roomType, date: firstDate } = userInfo;

Spread Operator

배열 등의 요소를 개별 요소로 확장할 때 많이 사용합니다.

객체 또는 배열이 가지고 있는 bracket을 찢고 펼치는 느낌.

객체, 배열을 복사할 때 많이 씁니다.

 

객체에서의 사용

(1)-1. 객체 복사 및 확장

스프레드 연산자를 사용하면 객체의 속성을 쉽게 다른 객체로 복사하거나 기존 객체에 새로운 속성을 추가하여 확장할 수 있습니다.

const originalUser = { name: "르탄이", age: 28 };
const updatedUser = { ...originalUser, location: "한국" };
console.log(updatedUser);  // { name: "르탄이", age: 28, location: "한국" }

 

이 코드에서는 originalUser 객체를 복사하고, location 속성을 추가하여 새로운 객체 updatedUser를 생성하고 있습니다.

결과적으로, updatedUser는 원본 객체의 모든 속성을 가지면서 추가로 location 속성을 갖게 됩니다.

 

**

const originalUser = {
  name: '르탄이',
  age: 28,
  };
  
 위 코드를 복사!
 const updatedUser = originalUser;
 updatedUser.name = '르순이';
 
 앗 복사본의 name을 변경했는데...
 원본도 같이 변경된다. (불변성 깨짐)
 -----------------------
 이때 spread operator를 사용한다! (밑)
 
 const updatedUser = {...originalUser }
 // 중괄호를 사용해  원래 구조에서 파괴해 펼친다. -> 새로운 객체를 생성한 게 되는 것
 {...originalUser } = {name: '르탄이', age: 28}
  updatedUser.name = '르순이';

 

 

배열에서의 사용

(2)-1. 배열 합치기

스프레드 연산자는 배열을 합칠 때도 매우 유용합니다.

const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = [...first, ...second];
console.log(combined);  // [1, 2, 3, 4, 5, 6]

여기서는 두 배열 first와 second를 합쳐서 새로운 배열 combined를 생성합니다.

스프레드 연산자를 사용하여 first 배열의 모든 요소와 second 배열의 모든 요소를 순서대로 나열한 후,

이들을 하나의 배열에 담습니다. 결과적으로, combined 배열은 두 배열의 모든 요소를 순서대로 포함하게 됩니다.

 

 

** 합쳤을 때 키가 중복된다면 뒤에 있는 객체가 앞에 있는 객체를 덮어씁니다. 

 

연습문제

더보기
더보기
1. 다음 두 배열 array1과 array2가 주어졌을 때, 두 배열을 합친 새 배열 combinedArray를 스프레드 연산자를 사용하여 만들고, 결과를 출력하는 코드를 작성하세요.
 
또한, array1을 스프레드 연산자를 사용하여 복제한 후 원본 배열 array1에 변화를 주어 복제된 배열이 영향을 받지 않는지 검증하는 코드도 작성하세요.
 
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

 

답

 

 const combinedArray = [...array1, ...array2];

const array1 = [1, 2, 3];

// 스프레드 연산자를 사용해 array1을 복제
const clonedArray = [...array1];

// 원본 array1에 변화를 줌 (예: 요소 추가)
array1.push(4);

console.log(clonedArray);  // 출력: [1, 2, 3] - 원본 array1의 변경이 복제된 배열에 영향을 주지 않음
console.log(array1);       // 출력: [1, 2, 3, 4] - 변경은 원본 array1에만 적용됨

 

 

2.

다음 두 객체 obj1과 obj2가 주어졌을 때, 두 객체의 속성을 스프레드 연산자를 사용하여
병합한 새 객체 mergedObj를 생성하고 결과를 출력하세요.
단, 같은 이름의 키가 존재할 경우 obj2의 값이 우선하여 반영되어야 합니다.
또한, mergedObj에서 name 속성의 값을 '원장님'으로 변경 후,
원본 객체 obj1과 obj2가 변경되지 않는 것을 확인하세요.
 
const obj1 = { name: "르탄이", age: 25 };
const obj2 = { name: "르순이", email: "rsoony@sparta.com" };

 

답

const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { name: "르탄이", age: 25, email: "rsoony@sparta.com" }

mergedObj.name = "원장님";
console.log(mergedObj); // { name: "원장님", age: 25, email: "rsoony@sparta.com" }
console.log(obj1);      // { name: "르탄이", age: 25 }
console.log(obj2);      // { name: "르순이", email: "rsoony@sparta.com" }

 

rest operator

나머지 연산자

 

1. 스프레드 연산자와 나머지 매개변수

* 스프레드 연산자 -> 펼치기 (배열, 객체 요소들을 하나씩 펼처서 나열합니다)

* 나머지 연산자 -> 모으기 (여러 값을 하나의 배열이나 객체에 모읍니다)

리터럴 -> 객체면 중괄호, 배열은 대괄호로 직접 선언하는 방식일 뿐이다.

2. 스프레드 연산자의 활용 예시

(1)-1. 함수 매개변수에서의 사용

function sum(...numbers) {
    return numbers.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

위의 코드에서 sum 함수는 여러 개의 숫자 인수를 받아, 그 합을 반환합니다. 

...numbers는 모든 인수를 numbers 배열로 그룹화합니다.

 

(1)-2. 객체 분해 할당에서의 사용

const person = {
    name: "John",
    age: 30,
    country: "USA",
    occupation: "Developer"
};
const { country, ...rest } = person;
console.log(rest); // { name: "John", age: 30, occupation: "Developer" }

이 코드는 객체 person에서 country 속성을 제외한 나머지 속성들을 새 객체 rest로 그룹화합니다.

이는 분해 할당을 통해 이루어집니다.

 

연습 문제

 

더보기
더보기
person 객체에서 password를 제외한 나머지 요소를 sampleObj 변수에 담아 분리해보세요.
const person = { name: 'Young', age: 35, job: "developer", password: "1234" }

// 여기에 코드를 작성합니다.

console.log(sampleObj) // => { name: 'Young', age: 35, job: "developer" }

const { password, ... sampleObj } = person;

 

전개 연산자로 사용될 때:

  • 배열이나 객체를 다른 배열이나 객체, 함수의 인자 등에 펼치려고 할 때 사용됩니다.
  • 예를 들어, 배열 또는 객체의 요소를 복사하거나, 함수에 여러 인자를 배열 형태로 전달할 때 사용합니다.
    • 배열 예시: [...someArray]
    • 객체 예시: {...someObject}
    • 함수 인자 예시: someFunction(...someArray)

나머지 연산자로 사용될 때:

  • 함수의 매개변수를 배열로 합치거나, 객체 또는 배열의 구조 분해 할당에서 나머지 부분을 하나의 변수로 합치고 싶을 때 사용됩니다.
  • 예를 들어, 함수에서 전달받은 인자들을 배열로 처리하거나, 객체의 특정 속성을 제외한 나머지를 새로운 객체로 가져올 때 사용합니다.
    • 함수 매개변수 예시: function(...args) { ... } // 함수가 받을 인자의 정확한 수를 알 수 없을 때
    • 구조 분해 할당 예시: const { a, ...rest } = someObject;

구별 방법:

  • 전개 연산자: 대상을 '펼침'에 사용. 주로 배열이나 객체의 요소를 다른 곳에 '펼쳐' 사용할 때.
  • 나머지 연산자: 여러 값들을 '모음'에 사용. 주로 함수의 매개변수를 배열로 모으거나, 구조 분해 할당에서 나머지 요소들을 하나의 변수로 모을 때.

간단히 말해, '펼치는' 작업이 필요할 때는 전개 연산자를, 여러 요소나 인자들을 '모으는' 작업이 필요할 때는 나머지 연산자를 사용한다고 기억하면 됩니다.

저작자표시 비영리 변경금지

'리액트' 카테고리의 다른 글

가계부 만들기 2  (0) 2024.05.24
가계부 만들기 1  (0) 2024.05.23
리액트로 todo list 만들기 2  (0) 2024.05.16
리액트로 todo list 만들기 1  (0) 2024.05.14
리액트 SPA, 프롭스, JSX 등  (0) 2024.05.13
리액트 관련 글
더 보기

티스토리툴바