filter return 문제

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.5) Read - 투두리스트 렌더링하기

해결된 질문

작성

todos.filter을 사용할 때 내부의 화살표함수에서 return 을 명시하지 않으면 값이 정상적으로 반환되지 않습니다. 강의에서는 return 을 별도로 작성하지 않았는데 값이 정상적으로 반환되는것 같네요 리액트 버전의 문제일까요..?

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 박선우님 이정환입니다.

AI 인턴의 답변대로 화살표 함수 뒤에 중괄호를 사용하실 경우 명시적으로 return 키워드를 적어주셔야 합니다. 이는 자바스크립트의 기능으로 리액트의 버전과는 무관합니다.

화살표 함수의 본문이 중괄호 없이 한 줄로 작성되면 반환값이 자동으로 반환됩니다.

   todos.filter(todo => todo.isCompleted);

중괄호를 사용하면 명시적으로 return 문을 써야 반환값이 설정됩니다.

   todos.filter(todo => {
       return todo.isCompleted;
   });

강의의 코드에서는 화살표 뒤에 중괄호를 사용하지 않았기에 return을 사용하지 않아도 값이 반환됩니다.

화살표 함수의 구체적인 사용법에 대해서는 우리 강의의 1.12 챕터 함수 표현식과 화살표 함수를 참고하시면 좋겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

박선우님, todos.filter를 사용할 때 화살표 함수 내부에서 return을 명시하지 않으면 예상대로 값이 반환되지 않는 문제가 발생하신 것 같습니다. 이 상황에 대해 말씀드리자면, 자바스크립트의 화살표 함수에 대한 문법에 따라 아래와 같은 규칙이 적용됩니다.

가로 형태로 한 줄에 작성할 경우: 화살표 함수의 본문이 중괄호 없이 한 줄로 작성되면 반환값이 자동으로 반환됩니다.

   todos.filter(todo => todo.isCompleted);

중괄호를 사용할 경우: 중괄호를 사용하면 명시적으로 return 문을 써야 반환값이 있습니다.

   todos.filter(todo => {
       return todo.isCompleted;
   });

강의에서는 위의 첫 번째 방식처럼 한 줄로 표현하여 return을 생략하는 형태를 사용한 것으로 보입니다. 따라서 리액트 버전의 문제는 아니며, 자바스크립트의 기본 문법 차이로 인한 현상입니다.

아래는 유사한 질문이 있었던 게시물입니다. 참고해보세요:

투두 필터링

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

filter return 문제