wikibook/react-deep-dive-example

[문의]p.120,124문의 드립니다.

SeokhyunHong1510 opened this issue · 3 comments

SeokhyunHong1510 commented

p.120에는 JSXMemberExpresstion이 JSXNamespacedName과 이어서 사용하는것이 불가능하다고 되어있는데.

// 불가능하다
function invalid() {
 return <foo:bar.baz></foo:bar.baz>
}

p.124에는 JSX문법 자체로는 유효하다는게 어떤뜻인가요??

function ComponentC() {
 return <A:B.C></A:B.C>
}
yceffort commented

@SeokhyunHong1510 님 안녕하세요!
답변이 늦어서 죄송합니다.

문법 자체로 유효하다는 뜻은 jsx 명세에서는 허용하지만 리액트에서는 불가능하다 라는 뜻입니다.
https://facebook.github.io/jsx/#prod-JSXNamespacedName

위 jsx 공식 문서를 보시면 아시겠지만 JSXNamespacedName 라하여 JSXIdentifier:JSXIdentifier를 허용하고 있습니다.

다만 리액트에서는 딱히 필요가 없어서 채용하지 않았던 히스토리가 있습니다. facebook/jsx#13 (comment) (내부적으로는 사용했던 것으로 보입니다.)

감사합니다!

  • 👍1
Self-knowledge commented

@yceffort 님 안녕하세요. 저도 해당 페이지에서 의아한 부분이 있습니다.

답변주신 내용은 모두 동의합니다.

다만, 119p에는 JSXMemberExpression과 JSXNamespacedName을 이어서 사용하는 것은 불가능하다고 적어주셨고,
jsx 공식 문서에도 JSXMemberExpression과 JSXNamespacedName의 결합 사용에 대해서 명시적으로 언급된 부분은 확인하지 못했습니다.

따라서 123p에서
'이 외에도 리액트 내에서는 유효하지 않거나 사용되는 경우가 거의 없는 문법도 JSX 문법 자체로는 유효하다.'
의 예시(124p)에 대해

function ComponentC() {
  return <A:B.C></A:B.C>
}

JSXNamespacedName와 JSXMemberExpression의 결합으로 사용된 부분(<A:B.C></A:B.C)은
'리액트 내에서는 유효하지 않거나 사용되는 경우’와는 별개로 JSX 문법에서도 유효하지 않은 것으로 생각됩니다.

이에 대해 다시 한번 확인 부탁드립니다!