요 녀석은 정확하게 말해서 에러가 아니라 경고문에 해당하지만.. 어디가 잘못되어서 출력되는 것이기도 하니 에러 해결 시리즈에 작성하였다.

1. 화살표 함수의 작성법.

경고의 원인은 map 함수 내부에 작성한 화살표 함수을 잘못 작성한 것이다.

우선 화살표 함수의 작성 방법은 다음과 같다.

const function = (arg) => expression;
const function = (arg) => (expression);
const function = arg => (expression);

화살표 함수에서 인자 또는 표현식이 1줄 이하일 경우에는 ()를 생략하여 작성할 수 있다. return 키워드 또한 생략이 가능하다. 이 경우에는 {}의 생략 또한 가능하다.

let function = (arg) => {
  	return expression;
};

반면 return 키워드를 사용할 경우 반드시 {}를 사용해주어야 한다.

2. map 함수와 화살표 함수.

위에서 언급한 작성방법을 지키지 않았을 때, 위 경고문이 출력된다.

{arr.map((item) => (
	<>
		<p>1번 옵션 입력</p>
		<input type='text' placeholder='1번 옵션 입력' />
    </>
))}

{arr.map((item) => (
	<>
   		return <>
        	<p>1번 옵션 입력</p>
            <input type='text' placeholder='1번 옵션 입력' />
        </>
    </>
))}

return 키워드와 {}는 같이 사용된다는 사실을 기억하면 이 경고문을 볼 일은 없다.

3. 그런데..

그런데 이런 차이점이 존재하는 이유는 무엇일까?

return 키워드와 {}를 같이 사용하는 경우, return 키워드 뒤쪽에 변수를 선언하거나 조건을 처리하는 등의 코드를 작성할 수 있다. 반면 그렇지 않은 경우 반환값만을 처리할 수 있다.

리액트에서 map 함수를 이용하여 배열 렌더링 작업을 진행하고자 할 경우에는 map 함수의 반환값이 곧 렌더링 되는 요소들에 해당한다.