[비개발자 사고법 05강] 리액트(React)는 '똑똑한 국밥집 주방'입니다 — 컴포넌트·프롭스·스테이트·리렌더 한 방 정리

왜 비개발자가 '리액트'까지 알아야 할까

"바이브 코딩 하면 AI가 알아서 다 해주는데, 리액트 같은 어려운 말까지 굳이 알아야 하나요?" 맞는 말입니다. 반복되는 페이지는 AI가 알아서 리액트로 잘 설정하고, 컴포넌트도 잘 만들어 줍니다. 그런데 문제는 'AI가 나에게 말을 걸 때'예요.

AI가 "이 페이지는 컴포넌트로 만들었어요"라고 하는데 컴포넌트가 뭔지 모르면 대화가 끊깁니다. "스테이트가 안 바뀌어서 화면이 안 바뀐 거예요"라고 하는데 '스테이트? 미국 주(州)인가?' 하면 답이 없죠. 김지백 강사에 따르면, 리액트 용어를 알면 그 순간 "아, 안에 있는 값이 안 바뀌어서 화면이 그대로구나. 값을 바꿔 달라고 하면 되겠네"라고 정확히 받아칠 수 있습니다. 코드를 직접 짜기 위해서가 아니라, AI와 같은 언어로 대화하기 위해 비개발자도 개념만은 알아 둬야 합니다.

🍲 리액트(React) = 새벽에 육수 한 솥 끓여두는 똑똑한 주방

30년 된 돼지국밥집이 있습니다. 처음엔 사장님이 손님 한 명 올 때마다 육수를 새로 끓여 냈어요. 그런데 장사가 너무 잘되니, 매번 육수 끓이는 것 자체가 일이 됐죠. 그래서 사장님은 전략을 바꿉니다 — 새벽에 큰 솥으로 육수를 한 번 끓여두고, 손님이 오면 밥·고기·고명에 그 육수만 부어 빠르게 내주기로요. 맛은 똑같고, 손님에게는 훨씬 빠르게 나갑니다.

코딩도 똑같습니다. 온라인 쇼핑몰에 상품이 50개라면, 상품 페이지를 매번 똑같은 코드로 새로 짜는 것은 손님 올 때마다 육수를 새로 끓이는 것과 같아요. 느리고 비효율적이죠. 대신 틀(조리법) 하나를 만들어 두고 알맹이만 갈아 끼우면 빠르고 일관성 있게 50개를 찍어낼 수 있습니다. 이게 리액트예요.

📜 컴포넌트(Component) = 대대로 물려준 '조리법'

가게가 30년이 되자 사장님은 아들에게 가게를 물려주려 합니다. 그런데 아들은 다 잘하는데 딱 하나, "똑같은 국밥을 100그릇이든 1000그릇이든 한결같이 차려내는 법"을 모릅니다. 그래서 사장님이 종이 한 장을 꺼내 줍니다. "육수를 만들고 → 밥을 깔고 → 육수를 붓고 → 고명을 얹어 → 손님에게 낸다" — 이 순서를 정해 놓은 조리법이죠.

"아버지, 이 조리법을 뭐라고 부르나요?" — "이걸 컴포넌트라고 한단다." 컴포넌트는 이렇게 한 번 정해 두면 똑같은 것을 몇 번이고 그대로 찍어낼 수 있는 레시피입니다. 화면으로 치면 '상품 카드 한 장을 만드는 조리법'이고, 그 조리법으로 똑같은 카드를 50장, 100장 찍어내는 거예요.

🧂 프롭스(Props) = 손님마다 다른 '옵션'

요즘 손님들은 까다롭습니다. "소금 없어요?", "다대기 좀 더 주세요", "곱빼기로요", "파 빼 주세요"… 정신없는 와중에 하나하나 맞춰 주기가 힘들죠. 사장님 아내가 아이디어를 냅니다. "주문받을 때 미리 물어보자. 기본인지 곱빼기인지, 소금은 한 스푼인지 두 스푼인지. 그 옵션만 만들어진 육수에 더 넣어 내주면 되잖아."

공통으로 만든 내용(조리법)은 그대로 두고, 손님마다 다른 옵션만 추가하는 것 — 이걸 리액트에서 프롭스(Props)라고 합니다. 쿠팡에서 텐트를 검색해 보세요. 상품 카드들이 다 똑같은 형식입니다(위에 사진 → 아래 상품명 → 가격 → 배송 → 별점). 그런데 사진·이름·가격만 카드마다 다르죠. 바로 그 '갈아 끼우는 알맹이'가 프롭스예요.

🔥 스테이트(State) = 그날그날 변하는 '육수'

이 집엔 매일 조금씩 변하는 게 하나 있습니다. 바로 그날그날 끓이는 육수예요. 어제보다 진하기도 하고, 날씨·습도에 따라 맛이 살짝 다르기도 하죠. 조리법(컴포넌트)은 안 바뀌지만, 육수는 살아서 매일 변합니다. 이렇게 계속 변하는 값을 리액트에서는 스테이트(State)라고 합니다.

다시 쿠팡으로 가볼까요. '담기'를 누르면 장바구니 숫자가 하나씩 올라가죠. '좋아요'를 누르면 숫자가 바뀌고요. 이렇게 그날그날, 사용자의 행동에 따라 살아서 변하는 값이 스테이트입니다.

♻️ 리렌더(Re-render) = 육수만 바꾸면 화면이 알아서 다 바뀐다

장사가 대박 나서 부산에 2호점을 냅니다. 그런데 경상도 손님들은 하나같이 "맛은 있는데 좀 싱겁네요"라고 해요. 한두 명이면 그 사람에게만 소금(프롭스)을 더 주면 되는데, 오는 손님 100명이 100명 다 싱겁다고 합니다. 그릇을 하나하나 고칠 순 없죠.

아들이 묘수를 냅니다. "매일 아침 끓이는 육수 자체에 소금을 한 스푼 더 넣자." 그러자 그 육수로 나가는 모든 국물이 한 번에 짜졌습니다. 그릇 하나하나(프롭스)를 고칠 필요 없이, 육수(스테이트)만 바꾸니 모든 화면이 알아서 따라 바뀐 거죠. 이걸 리렌더(리렌더링)라고 합니다.

한눈에 보는 리액트 5단어 정리

사장님처럼 AI에게 시키는 법 — 증상으로 원인 콕 집기

이제 진짜 써먹을 차례입니다. 리액트 단어를 알면, 화면이 이상할 때 "어디가 문제인지" AI에게 콕 집어 말할 수 있어요. 증상만 보고도 원인을 짚는 거죠.