filter함수, map함수 등 중괄호를 썼을때의 문제점

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

8.7) Delete - 투두 삭제하기

해결된 질문

작성

이런식으로 함수 표시 방식인 ()=>{} 이렇게 사용을 하면 삭제 버튼을 눌렀을 때 모든 리스트가 사라집니다. 또한 앞에서 사용했던 map함수 같은 경우에도 강의와는 다르게 중괄호를 쓰면 문제가 생겼어서 소괄호로 바꿨더니 정상적으로 돌아갔었습니다. 현재 위 함수들에는 중괄호를 쓰면 안되는걸까요?? 참고로 map함수는 한 줄이 아니라 여러줄이었는데도 중괄호를 쓰면 에러, 소괄호를 써야 정상작동했었습니다. 정환님 책에는 별다른 말이 없고 강의에도 별다른 얘기가 없어서 미치겠습니다ㅜㅜㅜㅜㅜ

javascript react node.js 카카오공채-개발

답변 2

이정환 Winterlood

지식공유자

안녕하세요 gogomini님 이정환입니다.

해당 내용은 자바스크립트 화살표 함수 문법으로 우리 강의의 1.12) 함수 표현식과 화살표 함수의 4분 경에 이미 설명드리고 있습니다. 본 내용은 도서에도 동일하게 기재되어 있으니 자바스크립트 기초 문법 부분을 다시 복습하시는걸 권장드립니다.

화살표 함수는 => 옆에 값을 적어주면 해당 값을 바로 반환하는 특징을 가지고 있습니다. 예를 들면 다음과 같습니다.

const arrayFunction = (a, b) => a + b;
// a + b의 값을 바로 반환함

그런데 만약 이런 화살표함수에서 함수 내부에 여러줄의 코드를 사용하고 싶다면 다음과 같이 중괄호를 사용합니다. 이때 반환하려는 값이 있다면 일반 함수 선언과 같이 return을 이용해야 합니다.

const arrayFunction = (a, b) => {
  const resValue = a + b;
  return resValue;
}
// a + b의 값을 resValue에 저장해두었다가 반환함

그런데 만약 객체값을 바로 반환하려고 하는 경우 다음과 같이 중괄호만 사용하면 함수 본문으로 이해됩니다.

const arrayFunction = (a, b) => { a:a, b:b }
// ??? 문법 오류

이럴 때에는 소괄호로 중괄호를 묶어주면 이 중괄호 내부를 객체로 인지하여 객체 값을 바로 반환하는 화살표 함수를 만들 수 있습니다.

const arrayFunction = (a, b) => ({ a:a, b:b });
// {a:a, b:b}를 반환함

인프런 AI 인턴

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

JavaScript에서 화살표 함수의 {} (중괄호)와 () (소괄호)는 반환 방식에 큰 차이를 줍니다. 여기에 대한 요점을 간단히 설명드리겠습니다.

화살표 함수와 중괄호:
- 화살표 함수에서 중괄호를 사용하면 함수 본문을 명확히 나눌 수 있어 여러 줄의 코드를 포함할 수 있지만, 이 경우 명시적으로 return 키워드를 써야 값을 반환합니다. 그렇지 않으면 반환 값이 undefined가 됩니다.
- 예시:
```
const filteredTodos = todos.filter((todo) => {
// 여러 줄의 코드
return todo.id !== targetId;
});
```
화살표 함수와 소괄호 또는 표현식:
- 소괄호 없이 연산식을 사용할 때는 직접 반환이 가능합니다. 이러한 경우에는 return을 사용할 필요가 없습니다.
- 예시:
```
const filteredTodos = todos.filter((todo) => todo.id !== targetId);
```
문제가 발생한 이유:
- gogomini님께서 중괄호를 사용했는데 아무런 return 문을 명시하지 않으셨다면, 모든 결과가 이전 상태로 돌아가지 않고 undefined가 되어 엉뚱한 동작을 유발했을 것입니다.
- 또한, jsx 요소를 반환할 때는 { }로 감싸면 표현식을 외부로 감싸고 있어도 문제없이 사용할 수 있습니다.
- map, return 등 사용할때 문의 사항입니다에서 이에 대한 자세한 설명을 찾아보실 수 있습니다.

강의에서 언급되지 않았다고 해서 문제가 발생하시니 조금 난감하셨을 것 같습니다. 이러한 기초적인 개념들은 자주 사용되니 이해를 더욱 견고히 하시는 게 좋겠습니다.

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

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

filter함수, map함수 등 중괄호를 썼을때의 문제점