React.js는 컴포넌트 및 요소 트리를 구성하기 위해 XHTML과 유사한 구문으로 JSX를 제공합니다. JSX는 Javascript로 컴파일되며 JSX에서 루프 또는 조건을 제공하는 대신 Javascript를 직접 사용합니다.
<ul>
{list.map((item) =>
<li>{item}</li>
)}
</ul>내가 아직 설명 할 수 없었던 것은 JSP에서 유사한 구조가 나쁜 것으로 간주되면 왜 이것이 좋은 것으로 간주됩니까?
JSP에서 이와 같은 것
<ul>
<% for (item in list) { %>
<li>${item}</li>
<% } %>
</ul>와 같은 태그로 해결해야하는 가독성 문제로 간주됩니다 <c:forEach>. JSTL 태그의 이유는 JSX에 적용될 수있는 것처럼 보입니다.
- XHTML과 유사한 구문 (앵글 괄호, 중첩)과 Java / Javascript (곱슬, 쉼표, 괄호)를 토글하지 않을 때 읽기가 조금 더 쉽습니다.
- 렌더링 기능 내에서 사용할 수있는 전체 언어와 플랫폼이 있으면 그에 속하지 않는 논리를 사용하지 않는 것이 좋습니다.
JSX가 다른 이유를 생각할 수있는 유일한 이유는 다음과 같습니다.
Java에서는 잘못된 일을 할 동기가 있습니다. JSP는 핫 리로드되므로 재 빌드 / 재시작주기를 피하기 위해 JSP에 코드를 넣는 것이 좋습니다. 즉각적인 생산성을 위해 유지 보수성이 희생되었습니다. 스크립틀릿을 제거하고 고정 된 템플릿 구성 세트로 제한하는 것은 사실상 유지 관리 성을 강화하는 방법이었습니다. JS 세계에는 그러한 왜곡이 없습니다.
JSP 및 Java 구문은
<% ... %>Java 코드를 요소 생성과 구별하기 위한 추가foreach기능과 개념이나 일류 함수 가없는 Java의 기본 구문 (최근까지) 으로 인해 복잡 합니다 . JSX에서 루프와 조건부에 기본 Javascript를 사용하는 구문 페널티는 제로가 아니지만 (제 생각에는) JSP만큼 나쁘지 않으며 루프와 조건부에 대해 JSX 특정 요소를 도입 할만큼 충분히 나쁘지는 않습니다.
내가 놓친 다른 것이 있습니까?