DH의 개발 공부로그

문제 발견 이전의 작업을 했던 리액트 Set을 이용한 checkbox를 다루었던 코드에서 문제점이 있었습니다. [React] 리액트에서 Set 이용한 Checkbox 상태관리하기! 이전의 코드를 확인하고 싶으면 다음과 같습니다. 이전 소스코드 확인하기 문제점이 무엇인지 확인을 해보면, 우선 전체선택과 개별선택이 있는 체크박스의 기능들은 다음과 같아야 합니다. 개별 체크박스 선택/해제 기능 전체 선택을 클릭 시 전체 선택/해제 변경 기능 전체 선택 시에 하나라도 체크가 해제되면 전체 선택 박스 체크 해제 모든 체크박스가 선택될 경우 전체 선택 박스 체크 활성화 이렇게 4가지의 경우가 충족이 되어야 합니다. 하지만 위의 코드에서 1번과 2번의 조건은 충족이 되지만, 3번과 4번의 기능들은 충족하지 못하는 문..

자바스크립트에서 배열을 다루다보면 자주 사용하게 되는 메서드 중에 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 두 메서드는 언뜻 보기에 비슷한 기능을 하고 이름도 비슷해서 헷갈리는 경우가 많은데, 두 메서드에는 큰 차이점이 있습니다. 1. slice() slice() 메서드는 어떤 배열의 시작점 부터 끝 까지(끝 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 여기서 중요한 점은 slice()는 원본 배열은 바뀌지 않는 새로운 배열을 반환한다는 점입니다. 구문 arr.slice([begin [, end]]) begin 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 만약 undefined인 경우에는 0번 인덱스부터 slice 합니다. 음수는 배열의 끝에서부..

요소의 위치 찾기! 이번에 알아 볼 메서드는 바로 문자열 또는 배열, 즉 String 타입과 Array타입에서 특정 문자의 위치(index)를 찾아주는 함수입니다. indexOf() indexOf()는 문자열 또는 배열에서 지정된 요소를 앞에서부터 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. String.prototype.indexOf() 구문 str.indexOf(searchValue[, fromIndex]) 매개변수 searchValue 찾으려는 문자열 fromIndex 문자열을 찾기 시작하는 위치, 인덱스 값. 기본값은 0이며 length보다 높은 숫자면 -1 반환 예시 const str = 'hello world' // length: 11 consol..

reduce() 란? reduce()는 배열의 각 요소를 순회하면서 주어진 함수를 실행하여 값을 누적해 하나의 결과값으로 반환하는 메서드입니다. 구문 arr.reduce(callback[, initialValue]) callback 콜백함수에는 다음 4가지의 인수를 받을 수 있습니다. 누적 값 (accumulator) 현재 값 (currentValue) 현재 인덱스 (currentIndex) 원본 배열 (array) initialValue callback함수의 초기값으로, 따로 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용합니다. 예시 쉽게 이해해보면 이런 형태의 구조를 갖는다고 볼 수 있습니다. 배열.reduce((누적값, 현재값) => { return 새로운 누적값 }, 초기값) ### 1. 배..