화살표 함수에서 반환할 JSX 요소가 있다면, return 문과 같은 줄에 배치

  const tabs = ( // 출력x

      <ul className="tabs">

        {Object.values(TabType).map((tabType) => {

          return

            <li key={tabType}>

              {TabLabel[tabType]}

            </li>

        })}

      </ul>

    );

왜 윗처럼 쓰면 출력이 안되고 아래처럼 적어야 되는걸까?

 

 const tabs = ( // 출력 o

      <ul className="tabs">

        {Object.values(TabType).map((tabType) => {

          return <li key={tabType}>{TabLabel[tabType]}</li>

        })}

      </ul>

    );

 

---

이 코드에서 문제는 return 문 다음에 오는 <li> 태그가 같은 줄에 있지 않다는 것입니다. JavaScript는 세미콜론을 자동으로 삽입하는 'Automatic Semicolon Insertion' 규칙을 따릅니다. 이 규칙에 따라, JavaScript 엔진은 return 문 다음에 새로운 줄이 시작되면 해당 줄 끝에 세미콜론을 자동으로 삽입합니다. 따라서 첫 번째 코드는 다음과 같이 해석됩니다:

   {Object.values(TabType).map((tabType) => {

  return; // 여기서 함수가 끝나고 아무것도 반환하지 않습니다.

  <li key={tabType}>

    {TabLabel[tabType]}

  </li>

})}

 

즉, <li> 요소가 반환되기 전에 함수가 종료되어 아무것도 반환되지 않는 것이다.