인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

똘똘이님의 프로필 이미지

작성한 질문수

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

콜백 함수에서 중괄호 사용 여부

해결된 질문

작성

·

47

0

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 todos.filter 메서드에 주목해 주세요.)

 

const getFilteredData = () => {
        if(search === "") {
            return todos;
        }
        return todos.filter((todo) => {
            todo.content.includes(search)
        });
    }

 

const getFilteredData = () => {
        if(search === "") {
            return todos;
        }
        return todos.filter((todo) => 
            todo.content.includes(search)
        );
    }

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다

화살표 함수는 기본적으로 화살표 우측에 있는 값을 바로 리턴합니다. 다음과 같은 화살표 함수는 a+b를 바로 리턴합니다.

const func = (a, b) => a+b 

그러나 화살표 우측에 중괄호를 사용하게 되면, 해당 함수 호출 시 여러줄의 명령을 사용하겠다는 뜻으로 간주하여 함수 선언식(function 키워드를 사용해 함수를 생성)으로 작성한 함수와 동일하게 return 키워드를 명시해야 반환값을 설정할 수 있습니다.

이런 문법적인 사항으로 인해 질문주신 첫번째 코드는 아무런 값도 리턴하지 않으므로 정상적으로 동작하지 않습니다.

PS. 본 내용은 우리 강의의 1.12) 함수 표현식과 화살표 함수 챕터의 4분 50초 경에 다루고 있으니 확인해보시는 걸 추천드립니다.

0

인프런 AI 인턴님의 프로필 이미지

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

똘똘이님께서 콜백 함수에서 중괄호 사용 여부에 대한 질문을 해주셨군요. React 및 JavaScript에서 콜백 함수의 사용 방법은 매우 중요합니다. 질문 주신 두 코드에서 기본적인 차이는 중괄호의 사용 여부입니다. 이를 간단히 설명드리겠습니다.

첫 번째 코드에서는 중괄호를 사용하여 콜백 함수의 내용을 명시하고 있습니다. 하지만 return문을 명시하지 않았기 때문에 todos.filter() 메서드의 콜백 함수는 아무 값도 반환하지 않습니다. 이 경우, filter 메서드는 반환값이 true 또는 false여야 하는데, 명시된 값이 없으므로 항상 undefined를 반환하게 됩니다. 이는 필터 함수가 false를 반환한 것으로 간주되어 필터링이 작동하지 않게 됩니다.

return todos.filter((todo) => {
    // 중괄호가 있으므로, 명시적으로 return을 해야 함
    return todo.content.includes(search);
});

두 번째 코드에서는 중괄호를 사용하지 않았고, 이로 인해 단일 식(expression)이 있을 때 자동으로 그 값을 반환합니다. 이것이 화살표 함수의 중요한 특징 중 하나입니다. 따라서 해당 Boolean 값을 직접 반환하여 filter 메서드가 예상대로 작동하게 됩니다.

return todos.filter((todo) =>
    todo.content.includes(search)
);

화살표 함수에서 중괄호를 생략하면 암시적으로 표현식을 반환하므로 return 문을 적을 필요가 없습니다. 이 구문을 이해하고 적절히 사용하는 것이 중요합니다.

관련된 이해를 돕기 위한 게시물들도 있습니다:

위 링크를 통해 유사한 질문과 답변을 확인하시면, 더욱 깊이 있는 이해에 도움이 될 것입니다.

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