📝 [250404/오답노트] - React filter와 map 제대로 쓰기

JavaScript가 끝나고 이제는 React를 배우게되었다... 
JavaScript도 아직 잘 모르는데 React라니...!!!

filter()와 map()을 사용해서 배열에서 조건에 맞는 데이터를 화면에 렌더링하는 과제를 풀었다.

근데 몇 가지 실수를 해서 원하는 출력이 되지 않았다...

👩‍💻 내가 쓴 코드

import './App.css';
//문제: users 배열 중 거주지가 서울인 사람의 이름과 나이를 화면에 렌더링해주세요.
const users = [
  { id: 1, 이름: '홍길동', 나이: 25, 거주지: '서울' },
  { id: 2, 이름: '김철수', 나이: 30, 거주지: '부산' },
  { id: 3, 이름: '박영희', 나이: 22, 거주지: '서울' },
  { id: 4, 이름: '이민호', 나이: 27, 거주지: '대구' },
  { id: 5, 이름: '최수정', 나이: 29, 거주지: '부산' },
  { id: 6, 이름: '강호동', 나이: 35, 거주지: '대구' },
  { id: 7, 이름: '이수진', 나이: 32, 거주지: '인천' },
  { id: 8, 이름: '장동건', 나이: 28, 거주지: '서울' },
  { id: 9, 이름: '유재석', 나이: 40, 거주지: '부산' },
  { id: 10, 이름: '김범수', 나이: 37, 거주지: '인천' },
];
function App() {
  // 요구사항1.  filter() 매서드를 사용하여 users의 배열 중, 거주지가 '서울' 인 사람들만 seoulUsers 배열에 담아주세요.
  const seoulUsers = users.filter((user) => users.거주지 === '서울');

  // 요구사항2. map() 매서드를 사용해서 seoulUsers 배열에 있는 요소들을 화면에 표시해주세요.
  // 단, 이름: 나이: 이렇게 구분하여 표시되어야합니다.
  return (
    <>
      {seoulUsers.map()}
      <div key={seoulUsers}>
        이름: {users.이름}, 나이: {users.나이}
      </div>
    </>
  );
}

export default App;

❌ 실수 1. filter에서 user.거주지 대신 users.거주지라고 썼음

const seoulUsers = users.filter((user) => users.거주지 === '서울');

처음에 위처럼 작성했는데, 아무리 봐도 문제가 없다고 생각했다.
하지만 출력 결과가 빈 배열이었고, 화면에도 아무것도 나오지 않았다.

알고 보니 users는 전체 배열이고, 거기엔 .거주지라는 속성이 있을 수가 없었다.
filter() 안에서는 배열의 각 요소를 의미하는 user를 받아와야 하니까, 이렇게 고쳐야 했다.

const seoulUsers = users.filter((user) => user.거주지 === '서울');

 

❌ 실수 2. map() 안에 아무것도 안 넣고, 엉뚱한 값을 출력하려고 했음

{seoulUsers.map()}
<div key={seoulUsers}>
  이름: {users.이름}, 나이: {users.나이}
</div>

map()을 사용할 때 어떤 요소를 렌더링할지 안 써놨고, users.이름처럼 배열 전체에서 값을 꺼내려고 했다.
이것도 말이 안 되는 코드였다.

map()은 배열의 각 요소를 하나씩 받아와서 어떤 JSX를 그릴지 정해야 한다.
또, users가 아니라 반복 중인 각 user 객체에서 값을 꺼내야 했다.
그리고 key 값도 배열 전체가 아니라 user.id를 써야 React가 경고를 안 띄운다.

✅ 수정 후 올바른 코드

{seoulUsers.map((user) => (
  <div key={user.id}>
    이름: {user.이름}, 나이: {user.나이}
  </div>
))}

이렇게 고치고 나니 서울에 거주하는 사람들의 이름과 나이가 잘 출력되었다.
React에서 .map()과 .filter()는 정말 자주 쓰이는데, 변수 하나하나 잘못 쓰면 원하는 대로 작동하지 않는다.
조금만 방심해도 이런 실수가 생길 수 있단 걸 다시 느꼈다.

📌 이번 오답을 통해 배운 점

• .filter() 안에서는 배열의 각 요소를 의미하는 변수를 써야 한다. (예: user.거주지)
• .map()을 쓸 땐 반복 중인 요소를 받아 JSX를 리턴해야 한다.
• key는 각 요소를 고유하게 식별할 수 있는 값으로 꼭 설정한다.
• 객체 접근 시 .이름처럼 잘못된 대상(users vs user)을 참조하면 오류가 난다.