react의 for 대신 사용하는 .forEach 에서 validation

 

 

.forEach에서 **유효성 검사(Validation)**를 적용하려면, 각 요소를 순회하며 조건을 확인하고 필요한 로직을 실행할 수 있습니다. 아래는 .forEach를 활용하여 데이터를 검증하는 몇 가지 예를 보여드립니다.

 

 

1. 배열의 값이 특정 조건을 만족하는지 확인 

** 소스

const numbers = [10, 20, 5, -3, 25];

numbers.forEach((num) => {
  if (num < 0) {
    console.log(`유효하지 않은 값: ${num}`);
  } else {
    console.log(`유효한 값: ${num}`);
  }
});

 

**. 결과 

유효한 값: 10
유효한 값: 20
유효하지 않은 값: -3
유효한 값: 25

 

2. 유효하지 않은 값만 따로 저장

** 소스

const emails = ["user1@example.com", "invalid-email", "user2@example.com"];
const invalidEmails = [];

emails.forEach((email) => {
  if (!email.includes("@")) {
    invalidEmails.push(email);
  }
});

console.log("유효하지 않은 이메일 목록:", invalidEmails);

 

**. 결과 

유효하지 않은 이메일 목록: [ 'invalid-email' ]

 

3. 유효성 검사 실패 시 에러 메시지 출력

** 소스

const data = [
  { id: 1, name: "Alice" },
  { id: 2, name: "" },
  { id: 3, name: "Bob" }
];

data.forEach((item) => {
  if (!item.name) {
    console.error(`ID ${item.id}의 이름이 비어 있습니다.`);
  }
});

**. 결과 

ID 2의 이름이 비어 있습니다.

 

 

4. 조건에 따라 처리 중단하기 (forEach 대신 some 사용 권장)

.forEach는 중간에 순회를 중단할 수 없으므로, 중단이 필요할 경우 for문이나 .some을 사용해야 합니다.

대안: some 사용

** 소스

const numbers = [10, 20, -5, 30];

numbers.some((num) => {
  if (num < 0) {
    console.log(`유효하지 않은 값 발견: ${num}`);
    return true; // 중단
  }
  console.log(`유효한 값: ${num}`);
  return false; // 계속 순회
});

**. 결과 

유효한 값: 10
유효한 값: 20
유효하지 않은 값 발견: -5