티스토리 뷰
map함수 내에서 중괄호를 사용하면 그 안의 코드는 블록스코프를 가지는 코드블록으로 간주됩니다.
즉, 함수의 본문으로 해석되기 떄문에 명시적으로 return을 사용해야 합니다.
{someArray.map((ele:{ a:string; b:string; c:string; })) => {
return(
<React.Fragment key={ele.a}>
<p>{ele.b}</p>
<p>{ele.c}</p>
</React.Fragment>
)
}};
map함수 내에서 JSX를 반환할 때 소괄호를 사용하면 암시적 반환을 하여 표현식을 바로 반환합니다.
{someArray.map((ele:{ a:string; b:string; c:string; })) => (
<React.Fragment key={ele.a}>
<p>{ele.b}</p>
<p>{ele.c}</p>
</React.Fragment>
))
};
암시적 반환 <=> 명시적 반환이란?
명시적반환과, 임시적 반환은 자바스크립트 화살표 함수의 반환 방식에 관한 것이며 모든 자바스크립트 코드에서 적용됩니다.
자바스크립 화살표 함수의 반환방식
명시적 반환 (explicit return)
중괄호를 사용하여 함수 본문을 작성하고, 반환값 앞에 return 키워드를 명시적으로 작성하는 방식
// 중괄호를 사용했기 때문에 return을 명시적으로 작성해줘야 한다.
const example = () => {
return a + b + c;
}
임시적 반환 (implicit return)
중괄호를 사용하지 않고, 함수 본문의 표현식을 자동으로 반환하는 방식
단일 표현식일 경우, 소괄호도 작성하지 않아도 된다.
// 중괄호를 사용하지 않는다. 단일표현식을 ()소괄호 없이 바로 반환한다.
const implictExample = () => a + b + c;
// 여러줄 일 경우(한줄로 작성하지 않을 경우), 소괄호를 사용하여 반환한다.
const implictExample2 = () => (
a + b + c;
)
여러 줄일 경우(=한줄로 작하지 않을 경우)
소괄호를 사용하여 표현식을 반환한다.
'개발공부 > React' 카테고리의 다른 글
#React_Key오류_Warning: Each child in a list should have a unique "key" prop. (0) | 2024.07.25 |
---|---|
#React 이미지 경로 문제 (0) | 2024.05.17 |
React_정렬, 검색 기능 만들기 (0) | 2023.09.10 |
React_사이드바 만들기 (0) | 2023.09.07 |
React_삼항연산자, 배열의 객체의 속성에 접근하기 (0) | 2023.09.07 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- promise
- 리액트 이미지경로
- 프로토타입 체이닝
- JSX
- 동등비교연산자
- null과 undefined
- cors위치
- 대괄호표기법
- Props
- .catch()
- react
- universal rendering
- 배열내특정요소찾기
- .finally()
- 문자열
- 함수
- 전역변수
- 태스크큐
- 객체리터럴
- unexpected character
- unique "key" prop.
- 객체속성 추가 삭제
- 조대곤교수님
- 함수형코딩
- 비동기
- 상속
- 머리아프다..
- 에이블스쿨2일차
- .then()
- 미들웨어위치
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함