오늘 한 일
- React에서 배열 API 활용법 정리
- [개인 Project] 투두리스트 만들기 기능구현
학습 내용
기존 배열 자체를 수정
push
배열의 맨 뒤에 요소를 하나 추가
const handlePush = function () {
if (query.length <= 0) {
alert("추가하시려는 값을 입력해 주세요.");
return false;
}
const newArr = [...array, query];
setArray(newArr);
setResult(newArr.join(", "));
};pop
array.pop()
배열의 맨 뒤에 요소를 하나 제거
const handlePop = function () {
const newArr = [...array];
newArr.pop();
setArray(newArr);
setResult(newArr.join(", "));
};shift
배열의 맨 앞에 요소를 하나 추가
unshift
배열의 맨 앞에 요소를 하나 제거
splice
array.splice(시작index, 지울 갯수)
array.splice(시작index, 지울 갯수, “a”, “b”) : 지운 자리에 a, b 추가
기존 요소를 삭제, 교체하거나 새로운 요소를 추가하여 원본 배열의 내용을 변경
const arr = [1,5,7];
arr.splice(1, 0, 2, 3, 4); // [ 1, 2, 3, 4, 5, 7 ]
arr.splice(5, 0, 6); // [ 1, 5, 7, 6 ]
arr.splice(1, 2); // [ 1 ]
arr.splice(2, 1, "a", "b"); // [ 1, 5, 'a', 'b' ]
console.log(arr);sort
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
- 숫자 오름차순
const arr = [10, 4, 5, 2];
arr.sort((a, b) => a - b);
console.log(arr); // [ 2, 4, 5, 10 ]- 알파벳순
새로운 배열을 반환
join
배열의 모든 요소를 연결해 하나의 문자열로 만든다.
const elements = ['Fire', 'Air', 'Water'];
const elements1 = elements.join(); // "Fire,Air,Water"
const elements2 = elements.join(""); // "FireAirWater"
const elements3 = elements.join("-"); // "Fire-Air-Water"concat
배열의 끝에 여러 요소를 추가
const arr = [1,2,3];
const newArr1 = arr.concat(4,5,6);
const newArr2 = arr.concat([4,5,6]);
console.log(newArr1); // [ 1, 2, 3, 4, 5, 6 ]
console.log(newArr2); // [ 1, 2, 3, 4, 5, 6 ]slice
새로운 배열로 반환, 원본 배열은 바뀌지 않음(splice와 차이)
배열의 일부만 가져올 때 사용
array.slice(시작index(이상), 끝index(미만))
const arr = [1,2,3,4,5];
const newArr1 = arr.slice(3)
const newArr2 = arr.slice(2,4)
console.log(newArr1); // [ 4, 5 ]
console.log(newArr2); // [ 3, 4 ]map : 배열의 모든 요소 변형
array.map(콜백함수)
새로운 배열을 반환, 반환은 무조건 같은 갯수의 배열 출력
const handleMap = function () {
const mapped = array.map(function (item, index) {
return item.toUpperCase();
});
setResult(mapped.join(", "));
};filter : 조건에 맞는 요소만 남기기
array.filter(콜백함수)
- 새로운 배열을 반환, 조건에 맞는 값만 재배열, return에 조건이 들어감
- find와 사용법은 같음
filter: 조건을 충족한 모든 값 반환
find: 조건을 충족한 첫번 째 요소만 반환
const handleFilter = function () {
const filtered = array.filter((item, index) => item.includes(query));
setResult(filtered.join(", "));
};그 외 형태
forEach
forEach(콜백함수);
const handleForEach = function () {
let temp = "";
array.forEach(function (item, index) {
temp += `${index}: ${item} / `;
});
setResult(temp);
};reduce
array.reduce(콜백함수 (누적된값, 현재값) => 누적된값 + 현재값)
- 하나씩 누적한 데이터가 최종적으로 출력
- return문으로 누적된 값을 써줘야 함
const arr = [5, 7, 2, 4];
const sum = arr.reduce((acc, cur) => acc + cur);
console.log(sum); // 18find
array.find(콜백함수)
filter와 사용법은 동일, 조건을 충족하는 첫번째 값만 출력
indexOf/lastIndexOf
indexOf 배열에서 주어진 요소와 정확히 일치(===)하는 첫 번째 인덱스 반환
lastIndexOf 배열에서 주어진 요소와 정확히 일치(===)하는 마지막 번째 인덱스 반환
찾을 수 없는 경우 -1을 반환
some
array.some(콜백함수)
- 배열에 조건에 맞는 요소가 하나라도 있으면 true, 없으면 false 반환
- 이 메서드는 배열을 변경하지 않는다.
const arr = [5, 7, 12, 15, 17];
const boolean = arr.some((x) => x % 2 === 0);
console.log(boolean); // trueevery
array.every(콜백함수)
배열의 모든 요소가 조건에 맞아야 true, 그렇지 않으면 false 반환
const arr = [5, 7, 12, 15, 17];
const boolean = arr.every((x) => x % 2 === 0);
console.log(boolean); // falseincludes
배열의 항목에 특정 값이 포함되어 있는지 판단하여 true, false를 반환
오늘의 회고
-
주말 동안 가족 일정이 있어서 과제를 못했다. 오늘 하루종일 과제와 씨름하면서 강의 내용도 다시 훑어보고 useState와 map 사용법에 대해 다시 공부했지만, 실제로 적용하는 것이 아직 너무 어렵다. 투두리스트는 쉬운 과제라고들 하던데 나만 어려운건가... 강의를 들으면서 이해하는 것과 실제 적용하는 것 사이의 괴리감이 느껴져서, 수준별 학습 반을 스탠다드에서 베이직으로 옮기려고 했는데, 매니저님과 대화 후 일단 내일까지만 스탠다드 반에서 더 들어보기로 했다. 그런데 내일 옮겨야 할듯...
-
알고리즘도 이번 주부터 시작하려고 했는데, 왜 이렇게 하루가 짧은건지, 시간이 너무 빨리간다. 좀 더 계획적으로 일과를 수정해 봐야겠다. 내일부터는 리액트 숙련 과정에 들어간다. 일정을 따라가는 게 조금 버겁게 느껴진다 ㅠㅠ 다시 힘을 내어보자!!
내일 할 일
- [내배캠] 리액트 숙련 강의
- [개인 Project] 투두리스트 해설 강의 듣기
