완벽가이드 - 자바스크립트 새로고침

📌 페이지에 자바스크립트 추가하기

자바스크립트에서는 <script type='module'></script> 를 이용하여 다른 모듈에서 필요한 것들을 import, export 할 수 있다.

하지만 리액트에서는 위의 스크립트 코드를 추가할 필요가 없다.
리액트가 사용하는 빌드 프로세스 과정에서 HTML코드에 자동으로 script 코드를 추가하기 때문이다.

📌 화살표 함수

화살표 함수에 반환문 외에 다른 로직이 없는 경우, return 키워드와 { }를 생략할 수 있다.

❌ 리턴 키워드 포함

number => {
 	return number * 3; // 리턴 키워드 생략되어야 하므로 오류
}

⭕️ 리턴 키워드 생략

number => number * 3

📌 배열 메서드

Array.forEach

• 사용법: Array.prototype.forEach(callback)
• 파라미터: callback(elem, index) - 각 배열 요소에 대해 실행할 콜백 함수
• 반환값: 없음
• 활용 예:
  • 반복 작업 (e.g., 합계 계산, 로그 출력)
  • 반환값이 필요 없는 작업에 적합

💡 배열의 각 요소에 대해 콜백 함수를 실행하지만, 새로운 배열을 생성하지 않고 기존 배열을 순회한다.

array.forEach((item) => {
  if (item % 2) result += item;
});

Array.map

• 사용법: Array.prototype.map(callback)
• 파라미터: callback(elem, index) - 각 배열 요소에 대해 실행할 콜백 함수
• 반환값: 새로운 배열
• 활용 예:
  • 배열 요소 변환 (e.g., 값 변경, 객체 배열 만들기)
  • 기존 배열을 유지하면서 새로운 배열 생성

각 배열 요소에 대해 콜백 함수가 반환한 값을 기반으로 새로운 배열을 반환한다.

var newArray = array.map((number) => {
  if (number % 2) {
    return number;
  } else return 0;
});

newArray.forEach((number) => (result += number));

Array.find

• 사용법: Array.prototype.find(callback)
• 파라미터: callback(elem) - 각 배열 요소에 대해 실행할 콜백 함수
• 반환값: 조건을 만족하는 첫 번째 요소, 없으면 undefined
• 활용 예:
  • 특정 조건을 만족하는 하나의 값 찾기
  • 조건 검사 후 빠르게 종료하고 싶을 때 적합

조건을 만족하는 첫 번째 요소를 반환하며, 이후 요소는 검사하지 않는다.

❗️ if 문 필요 없고 그냥 조건 만족하는 첫번째 요소를 반환한다.
따라서 조건문을 쓸 때 대괄호 빼야한다.

result = array.find((number) => number % 2 === 0 && number % 3 === 0); // 바로 조건 쓰기 --> 만족하는 요소 반환

Array.filter

• 사용법: Array.prototype.filter(callback)
• 파라미터: callback(elem) - 각 배열 요소에 대해 실행할 콜백 함수
• 반환값: 조건을 만족하는 요소들을 담은 새로운 배열
• 활용 예:
  • 조건에 맞는 값들만 추출 (e.g., 유효성 검사, 특정 데이터 필터링)
  • 반환된 배열로 추가 작업 수행 가능

조건을 만족하는 모든 요소를 배열로 반환한다. 조건을 만족하지 않으면 빈 배열을 반환한다.

array.filter((num) => num % 2 === 1).forEach((num) => (result += num));

Array.findIndex

• 사용법: Array.prototype.findIndex(callback)
• 파라미터: callback(elem, index, array):
  • elem: 현재 요소
  • index: 현재 요소의 인덱스 (선택적)
  • array: 원본 배열 (선택적)
• 반환값:
  • 조건을 만족하는 첫 번째 요소의 인덱스
  • 조건을 만족하는 요소가 없으면 -1 반환
• 특징
  • find와 유사하지만, 요소 자체가 아니라 요소의 인덱스를 반환한다
  • 조건에 맞는 요소를 찾았을 때 바로 탐색을 종료한다.

비교: find vs findIndex

메서드	반환값
find	요소
findIndex	인덱스

findIndex는 요소의 위치가 필요할 때 사용하며, 조건을 만족하지 않으면 항상 -1을 반환하므로 이를 활용해 존재 여부를 확인할 수 있다.

Array.reduce

• 사용법: Array.prototype.reduce(callback[, initialValue])
• 파라미터: callback(acc, currentValue, index, array):
  • acc (누적값): 이전 콜백 실행 결과
  • currentValue (현재 요소): 현재 요소 값
  • index (현재 인덱스): 선택적
  • array (원본 배열): 선택적
  • initialValue (초기값): 선택적
• 반환값: 누적값
• 활용 예:
  • 배열 요소의 합계, 곱 계산
  • 중첩 데이터 구조 변환
  • 복잡한 데이터 가공 및 누적 작업

배열의 각 요소를 순회하며 누적값(acc)을 업데이트한다.
initialValue가 없으면 배열의 첫 번째 요소를 초기값으로 사용한다.

var result = array.reduce((sum, num) => {
  if (num % 2 !== 0) {
    return sum + num; // 홀수면 sum에 num을 누적해서 반환
  } else {
    return sum; // 짝수일때는 이전 sum을 그대로 반환
  }
}, 0); // 2. 0이 sum으로 감 = initialValue 존재하면 누적값의 초기값

메서드 특징

메서드	반환값	특징
forEach	⭐️ 없음 ⭐️	배열 요소 순회 및 콜백 실행만 수행
map	⭐️ 배열 ⭐️	각 요소를 변환하여 새로운 배열 반환
find	⭐️ 요소 ⭐️	조건 만족하는 첫 번째 요소 반환
filter	⭐️ 배열 ⭐️	조건 만족하는 모든 요소 배열로 반환
reduce	⭐️ 누적값 ⭐️	배열의 모든 요소를 누적하여 하나의 값 반환