요즘 프론트엔드 하면 다들 리액트, 리액트 하는데요. 사실 리액트도 결국 수많은 기술 중 하나일 뿐입니다. 그럼 왜 굳이 리액트여야 할까요?? 제가 지금 참여하고 있는 프로젝트를 예시로 한번 정리해보겠습니다.
제가 회사에서 하고 있는 프로젝트는 앱 리뉴얼 프로젝트인데요
이 회사에서 앱이 없었냐??
> 아뇨 기존에 사용하고 있던 앱이 있고 나름 잘 사용하고 있습니다.
그럼 기능을 대폭 갈아엎냐??
> 아뇨. 대부분의 AS-IS 기능을 유지합니다. 상위 카테고리를 조금 바꾸고, 업무 단위를 잘게 나누는 개별화 정도입니다.
그럼 왜 리뉴얼을 하는거야?? 라는 질문에 다음과 같은 가장 큰 이유가 있었습니다.
> 현재 AS-IS는 jsp 방식인데, 이걸 TO-BE에서는 앱과 웹 모두 리액트와 스프링부트로 분리시키려는 것이 목표입니다.
왜 잘 돌아가고 있는 jsp 방식을 리액트로 바꿔야할까요?? 라는 의문이 듭니다.
리액트라는 언어의 가장 큰 목적은 다음과 같습니다.
데이터가 바뀌면, 화면은 알아서 따라 바뀐다.
참고로 리액트는 언어가 아니라 UI를 만들기 위한 자바스크립트 라이브러리입니다. 리액트가 해결해주는 문제는 크게 3가지로 볼 수 있겠습니다.
1. 선언적 UI
"버튼 찾아서 글자 바꿔줘!"가 아니라 "이런 상황일 때 여기엔 이런 데이터가 들어갈 거야"라고 적어두는 방식입니다. 화면을 어떻게 바꿀지는 리액트가 알아서 처리해줍니다.
// 선언형 (React): 상태만 바꾸면 화면은 따라온다
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<span>{count}</span>
{count > 10 && <p>경고!</p>}
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}count 값만 바꿔줬을 뿐인데, 숫자도 바뀌고 10이 넘으면 경고 문구도 알아서 나타납니다. 화면 어디를 고칠지 직접 찾아다닐 필요가 없는 거죠.
2. 컴포넌트
화면을 버튼, 카드, 목록 같은 독립된 조각으로 나누고, 이 조각들을 조립해서 페이지를 만듭니다. 한 번 쪼개둔 컴포넌트는 다른 화면에서도 그대로 가져다 쓸 수 있고요. 어떻게 보면 얼마나 효율적으로 잘 쪼개느냐가 업무 효율을 결정짓는 포인트이기도 합니다.
3. 단방향 데이터 흐름
데이터는 부모에서 자식으로만 흐릅니다. 그래서 "이 값이 왜 바뀌었지?"를 추적하기 쉽습니다.
그럼 기존의 jsp 방식이 나빠서 바꿔야하는 걸까요??
정확히 말하면 서비스가 커지고 채널이 늘어나면서 구조가 버거워진 것이 이유라고 볼 수 있겠습니다.
- 화면과 서버가 한 몸입니다. JSP는 서버가 데이터를 조회하고 HTML까지 만들어서 내려주는 방식입니다. 그래서 버튼 하나를 고쳐도 서버를 다시 빌드하고 배포해야 하는 경우가 생깁니다.
- 화면 전환마다 페이지 전체를 다시 받습니다. 그래서 앱처럼 부드러운 사용 경험을 만들기가 어렵습니다. 이걸 보완하려고 Ajax와 jQuery를 하나둘 덧붙이다 보면...
- jQuery DOM 조작이 쌓여서 스파게티가 됩니다. "이 값이 바뀌면 저기 숨기고, 이 목록 다시 그리고..." 같은 코드가 화면마다 흩어지고, 나중엔 어떤 코드가 어떤 화면을 건드리는지 추적하기 힘들어집니다.
- 사실상 웹 전용입니다. 앱에서 같은 기능을 쓰려면 웹뷰로 감싸거나, 앱을 위한 API를 따로 만들어야 합니다. 결국 같은 기능을 두 번 관리하게 되는 거죠.
그러면 리액트 + 스트링부트로 분리하면 뭘 얻게 될까요??
- 컴포넌트 재사용으로 개발 속도가 붙습니다. 이번 리뉴얼처럼 업무 단위를 잘게 나누는 작업에 특히 잘 맞습니다. 검색창, 목록 카드, 버튼을 한 번 만들어두면 업무 화면마다 조립만 하면 되니까요.
- 백엔드는 API만 책임집니다. 스프링부트는 데이터를 JSON으로 주고받는 역할만 하고, 화면은 리액트가 맡습니다. API 명세만 맞춰두면 프론트와 백엔드가 동시에 작업할 수도 있습니다.
- 웹과 앱을 함께 가져갈 수 있습니다. 웹이든 앱이든 같은 API를 쓰면 되니, 같은 기능을 두 번 관리할 일이 줄어듭니다. 리액트를 익혀두면 React Native로 앱까지 만들 수 있다는 것도 장점이고요.
- 사용자 경험이 앱처럼 부드러워집니다. 필요한 데이터만 받아서 바뀐 부분만 다시 그리니, 화면 깜빡임 없이 빠르게 반응합니다.
이렇게 4가지로 정리할 수 있겠습니다!