inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

8.3) 기능 구현 준비하기

화살표 함수 질문드립니다.

해결된 질문

595

blossom_mind

작성한 질문수 52

0

화살표 함수 질문드립니다.

const a = (a ) => {a *b }

보통 이렇게 가는데 어떤건

const a = (a ) => { ( a* b ) } 으로 괄호가 들어가더라구요

어떤 경우에 괄호가 들어가고 어떤 경우에는 빠지는지가 궁금합니다 .

 

react node.js nodejs javascript

답변 1

2

이정환 Winterlood

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

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

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}를 반환함

Editor Component의 최적화 불가능 이슈

0

39

2

useCallback ⊂ useMemo

0

38

2

라이브러리 설치 질문

0

34

2

linter 질문

0

41

2

감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유

0

42

2

Sort 메서드 관련 아티클

0

44

2

4.1) React.js를 소개합니다 강의를 듣고 궁금한 점이 생겼습니다.

0

46

2

html, body에 적용하는 css 스타일 질문입니다.

0

42

2

eslint.config.js 설정 질문입니다.

0

95

2

존재하지 않는 일기 url입력 시 alert이 두 번 떠요

0

70

1

교재(3쇄)와 강의 내용 문의

0

69

2

12.13) 하단 여백 스타일링 관련 질문 드립니다.

0

92

2

에러 질문드립니다

0

109

2

VSCode 설정 문의

0

143

2

PPT 코드 관련 질문

0

67

2

useEffect와 lifecycle문의

0

89

2

프론트엔드 학습 수준 문의

0

111

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

112

2

데이터 로딩중 화면만 계속 나와요!!

0

102

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

134

2

이후의 커리큘럼 문의

0

156

2

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

0

115

2

최적화 관련 질문있습니다 (useMemo 등)

0

134

3

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

1

129

3