손님 올 때마다 육수를 새로 우리는 가게 vs 새벽에 한 냄비 우려두고 떠내는 가게.
🎬 콜드오픈 그 장면 — 창업주가 ‘손님마다 새로 우리던 육수’를 새벽 ‘한 솥’으로 바꾼 결정.
🐌 옛날 가게 (HTML/CSS/JS만)
손님마다 육수를 처음부터 새로 우림 — 순차로 하나씩, 답답하게.
⚡ 리액트 주방
새벽에 한 냄비 우려둠 — 주문 들어오면 그릇이 척 즉시.
손님은 결과만 말한다 — “국밥 하나요”. 과정(불 세기·우리는 시간)은 주방이 알아서.
육수 준비됨 — 떠내기만 하면 됨
❌ 만약 명령형이면…
결과가 아니라 ‘과정’을 일일이 지시하는 옛날 방식
조리법(컴포넌트) 한 줄만 고치면 → 9그릇이 한꺼번에 바뀐다.
🎬 콜드오픈 그 장면 — 아버지가 아들에게 전수한 ‘국밥 차려내는 조리법’이 바로 이것.
📋 이게 조리법입니다 — GukbapBowl
국밥 그릇 조리법 (component)
이 조리법 = 작은 조리법들의 조립 (마우스 올려보기)
🍲 육수 담기 🍚 밥 담기 🌿 고명 얹기┈┈ 이 조리법 1개 ┈┈▶ 저 9그릇 (전부 같은 조리법)
조리법은 작은 조리법들의 조립 — 칩에 마우스를 올리면 그 부분이 빛나요.
국밥집 비유에서 본 조리법(=컴포넌트)이 진짜 웹화면에선 이렇게 보여요. 아래 메뉴 카드 6개는 따로따로 만든 게 아니라, 카드 조리법 1개를 6번 찍어낸 겁니다.
조리법은 그대로. 그릇별 옵션(props)만 다르게 내려주면 다른 국밥. 육수(state)는 따로 살아있다.
🎬 콜드오픈 그 장면 — 아내의 ‘테이블 양념 세트’가 옵션(props), 매일 끓이는 ‘육수’가 state.
🥢 이 그릇에 뭘 줄까요? (props)
props = 조리법에 그릇별로 내려주는 옵션(고기 양·파·밥·다대기).
옵션(props)은 주방에서 정해 내려줘요. 손님이 받은 뒤엔 못 바꿔요.
결과 그릇 1개 (조리법 모양·테두리는 고정)
🍲 육수 냄비 (state)
이건 옵션이 아니라 따로 살아있는 육수예요. 바꾸면 어떻게 되는지는 4부에서 봅니다.
⚡ 빠른 주문 — 칩을 누르면 옵션(props) 4개가 한 번에 주입됩니다
국밥집에서 "옵션은 주방이 정하고 손님이 못 바꾼다, 그릇 안 육수는 계속 변한다"고 했죠. 진짜 배달앱이 정확히 그래요 — 아래 화면을 직접 눌러 보세요.
육수(state) 간만 다시 맞추면 → 그 육수를 쓰는 화면은 주방이 알아서 다시 차린다.
🎬 콜드오픈 그 장면 — 부산 2호점, 육수에 ‘소금 한 스푼’ 넣자 그 솥 모든 그릇이 자동으로.
🍲 육수 냄비 (state 값 상자)
🧯 여기는 어려우면 그냥 넘어가도 돼요
꼭 챙길 한 가지 : 육수(값)만 바꾸면, 화면은 리액트가 알아서 다시 차려줘요. 내가 화면을 손으로 안 고쳐도 됩니다. 딱 이거 하나면 충분해요.
아래는 ‘조금 더’ 궁금한 분만 보세요 — 안 봐도 수업엔 전혀 지장 없어요.
🍲 비유 : 못 무르는 국밥
이미 손님상에 나간 국밥은 못 무른다 — 국밥 비유는 딱 여기까지예요.
⚙️ 실제 : 바뀐 부분만 살짝
리액트는 화면을 통째로 새로 안 그리고 바뀐 부분만 콕 집어 바꿔요. 그래서 빨라요. (어떻게 그렇게 하는지는 안 외워도 OK — 리액트가 알아서 해요.)
국밥집에서 육수 간만 다시 맞추면 그 육수 쓰는 그릇만 다시 차려지듯, 웹화면도 값(state)만 바꾸면 그 부분만 알아서 다시 그려집니다. 버튼을 눌러 보세요.
완성 화면을 주방 구조로 읽기 — 조리법 경계 긋고, 증상이 옵션 문제인지 육수 문제인지 가린다.
반복되는 국밥 카드 3개 = 같은 조리법(GukbapBowl) 재사용. 헤더는 따로 1개.
🩺 증상 진단 미니 퀴즈
1 / 3 문항
진단 완료!
3 / 3
이제 AI한테 이렇게 말할 수 있어요 →
무서운 단어 펼쳐보기 — 결국 다 ‘냄비 새로 들이고 관리하는 도구’라는 느낌만.
🪝 냄비 거는 고리
냄비·도구를 주방에 걸어두는 고리. 필요한 도구를 리액트에 걸어 쓰는 장치라는 느낌만.
느낌만 챙기세요
🍲 새 냄비 들이기
새 냄비(육수=state) 하나 들여놓기. ‘이 값을 살아있게 관리할게요’ 선언. 4부의 육수가 이거예요.
느낌만 챙기세요
📝 ‘끝나면 저것도 해줘’ 메모
‘이 일 끝나면 저것도 해줘’ 메모. 육수 바뀌면 단골에게 문자 보내기처럼, 뭔가 바뀐 뒤 따라붙는 뒷일을 맡기는 도구라는 느낌만.
느낌만 챙기세요
🧂 만능 육수 베이스 vs 가게 통째
리액트=만능 육수 베이스(라이브러리) — 내가 필요할 때 떠다 씀. 프레임워크=가게 통째 패키지 — 동선·메뉴판까지 다 정해줌. 리액트는 앞쪽 느낌.
※ 정확한 경계는 강의 범위 밖 — 오늘은 ‘리액트=요리 도구(라이브러리) 느낌’까지만.
🛖 포장마차엔 과해요
메뉴 한 줄짜리 포장마차(작은 정적 한 장 페이지)엔 국밥집 주방이 과해요. 자주 바뀌고 복잡한 화면일수록 리액트가 빛나요.
느낌만 챙기세요
🛖 언제 국밥집까지 안 차려도 되나
버튼을 눌러 상황 예시를 바꿔보세요.
포장마차로 충분
작은 한 장 페이지 — 거의 안 바뀌고 단순함. 리액트(국밥집 주방)는 오히려 과합니다.
예 : 회사 소개 한 장, 행사 안내 포스터 페이지, 메뉴판 한 장
국밥집 주방 필요
자주 바뀌고 복잡한 화면 — 살아있는 값(state)·반복 카드(컴포넌트)가 많을수록 리액트가 빛납니다.
예 : 주문·장바구니 쇼핑몰, 실시간 판매 대시보드, 좋아요·댓글 많은 피드
무서운 단어들, 실제론 이렇게 단순하게 작동해요. 문법은 AI가 짜고, 우리는 '아 이게 그 도구구나' 느낌만 챙기면 됩니다.