JUST ***KING USE REACT
TMT(아니면 아무 현대 프레임워크나 쓰든가, 고집불통 러다이트 XX야 ─ 러다이트(Luddite): 19세기 초 산업혁명 시기에 기계 도입을 거부하고 부숴버린 영국 직공들. 오늘날엔 “신기술 무조건 거부하는 꼰대”를 비꼬는 말로 쓰인다)
솔직히 이해는 해. 너도 그 사이트 봤겠지. “HTML이 짱이다”, “그냥 심플하게 가자”, “내 98년산 지오시티(GeoCities ─ 1990년대 야후가 운영하던 무료 개인 홈페이지 호스팅 서비스. 화려한 GIF·미디 음악·반짝이 텍스트로 도배된 ‘올드 웹’의 상징) 페이지가 너네 SPA보다 아직도 더 빨라.” 귀엽기 짝이 없네. 마치 애기가 흙으로 만든 쿠키 자랑하는 수준이야.
그 마음 자체는 나름 귀엽기라도 하지. 근데 현실은 더 이상 바닷가에서 조개껍데기로 물물교환하던 시절이 아니고, 미친 듯이 복잡한 주식 시장을 상대해야 하는 세상이잖아. 웹도 이제 그냥 X같은 전단지 모음집이 아니라고, 화석 같은 XX야. 이제 웹은 실제로 일이 굴러가는 공간이고, 커뮤니티가 만들어지는 곳이며, 복잡한 인터랙션이 벌어지는 무대야. 그냥 “X나 예쁜 버튼 하나” 띄워놓는 수준이 아니라, 진짜로 뭔가가 돌아가는 공간이라고.
그래서, 이게 도대체 뭔 개소리냐고?
이건, 어떤 경우엔 복잡성이 “선택 사항”이 아니라 존재 자체가 요구사항이라는 걸 인정하자는 얘기다. 그런 복잡성이 몰려오는 순간 document.getElementById 하나에 매달려서 기도로 버텨보겠다는 건, 나무젓가락이랑 딱풀만 들고 우주왕복선을 만들겠다는 소리랑 똑같다. 겉모습만 얼추 셔틀 비슷하게 흉내는 낼 수 있겠지. 근데 그건 출발도 못 하고 발사대에서 폭발해버릴, 덜컥거리고 유지보수도 안 되는 공포의 쓰레기 더미일 뿐이야.
이건 똑똑한 놈들이 이미 수없이 고민해서 만들어 놓은 도구들을 제대로 끌어안고, 너는 네가 만들고 싶은 개쩌는 기능에만 집중하자는 선언문 같은 거다. 스프린트마다 87번째 바퀴를 또 못생기게 재발명하지 말고 말이야, 이 고집불통 XX아.
왜 굳이 내 “순수 HTML” 천국을 버리고 이 자바스크립트 마법에 몸을 던져야 하냐고?
너 지금 돌판에 새긴 문장이나 던져놓는 수준으로 끝낼 게 아니잖아? 뭔가 인터랙티브하고, 동적으로 변하고, 유저들이 녹슨 숟가락으로 자기 눈알을 후벼 파고 싶어 하지 않게 만드는 무언가를 만들고 싶잖아. 너는 전단지(flyer) 하나 던져놓고 끝내려는 게 아니라, 애플리케이션을 만들고 싶은 거라고, 이 XX야.
그러니까 제발 그냥 리액트를 쓰라고(혹은 Vue, Svelte, 아니면 자학 취향이면 Angular라도 – 요지는 “지금 시대의 프레임워크를 좀 쓰라”는 거다, XX아):
HTML의 “인터랙티브” 기능? 그건 방명록이랑 서커스 구경용이지, 진짜 애플리케이션용이 아니야, 이 망상에 빠진 XX야.
“근데 HTML에도 <details>, <dialog>, 폼 같은 거 있잖아요!” 그래, 네 애도 크레용은 손에 쥐고 있겠지. 귀엽긴 하다. 그렇다고 그걸로 초고층 빌딩 설계도를 그리게 시키냐?
실시간 협업 에디터, 동적으로 변하는 트레이딩 대시보드, 엔터프라이즈급 프로젝트 관리 툴 같은 걸 HTML ‘인터랙티브’ 요소 몇 개랑 onClick 몇 방으로 만들겠다고? 꿈도 참 거창하시네, 사랑스러운 단세포 XX야. 그런 거로는 버튼 하나 눌렀을 때 “짠!” 하고 튀어나오는 수준이나 겨우 커버할 수 있고, 복잡한 유저 워크플로우를 오케스트레이션하는 건 꿈도 못 꾼다.
HTML이 네 손에 쥐여주는 건 조그만 자갈 하나야. 반면 프레임워크는 채석장 전체랑 중장비를 통째로 안겨준다고. 자, 그 자갈 한 알로 뭘 만들 건데? 끝내주는 문진(종이가 날리지 않도록 누르는 물건)으로 한번 깎아볼래?
상태 관리(State Management), 이 멍청한 유인원 XX!
“좋아요 버튼 하나 상태 토글하는 정도는 클래스 붙였다 뗐다 하면 되죠~” 귀엽네, 진짜. 그게 네 인생에서 마주할 최고 난이도라면 얼마나 좋겠냐.
문제는 그게 아니잖아. 필터만 수십 개 박힌 대시보드, 열 군데에서 실시간으로 쏟아지는 데이터, 유저마다 전부 다른 설정이 UI 전체를 뒤바꾸고, 다섯 명이 같은 문서에 동시에 키보드를 두들기는 협업 편집 환경까지 한꺼번에 굴려야 할 때가 온다고. 그 순간 네 “심플한” 자바스크립트는 스파게티 괴물로 변신해서, 크툴루(Cthulhu ─ 미국 작가 러브크래프트가 창조한 우주적 공포의 신, 인간 정신을 부숴버리는 혼돈의 대명사)조차 TV 앞에서 티타임 즐기는 귀여운 텔레토비처럼 보이게 만드는 수준의 혼돈을 빚어낸다.
프레임워크는 그나마 이 개판을 정신줄 붙잡고 관리할 수 있는 방법을 제공해준다. 그거 없이 버티겠다고? 그건 맞바람 부는 데서 오줌 싸는 짓이고, 전역 변수 하나 잘못 건드리는 순간 네 인생도 같이 박살 나는 거야.
컴포넌트란 말이야, XX아! 알아는 듣냐?
예전에 그랬지. 네비게이션 바 HTML을 페이지 30개에 복붙해놓고, 클라이언트가 링크 하나만 바꿔달라니까 페이지 30개를 일일이 열어서 수정했잖아. 그때는 스스로를 천재라고 여겼겠지. “와, 나 진짜 찢는다” 하면서 말이야.
리액트 같은 프레임워크는 네 뇌 구조를 강제로 컴포넌트 단위로 갈아엎어버린다. 버튼 하나를 만들면 스타일이랑 로직을 한 군데에 딱 정의해놓고, 그걸 여기저기서 갖다 쓰는 거지. 나중에 수정해야 하면? 그 한 군데만 바꾸면 전체가 싹 다 바뀐다. 이건 편리함의 문제가 아니라, 규모가 커졌을 때 정신 건강을 지킬 수 있느냐 없느냐의 문제야, 이 반복 노동에 환장한 XX야.
더 똑똑한 UI 업데이트. 더 이상 너를 DOM 노가다꾼으로 방치하지 않는다.
데이터 한 군데가 바뀔 때마다 페이지 여기저기 박혀 있는 <span>이랑 <div>를 하나하나 찾아다니며 손으로 업데이트하던 거, 기억나지? 여기 하나 바꾸면 저기 두 군데가 깜빡거리고, 그쪽은 깜빡임은 없는데 값이 또 안 맞고… 그러다 어느 순간엔 화면 전체가, 마약 빨고 미쳐 날뛰는 고장난 TV처럼 깜빡거리기 시작한다.
프레임워크는 바로 이런 일을 하라고 만든 물건이다. “데이터가 이런 모양이면, UI는 이렇게 생겨야 한다”라고 선언만 해주면, 실제로 어디를 어떻게 다시 그릴지는 프레임워크가 알아서 처리한다. 이건 “초능력 비서”를 하나 두는 거랑 비슷해. 의자 하나 옮길 때마다 집 전체에 페인트칠 다시 하는 병신 같은 짓거리, 더는 안 해도 된다는 얘기야. 진짜로 아직도 디지털 석기인처럼 DOM을 하나하나 쑤시면서 사는 인생이 좋냐?
규모를 키워도 접근성(Accessibility)을 지키고 싶다고? 그 “시맨틱” div 스프에 기도하는 걸로는 택도 없다, XX아.
“그냥 semantic HTML 잘 쓰면 된다니까요!”라며 마치 로제타 스톤을 발견한 양 소리치는 놈들이 있지. 와, 정말 혁명적이네. 그건 말 그대로 웹 개발 101이잖아, 잘난 척 XX야.
근데 네 애플리케이션이 실제로 필요로 하는 건 그 수준이 아니야. 정렬·필터가 되는 커스텀 데이터 그리드, 쓰레기 같지 않으면서 접근성까지 챙긴 콤보박스, 스크린 리더가 진짜로 쓸 수 있는 트리 뷰 같은 것들이 필요해지는 순간이 반드시 온다고. 거기다 role="button" 하나 달아놓고 “접근성 완료~” 외치는 수준이면 진짜 집에 가라.
진짜 접근성이라는 건, ARIA 속성 하나하나를 꼼꼼히 챙기고, 포커스 흐름을 정교하게 관리하고, 키보드 내비게이션을 제대로 설계하는 작업이야. “HTML + 바닐라 JS” 고집하는 그 접근은, 이걸 인스턴스마다 전부 손으로 다시 구현하겠다는 얘기고, 그때마다 실수해서 누군가에게 지옥을 선사하겠다는 선언이랑 똑같다.
프레임워크를 쓰면 “접근성 제대로 챙긴 컴포넌트”를 한 번 만들어 두고 그걸 재사용해서 일관성을 유지할 수 있어. 아니면 진짜로 aria-expanded를 아코디언 50개에 일일이 수동으로 관리하면서 사는 마조히스트(Masochist ─ 고통이나 학대를 오히려 즐기는 사람.)냐? 복잡한 앱에서 “그냥 HTML로만 할래요”라는 말은 결국 이 말이랑 똑같다. “장애가 있거나 나랑 다른 환경에 있는 유저는 X되든 말든 알 바 아니다.”
그 “심플한 HTML”이라는 가면 뒤에는, 네가 인정하기 싫어하는 수동 JS 지옥이 떡하니 기다리고 있다, 모래에 머리 처박은 XX야.
“하이드레이션 에러 같은 거 없고! 트리 셰이킹 같은 것도 필요 없음!”이라며, 마치 그게 악마가 풀어놓은 역병이라도 되는 양 떠들어대는 XX들이 있어. 근데 말이야, 그건 네가 언젠가는 반드시 마주칠 복잡한 문제들을 프레임워크가 대신 풀어주는 과정일 뿐이야.
그걸 피한다고 문제가 사라지냐고? 아니지, XX야. 그 순간부터는 DOM diffing, 상태 전파, 코드 스플리팅, 성능 최적화를 전부 네 손으로 직접 떠안게 된다. 그것도, 술 취한 당나귀가 춤추는 듯한 우아한 몸놀림으로 말이지.
지금 네가 택한 건 “단순함”이 아니다. **“수십 개의 바퀴를 전부 다시 만들고, 그것도 죄다 엉망으로 굴려놓은 다음, 거기에 ‘장인 정신’이라는 스티커를 붙이는 짓거리”**를 택한 거라고. 엔진 없는 차를 언덕 위로 맨몸으로 밀어 올리면서, 눈보라 속에 맨발이 얼어붙어가는 와중에 “괜찮아요, 이게 진짜 장인 정신이에요!”라고 외치는 꼴이라고 보면 된다.
HTML이 만들어주는 자동 전역 JS 변수에 기대는 거? 그건 웹 공룡 시절에나 하던 아마추어 짓이야, XX 해커야.
id 달아놓으면 그 이름으로 자바스크립트 변수가 자동으로 생긴다고? 와, 대단한 “기능”이네. 1998년, 네 모뎀이 죽어가는 로봇 소리를 내던 시절 기준으로는 말이지.
그걸 신나게 쓰겠다는 건, 젖은 휴지 위에 집을 짓고 비만 안 오기를 기도하는 꼴이야. 전역 네임스페이스 오염, 이름 충돌로 생기는 정체불명의 버그, 건드리기만 해도 무너져 내리는 취약한 코드베이스로 가는 직행 티켓이지.
프레임워크는 널 강제로 정상 세계로 끌고 올려준다. 컴포넌트 단위 스코프, 명시적인 props, 머리에 피도 안 통하는 전역 변수 대신 제대로 된 상태 관리. 이건 HTML이 “목발을 빌려주는 수준”이 아니라, 대놓고 네 코드에 지뢰를 심어놓은 수준이라고, XX아.
개발자 경험(DX)이 진짜 X나 중요하다. 아니면 넌 그냥 고통을 즐기는 변태다.
Hot Module Replacement? 상태 날려먹지 않고 바뀐 부분만 즉시 확인 가능. 타입스크립트로 타입까지 박힌 자바스크립트? 프로덕션에서 병신 같은 버그 터지기 전에 미리 잡아서, 네가 덜 멍청해 보이게 만들어준다. i18n부터 애니메이션까지, 없는 게 없는 대형 생태계. 린터, 포매터, 디버거까지, 전부 네 멘탈 보호 장비들이다.
프레임워크, 특히 리액트 주변에는 네 인생을 덜 비참하게 만들어주는 도구들이 산더미처럼 쌓여 있다. 이 말은 곧, 더 좋은 걸 더 빠르게, 덜 욕하면서 만들 수 있다는 얘기다. 브라우저 똥꼬짓이랑 document.write 같은 유물 붙들고 씨름하는 게 무슨 도 닦는 과정이라도 되는 양 굴지 마라. 그건 그냥 X같고 멍청한 선택일 뿐이니까.
성능은 첫 로딩 타임만으로 끝나는 게 아니야, 단세포 속도 집착증 XX야. 체감 성능과 상호작용이 더 중요해.
“내 HTML 사이트는 50ms 안에 로딩돼요!” 와, 대단하시네요. 자, 이제 여기에 로그인 붙이고, 동적 콘텐츠 넣고, 필터링·정렬 깔고, 실시간 업데이트까지 얹어봐. 그래도 페이지가 멀쩡할지 한번 보자고.
프레임워크, 특히 그 위에 얹어 쓰는 Next.js, Remix 같은 친구들은 코드 스플리팅(이 페이지에 필요한 JS만 로딩), 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG)을 통해 첫 로딩은 빠르게, 그 이후는 동적으로 굴러가게 만들어준다. 결국 너는 번개처럼 빠른 **“문서”**가 아니라, 진짜로 반응성 좋은 **“애플리케이션”**을 만들 수 있게 되는 거다.
근데 그 빌어먹을 번들 크기랑 자바스크립트 과다 문제는? 내 유저는 남극에서 전화선 모뎀 쓰는데?
맞아. 프레임워크로 만든 “Hello World”가 HTML로 만든 “Hello World”보다 덩치가 큰 건 당연하지. 셜록 홈즈 납셨네(영어권 관용구 “No shit, Sherlock” ─ 너무나 당연한 사실을 잘난 척하며 말하는 사람에게 “셜록 홈즈 납셨네” 식으로 비꼬는 표현). 근데, 너 지금 프로덕션에 “Hello World” 앱을 배포할 계획이야? 이모네 동네 강아지 산책 업체 홍보용으로 5페이지짜리 정적 브로슈어 사이트나 하나 만들 거면, 진짜 제발 그냥 HTML + CSS만 써라. 그 경우엔 저쪽 말이 백 번 맞다. 파리 한 마리 잡겠다고 바주카포 들고 나오지 말라고.
근데 네가 만들고 있는 게 이런 거라면:
- SaaS 플랫폼
- 복잡한 장바구니·유저 계정까지 달린 이커머스
- 실시간 피드가 돌아가는 소셜 미디어
- 프로젝트 관리 툴
- 데이터 시각화 대시보드
- 그 밖에, 클라이언트에서 상태가 겁나 많고, 인터랙션이 빡세게 돌아가는 것들 전부
…그렇다면 프레임워크의 “덩치”는 복잡한 비즈니스를 굴리기 위해 치러야 할 필수 비용이다, 구두쇠 XX아. 게다가 요즘 도구들은(트리 셰이킹, 코드 스플리팅, 레이지 로딩 같은 것들) 그 비용도 꽤 잘 깎아준다. 핵심은 “일에 맞는 도구를 제대로 골라 쓰라”는 거다. 망치가 필요한 자리에서 끝까지 드라이버만 붙들고 버티지 말라는 얘기야.
그러니까, 도대체 언제 “그냥 리액트를 써야” 하냐?
- 클라이언트 쪽 상태가 사소하지 않고, 제대로 관리해야 할 게 많을 때
- 재사용 가능한 UI 컴포넌트들을 만들어서 일관된 인터페이스를 유지하고 싶을 때
- 문서라기보다는, 진짜 싱글 페이지 애플리케이션(SPA) 이나, 그에 준하는 경험을 만들고 싶을 때
- 여럿이서 팀으로 작업하고, 모두가 공유할 구조와 패턴이 필요할 때
- 인터랙션의 복잡도가 미쳐 돌아가서, 바닐라 JS로는 스파게티 지옥이 확정일 때
- 이미 검증된 라이브러리와 도구들로 가득한 풍부한 생태계를 활용하고 싶을 때
- 대부분 정적인 페이지에서 1바이트라도 아끼는 것보다, 복잡한 기능을 빠르게 개발하는 속도가 더 중요할 때
진짜 문제는 리액트가 아니야. 너야, 가엾은 XX야.
문제는, 견과류 하나 까겠다고 핵폭탄을 쏘겠다며 설치는 인간들이야. 대세 기술이라고 무지성 카고컬트(Cargo Cult ─ 2차 세계대전 당시 남태평양 원주민들이 미군 보급기를 또 부르겠다고 나무로 활주로·관제탑·헤드폰을 흉내 내 만든 사례에서 유래. “본질은 모른 채 겉모습만 따라 하는 미신적 행동”) 하면서, 왜 쓰는지조차 이해 못 하는 개발자들 말이지. 간단한 연락처 폼 하나 만들겠다고 마이크로서비스에 쿠버네티스까지 들이붓고 팀 스무 명을 투입하는 미친 선택들. 사실 mailto 링크 하나면 끝나는 걸 말이야. 할머니 생신 케이크 초에 불 붙이겠다고 군용 화염방사기를 들고 오는 꼴이다, 눈 뜬 XX아.
그렇다고 멍청이가 공구를 잘못 쓴다는 이유로 도구 자체를 불태워버리자는 소리는 하지 말자. 리액트 같은 건 진짜로 어려운 문제를 풀려고 만든 강력한 도구다. 잘못된 건 도구가 아니라, 그걸 X같이 휘두르다가 자기 거시기까지 잘라먹는 사용자 쪽이지.
그러니까 다음번에 네가 복잡하고, 인터랙티브하고, 데이터로 미쳐 돌아가는 웹 애플리케이션을 만들게 되면… 제발 XX 좀, 리액트 좀 쓰라고. “나는 순수해서 그런 거 안 써요” 같은 소리나, “수제 바닐라 JS 장인 정신” 같은 헛소리 집어치우고. 그건 그냥 “나 도와줘”라는 절규일 뿐이니까. 유저들, 그리고 미래에 이 손수 만든 악몽을 유지보수해야 할 미래의 너 자신이 무릎 꿇고 감사 인사를 하게 될 거다.
자, 이제 진짜로 다시 작업하러 가서, 고집불통 HTML 유물을 하나 더 늘리지 말고, 제대로 작동하는 X나 멋진 무언가를 만들어 보라고.