질문/조언질답게시판
Extra Form
PHP PHP 7.4
CMS Rhymix 2.x

React 프로젝트를 생성하고, 빌드 후 레이아웃으로 적용했습니다.

다만 리액트에서 XE 템플릿 문법을 사용할 수 없어 질문드립니다. (JSX)

 

XE 템플릿 문법은 라이믹스에서 직접 로드하는 경우에만 처리되고, 내부에서 로드 후 사용자 클라이언트로 보내는 것으로 알고 있습니다.

때문에 페이지가 로드된 후, js를 통해서 element들을 렌더링하는 React에서는 XE 템플릿 문법을 활용하고 싶을 때 어떻게 해야할 지 잘 모르겠습니다.

(include를 사용해 React js를 로드하면 loop="$####" 등이 작동하지 않는 문제가 있습니다.)

예상대로 React 컴포넌트를 만들 때 넣은 XE 템플릿 문법은 작동하지 않고 있습니다. ({getUrl('')}, {$logged_info} 등)

 

React에서 템플릿 문법을 활용하려면 어떻게 해야할까요?

 

⬇️ React 프로젝트의 컴포넌트 중 일부

8E528F88-CC84-4050-BCAA-80880C91722F.jpeg.jpg

 

 

87DDA079-B5DB-4B65-B3F3-C68EB840B86B.jpeg.jpg


⬇️ 실제 웹 출력

47A7DCEF-D22A-4431-B342-A8FA64E54741.jpeg.jpg

  • profile

    현재로서는 불가능합니다. 리액트 템플릿은 빌드 시점에 해석이 완료되고, 일단 빌드한 후에야 XE에서 불러올 수 있으며, 이전 질문에서도 지적되었듯이 XE에서 불러오는 시점에는 템플릿 문법을 해석할 수 없기 때문에 타임머신을 타고 과거와 미래를 자유자재로 오가지 않는 이상 앞뒤가 맞지 않습니다. 라이믹스에서 리액트 문법을 해석하는 어마어마한 패치가 이루어지지 않는 이상...

     

    href="{getUrl('')}" 이런 것은 그냥 href="/"로 하셔도 됩니다.

  • profile ?
    흠... 그렇다면 inline script에 템플릿 문법을 사용하면 그건 적용이 가능하니, 잘 하면 변수를 스크립트로 전달해줄 수 있겠네요. 감사합니다.
  • ? profile

    네, 리액트와는 별도로 변수를 전달해 보세요. 다른 질문에서 layout.html과 index.html(빌드파일)을 분리하고 layout.html에서 index.html을 인클루드하는 방식을 제안해 드렸는데요, 변수 전달 기능도 순수 XE 템플릿인 layout.html에 넣으시면 되겠습니다.

    단, 리액트 쪽에서 빌드할 때는 레이아웃에서 별도 생성한 변수를 참조하려고 하는 부분에서 "존재하지 않는 변수"라고 오류를 뿜을 수도 있으니 적당히 땜빵해 주셔야 합니다.

  • profile ?
    좋은 조언 감사합니다. 잘 해보겠습니다.
  • profile ?
    괜찮으시다면 한가지만 더 질문드려도 될까요? React 컴포넌트에 (함수형) memo가 적용되어 있는데도, 기존에 이미 존재하던 element를 재사용하지 않고 새로고침할 때마다 element들이 새로 로드됩니다. 라이믹스 없이 순수하게 빌드된 React 프로젝트의 경우에는 새로고침해도 잘 재사용을 하는데 말입니다. 이러면 React 쓰는 의미가 없는데... 혹시, 짐작가시는 부분이 있으신가요?
  • profile

    심플스트랩 레이아웃 같은 경우 스크립트 자체를 html 템플릿처럼 작성한뒤 include를 인라인 스크립트 태그 안에다 하는 방식을 사용합니다. 이걸 응용하시면 구현 가능할지도 모르겠네요.

    ex) config.html
    var varA = "{$li->var_a}";
    var varB = "{$li->var_b}";

    var url = "{getUrl('')}";

    layout.html
    <script>
    <load target="config.html">
    </script>

  • profile ?
    좋은 답변 감사합니다. 참고하겠습니다.