PHP + HTML에서 React + Express로 갈아탄 이유와 과정
PHP와 HTML로 만든 서비스가 커지면서 상태 관리, 컴포넌트 재사용, 비동기 UI에서 한계를 느꼈다. React와 Express로 옮기기로 한 이유와 Express를 고른 현실적인 사정을 적었다.
#PHP #HTML #React #Express
초반에 웹 프로젝트를 만들 때는 PHP랑 HTML로 전체를 구성했었다. 서버에서 데이터를 넘기고, 그걸 HTML로 바로 그려주는 방식이다. 관리자 페이지도, 사용자 화면도 그냥 .php 파일에 include로 묶고, 필요하면 jQuery로 동작을 붙여서 처리하면 그만이었다. 그렇게 하나씩 기능을 붙이다 보니 서비스는 점점 커지고 페이지도 많아졌다. 그리고 어느 순간부터 점점 불편해지기 시작했다. 이 글에서는 뭐가 불편했고, 왜 React와 Express를 골랐는지 적어본다. 기존 PHP + HTML 구조의 한계 처음엔 빠르고 편했지만, 프로젝트가 커지면서 이런 한계가 보이기 시작했다. 1. 상태 관리가 안 된다 페이지를 이동할 때마다 새로고침이 일어나니까, 사용자 상태나 화면에서 선택한 값 같은 걸 유지하려면 매번 session이나 localStorage를 건드려야 했다. 필터 하나 걸어놓고 다음 페이지로 넘어가면 그 필터가 날아가는 식이라, 이걸 유지하는 코드가 페이지마다 따로 붙었다. 2. 컴포넌트 재사용이 안 된다 버튼이나 카드 같은 UI를 다시 쓰려면 복사해서 붙이거나 include로 처리했는데, 이게 쌓이다 보니 관리가 너무 힘들어졌다. 카드 모양을 하나 바꾸면 그 카드를 include한 파일을 전부 열어서 확인해야 했다. 3. 비동기 UI 구현이 점점 고통스러워졌다 처음엔 jQuery로 간단한 Ajax 처리나 modal 띄우는 정도만 했는데, 기능이 늘어나니까 UI 상태가 꼬이고 디버깅도 어려워졌다. 예를 들어 무한스크롤, 조건 필터링, 정렬 같은 기능은 스크립트끼리 충돌하거나 같은 DOM을 여러 군데서 조작하면서 금방 지저분해졌다. 어떤 스크립트가 어떤 요소를 바꾸는지 따라가기가 점점 어려워졌다. 4. 백엔드와 프론트의 경계가 없다 PHP는 템플릿과 로직이 한 파일에 섞여 있어서, 디자인만 바꾸려고 해도 PHP 코드를 봐야 했다. 역할이 섞이니까 유지보수도 어렵고, 같이 일하는 사람이 있어도 나눠서 작업하기가 애매했다. React + Express로 전환하게 된 계기 그래서 이 구조로는 더 이상 유지보수가 어렵겠다고 판단했고, React와 Express 기반으로 전체 구조를 옮기기로 했다. 방향은 두 가지였다. React로 프론트 전체를 컴포넌트 기반으로 다시 짠다 Express로 API 서버를 따로 떼어내서 RESTful하게 관리한다 그렇게 하면 프론트와 백엔드가 깔끔하게 나뉘고, 역할이 분명해져서 나중에 기능을 붙이기도 쉬워진다. React를 고른 이유 1. 컴포넌트 기반 구조가 유지보수에 좋다 버튼, 모달, 리스트 같은 걸 다 분리해서 다시 쓸 수 있고, 하나를 수정해도 다른 데에 영향 없이 관리할 수 있다. PHP에서 include로 흉내 내던 걸 제대로 할 수 있게 된 거다. 2. 상태 관리가 편하다 useState, useEffect, useQuery, zustand 같은 걸로 화면 상태, 서버 상태, 사용자 상태를 나눠서 다룰 수 있다. 페이지를 넘어가도 상태가 살아 있으니 예전처럼 session에 임시로 넣어두는 코드가 필요 없어졌다. 3. 전체 새로고침 없이 부드럽게 동작한다 CSR 방식이라 페이지를 이동할 때도 깜빡임 없이 넘어가고, 사용자 경험 자체가 훨씬 좋아졌다. 이건 만들고 나서 제일 먼저 체감한 부분이다. 그럼 백엔드는 왜 Express인가 솔직히 말하면 기술적인 이유보다 현실적인 이유가 더 컸다. 빠르게 만들 수 있다 Express는 몇 줄만으로 API를 만들 수 있다. app.get('/api/users', (req, res) = { res.json([{ id: 1, name: '홍길동' }]); }); 회사 규모도 작고 빠르게 MVP를 돌려야 하는 상황이었기 때문에, 빠르게 만들고 빠르게 배포할 수 있는 구조가 필요했다. 자바스크립트 하나로 끝난다 프론트가 React라 이미 자바스크립트를 쓰고 있는데, 서버도 같은 언어로 짤 수 있다는 게 컸다. 언어를 왔다 갔다 하지 않아도 되니 이해도 빠르고 구현도 빨랐다. 확장도 생각보다 어렵지 않다 npm만 있으면 cors, jwt, multer 같은 기능을 쉽게 붙일 수 있고, 라우팅이나 미들웨어 구조도 자유도가 높아서 실제 운영에서도 무리 없이 쓸 수 있었다. 나중에 파일 업로드나 로그인이 필요해졌을 때도 패키지 하나 붙이는 걸로 끝났다. 이 글을 쓸 때는 아직 안 끝났었다 지금 다시 보니 이 글을 쓴 시점에는 전환이 절반쯤 진행된 상태였다. 화면 몇 개만 React로 옮겨놓고 나머지는 여전히 PHP였다. 전부 옮기는 데는 그 뒤로도 반년이 더 걸렸고, 그 과정은 한 번에 갈아엎는 것과는 완전히 다른 문제였다. 기존 PHP 화면과 새 React 화면이 같은 세션을 공유하게 만드는 것이 제일 성가셨다. 로그인은 PHP가 처리하는데 화면은 React가 그리는 상태가 몇 달 이어졌다. 그 얘기는 다음 글에 이어서 썼다.