반응형
부모 컴포넌트에서 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;
결론적으로, 소괄호로 변경했더니 값이 정상적으로 출력되었다.
앞으로도 단순한 에러도 정리해서 머리에 깊숙히 심어야겠다.
반응형
'FRONT > REACT.js' 카테고리의 다른 글
[REACT] React + TypeScript 사용해서 Todo 만들기 (1) | 2024.01.13 |
---|---|
[REACT] 새 프로젝트 생성하기 (0) | 2024.01.02 |