React - ( <mark up> ) 표현

에로우 펀션 에서 

프로퍼티 JSON 형태로 사용할때는  ({ label : literal }) 를 사용하여아한다.

params => {object:literal}

이렇게 했을때 에러가 발생한다.

var func = () => {  foo: 1  };               // func() 호출은 undefined를 반환!
var func = () => {  foo: function() {}  };   // SyntaxError: function 문은 이름이 필요함

func = () => ({ foo: 1 });

foo는 레이블(라벨)로 인식하게 된다. 

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

하지만 여기서 궁금한 것은 

JSX의 마크업이다.

() => (<div> test </div>);

마크업을 리턴할때 이런식으로 써야 하는데 

에로우펀션 방식 중 ()로만 쓰는 방식은 없는데 이게 어떻게 가능한걸까 고민했다.

() => { <div> test </div> };

기존에 쓰는 방식을 생각하기에 이렇게 사용해야 맞는 것 같은데  

하나의 값만 반환할때 return을 생략해도 되는데 이 방식은 왜 에러가 나는걸까?  

() => { return <div> test </div> };

이렇게 써야지만 에러가 발생하지 않는다.

여기서 눈치를 챘을 수도 있겠는데 설명하자면

마크업의 데이터는 { : } 프로퍼티 방식과 같다.

즉 이것과 같다.

() => { return {'div':'test'} };

그러면  return을 생략하고 사용하자면 

() => ( {"div":"test"} );

이런 얘기가 되는 것이기 때문에  

(이해를 돕기 위한 예 일뿐 실제로 저 키와 값이 들어가지는 않는다. [ 바벨 ES5로 변환하는것 참고 ] )

() => ( <div>test</div> );

이렇게 써야 되는 것이다.

이미지 출처: https://developer.mozilla.org/ko/docs/Glossary/HTML#%EA%B0%9C%EB%85%90%EA%B3%BC_%EB%AC%B8%EB%B2%95