r r/qna· 이온디 · 2025.12.06
후기

props 라고 들어봤어?

135
원래는 el_d1 (alpine.js) 버전인데, 생각보다 퍼포먼스가 좋진 않은거 같길래, 완전 리액트버전으로 해봤었어. 그런데 이껏도 쉽지 않더라구. 왜냐하면 레이아웃 파일 한개로 게시판 글쓰기,글보기,수정,삭제,다른게시판보기,로그인,내정보 편집 등 다 할 수 있게 하려면 라우팅 이라고 알지? 주소별로 표시되는 게 달라야하는데, 그게 php 라이믹스 라우팅 구조랑 또 리액트 앱에서 표시하는게 다르다보니깐 이걸 어떤 구조로 서로 잘 겹합해서 보여줘야하는가가 관건이었거든. 내가 처음 생각했던건, if else 구조로 각 act,board별로 다른 리액트 앱을 마운트한다는거였는데, 조금 하다보니깐 완전 내가 잘못 알고있더였나 싶더라구. 잘 동작을 안하는거야. 블레이드 문법에 따라 1개의 리액트가 아니라 여러개의 리액트가 폴백구조로 각 div id에 들어가야하는데 생가보다 잘 안됬었어. 그래서 좀 더 알아보니 props 라고 url에 따라 다른 섹션을 보여준느 기능이 있다고 하더라구.
#라이믹스・XE
0
댓글 6

댓글 6

댓글을 작성하려면 로그인하세요.
  • 이
    이온디 2025.12.06 01:04

    문제의 핵심 Rhymix 라우팅 (서버) React 라우팅 (클라이언트) ───────────────────── ────────────────────────── ?act=dispBoardWrite /write ?act=dispBoardView /view/:id ?act=dispMemberInfo /mypage ?mid=free&document_srl=123 /boards/free/123 서로 다른 두 세계를 하나로 합쳐야 하는 상황이죠. 처음 시도했던 방식 (멀티 마운트) @if($act == 'dispBoardWrite') @elseif($act == 'dispBoardView') @else @endif 이 방식은 React의 장점(상태 유지, SPA 경험)을 포기하는 거라 비효율적이에요. 더 나은 방식 (단일 앱 + React Router) 맞아요, React Router를 쓰면 하나의 React 앱에서 URL에 따라 다른 컴포넌트를 보여줄 수 있어요: // App.jsx } /> } /> } /> } /> 하지만 문제는... Rhymix는 ?act=dispBoardWrite&mid=free 형태의 쿼리스트링 URL을 쓰고, React Router는 /board/free/write 같은 경로 기반 URL을 선호하거든요.

  • 이
    이온디 2025.12.06 01:05

    라이믹스도 free/write 구조로 지원해.. 그걸 php에서 인식해서 리액트 라우터로 딱 원하는 화면ㅇ르 보여주는게 문제였지.

  • 이
    이온디 2025.12.06 01:08

    현재 구현된 라우팅 구조 1단계: PHP (layout.html)가 URL 분석 $current_mid = 'guide'; $current_act = 'dispBoardWrite'; // 또는 dispBoardList $document_srl = 12345; // 상세/수정 시 $is_write = true; // /write 경로 2단계: 조건부 마운트 포인트 생성 @if($current_mid === 'guide') @if($is_write || $is_edit) @elseif($document_srl) @else @endif @endif 3단계: React가 마운트 포인트 감지 // main.tsx if (document.getElementById('app-guide-list')) { createRoot(el).render(); } if (document.getElementById('app-guide-write')) { createRoot(el).render(); } if (document.getElementById('app-guide-view')) { createRoot(el).render(); } --- 두 가지 접근법 비교 | | 멀티 마운트 (현재) | SPA + React Router | |--------|-------------------|--------------------| | 라우팅 주체 | PHP (Rhymix) | React Router | | 페이지 전환 | 새로고침 (서버 렌더링) | 클라이언트 전환 | | SEO | 좋음 (PHP가 HTML 생성) | 추가 작업 필요 | | 복잡도 | 낮음 | 높음 (라우터 설정) | | 상태 유지 | 페이지간 초기화 | 유지 가능 | 현재 방식이 Rhymix와 가장 자연스럽게 통합되는 방식이에요. React Router로 전환하면 /guide/write ↔ /guide 이동 시 새로고침 없이 부드럽지만, Rhymix 권한 체크나 URL 구조와 싱크 맞추기가 까다로워지거든요. 지금 구조에서 잘 안 됐던 부분이 구체적으로 뭐였어요? main.tsx에서 마운트 로직을 확인해볼까요?

  • 이
    이온디 2025.12.06 01:11

    즉, Rhymix는 /guide/write URL을 인식하고 있어요. 권한이 없어서 403이 뜬 거지, URL 라우팅 자체는 동작함. 현재 layout.html의 문제점 // 현재 방식 - act 파라미터에 의존 $is_write = ($current_act === 'dispBoardWrite'); // /edit은 URL path로 직접 체크 $is_edit = (strpos($request_uri, '/edit') !== false && $document_srl); /guide/write로 접근할 때 Rhymix가 act=dispBoardWrite로 변환해주면 동작하지만, URL path 직접 체크가 더 확실해요: // 개선된 방식 - URL path도 함께 체크 $is_write = ($current_act === 'dispBoardWrite') || (strpos($request_uri, '/write') !== false); 흐름 확인 사용자: /guide/write 접속 ↓ Rhymix: mid=guide, act=dispBoardWrite 변환 ↓ layout.html: $is_write = true ↓ 출력: ↓ main.tsx: GuideWritePage 마운트

  • 이
    이온디 2025.12.06 01:11

    내가 잘하고 있는거 맞아? ⏺ 솔직하게 말하면, 네, 꽤 잘하고 있어요. 현재 접근 방식의 장점 | 항목 | 평가 | |-----------|----------------------------| | Rhymix 통합 | PHP가 라우팅/권한 담당 → 기존 시스템 활용 | | SEO | 서버에서 마운트 포인트 생성 → 검색엔진 친화적 | | 점진적 전환 | 한 번에 다 바꿀 필요 없이 페이지별 전환 가능 | | 복잡도 관리 | React Router 설정 없이 단순한 구조 | 이 방식이 적합한 이유 완전 SPA (React Router) ├── /guide → React가 라우팅 ├── /guide/write → React가 라우팅 ├── /guide/123 → React가 라우팅 └── 문제: Rhymix 권한, 세션, mid 개념과 충돌 현재 방식 (PHP + React 멀티마운트) ├── /guide → Rhymix가 라우팅 → ├── /guide/write → Rhymix가 라우팅 → ├── /guide/123 → Rhymix가 라우팅 → └── 장점: Rhymix의 권한/라우팅 그대로 활용 솔직한 단점 - 페이지 전환 시 새로고침 (SPA 느낌 아님) - 번들 크기 관리 필요 (code splitting은 잘 해둠) 결론 Rhymix 같은 기존 PHP 시스템에 React를 얹는 현실적인 방법이에요. 무리하게 완전 SPA로 가려다가 오히려 더 복잡해지는 경우가 많거든요. 다만, 지금 막혀있거나 고민되는 구체적인 부분이 있어요?

  • 이
    이온디 2025.12.06 01:12

    고마워, 내가 좀 시간이 없고 체력이 방전되서 예민했나봐.

목록으로