[REACT] map 함수 사용하는데 마주친 에러

부모 컴포넌트에서 props를 사용해 값을 자식 컴포넌트에 전달하는 내용이었다.

 

단순한 과정인데 자꾸 자식 컴포넌트에서 값을 출력하지 않고 에러가 났다. ㅠㅠ

 

const UserList = ({ users }) => {
  return (
    <div>
      {users.map((user) => {
        <User user={user} key={user.id} />;
      })}
    </div>
  );
};

export default UserList;

 

위 코드를 작성했을 때 에러를 마주했다.

 

WARNING in [eslint]
src\component\UserList.js
  Line 14:25:  Array.prototype.map() expects a return value from arrow function  array-callback-return     

webpack compiled with 1 warning

 

이런 에러가 나는데, map 함수에서 화살표 함수를 리턴하지 않았다는 내용이다.

 

알고보니, 화살표 함수 뒷 부분을 { } 대괄호로 해서 인식하지 못한 것이었다.

 

 

 

화살표 함수를 사용했을 경우, 

 

1. 중괄호 '{ }' 

함수 내부에 여러 문장이 필요하거나 값을 반환할 때 return문을 사용해서 값을 반환

const add = (a, b) => {
  const result = a + b;
  return result;
};

 

 

2. 소괄호 '()'

함수가 단일 표현식을 반환하는 경우

명시적인 return문이 필요 없다.

const add = (a, b) => a + b;

 

결론적으로, 소괄호로 변경했더니 값이 정상적으로 출력되었다.

앞으로도 단순한 에러도 정리해서 머리에 깊숙히 심어야겠다.