품절부터 에러까지: 붕어빵 가게로 배우는 리액트 화면 제어(Conditional Rendering) 공유 링크 만들기 Facebook X Pinterest 이메일 기타 앱 - 1월 27, 2026 품절부터 에러까지: 붕어빵 가게로 배우는 리액트 화면 제어(Conditional Rendering) 품절부터 에러까지: 붕어빵 가게로 배우는 리액트 화면 제어(Conditional Rendering) 지난 글에서 우리는 붕어빵 틀(컴포넌트)과 재료(데이터)에 대해 알아봤습니다. 하지만 장사를 하다 보면 늘 평화롭지만은 않죠. 팥이 다 떨어질 수도 있고, 갑자기 기계가 고장 날 수도 있습니다. 리액트(React)에서도 마찬가지입니다. 데이터가 항상 예쁘게 도착하지는 않거든요. 이때 필요한 것이 바로 조건부 렌더링(Conditional Rendering)입니다. 특정 조건에 따라 “이 화면을 보여줄지 말지”를 결정하는 기술이죠. 핵심 요약 (실무 4종 세트) Success: 정상 데이터 표시 Loading: 불러오는 중(스켈레톤/스피너) Empty: 결과 없음(품절/검색결과 없음) Error: 실패(재시도/복구 경로) 📚 목차 조건부 렌더링이 필요한 이유 Empty: 팥이 다 떨어졌다면? Loading: 붕어빵을 굽는 중이에요 Error: 기계가 고장 났어요 조건 분기 체크리스트 표(4상태) 복붙용 상태 규칙표(State Rule Table) 상품 상세 상태 규칙표(품절/가격 미노출/옵션 필수) 기획서 문장 템플릿 마치며: “만약에…”라는 질문의 힘 FAQ 참고 자료 1. 조건부 렌더링이 필요한 이유 실무에서 UI는 항상 “정상 데이터”만 받지 않습니다. 네트워크는 느릴 수 있고(Loading), 데이터가 0건일 수 있고(Empty), 서버가 실패할 수도 있습니다(Error). 그래서 기획 단계에서 성공 화면만 그려놓으면 개발자는 반드시 되묻습니다. “로딩 때는요?”, “0건이면요?”, “실패면 어떤 문구/버튼을 보여줘요?” 조건부 렌더링을 이해한다는 것은, 이 질문들을 문서에서 선제 차단하는 것입니다. 2. Empty: 팥이 다 떨어졌다면? (Empty Case) 붕어빵 목록 화면을 기획했다고 합시다. 그런데 오늘따라 장사가 너무 잘 돼서 팔 수 있는 붕어빵이 하나도 없다면? 기획의 부재(Empty를 안 그리면 생기는 일) 화면에 아무것도 안 나오거나, 빈 테이블만 덜렁 보입니다. 사용자는 “오류인가?”라고 생각하고 이탈합니다. 조건부 렌더링 적용(Empty UI) 예: 리스트 length === 0이라면 “오늘 준비한 물량이 소진되었습니다” 같은 안내 컴포넌트를 보여줍니다. 💡 기획 Tip 모든 목록 화면에는 ‘검색 결과 없음’ / ‘콘텐츠 없음’ 상태 기획이 세트로 따라와야 합니다. (문구 + 추천 행동(CTA) + 이동 경로까지) Empty 화면에 넣을 3가지(최소 구성) 안내 문구: 왜 비어 있는지(품절/조건/검색어) 대안 행동(CTA): 홈으로, 인기 메뉴 보기, 필터 초기화 복구 힌트: “필터를 바꿔보세요” 같은 가이드 3. Loading: 붕어빵을 굽는 중이에요 (Loading State) 주문을 받았는데 붕어빵이 구워지는 데 5분이 걸립니다. 손님은 그냥 가만히 서 있어야 할까요? 리액트에서 서버 데이터를 불러오는 동안 화면이 멈춰 있으면 사용자는 불안해합니다. 조건부 렌더링 적용(Loading UI) 예: isLoading === true라면 실제 붕어빵 대신 스켈레톤(Skeleton) UI 또는 로딩 스피너를 보여줍니다. Loading 화면에 넣을 3가지(최소 구성) 스켈레톤/스피너: “작동 중”을 시각적으로 전달 인터랙션 정책: 버튼 비활성/중복 클릭 방지(loading state) 시간이 길어질 때 대비: “잠시만 기다려 주세요” 문구 또는 취소/뒤로 4. Error: 기계가 고장 났어요! (Error State) 갑자기 붕어빵 기계에 문제가 생겼습니다. 리액트에서는 서버가 터졌거나 인터넷이 끊겨 데이터를 가져오지 못하는 상황입니다. 조건부 렌더링 적용(Error UI) 예: isError === true라면 당황스러운 코드 뭉치 대신 “잠시 후 다시 시도해 주세요”라는 안내와 재시도 버튼이 포함된 에러 UI를 보여줍니다. 💡 기획 Tip 에러 화면은 “문구”보다 복구 경로가 핵심입니다. 사용자에게 “다음 행동”을 꼭 줘야 이탈을 줄일 수 있습니다. Error 화면에 넣을 4가지(최소 구성) 톤앤매너: 불안감 최소화(너무 딱딱한 문구 금지) 재시도(CTA): 다시 시도 버튼 대체 경로: 홈으로/고객센터/오프라인 안내 로그/코드 노출 금지: 사용자에게 개발용 오류 메시지 노출은 피하기 5. 조건 분기 체크리스트 표(4상태) 개발자와 소통할 때 아래 4가지 상태에 대한 화면이 기획서에 포함되어 있는지 확인해 보세요. 리액트 개발자는 이 조건들을 코드로 구현하게 됩니다. 조건부 렌더링 4가지 상태 체크리스트(기획서용) 상황(State) 리액트 조건부 렌더링 예시 기획자가 준비할 것 성공 (Success) 목록/상세 등 메인 UI 표시 메인 UI 디자인, 데이터 매핑, 인터랙션 로딩 (Loading) 스켈레톤 UI / 로딩 스피너 로딩 애니메이션/문구, 버튼 비활성 정책 결과 없음 (Empty) “검색 결과가 없습니다” 안내 UI 안내 문구, 추천 행동(CTA), 이동 버튼 실패 (Error) “네트워크 오류” + 재시도 버튼 에러 메시지 톤앤매너, 복구 경로(재시도/홈) 6. (복붙용) 상태 규칙표(State Rule Table): 개발자가 질문 없이 구현하게 만드는 표 조건부 렌더링에서 가장 중요한 건 “상태가 있을 수 있다”가 아니라 언제 그 상태로 들어가고(진입 조건), 언제 끝나며(종료 조건), 화면이 무엇을 보여주는지(UI)를 문서로 고정하는 것입니다. 상태 규칙표 1) 목록 화면(리스트) 기준 템플릿 리스트 화면 상태 규칙표(복붙 템플릿) 화면/영역 State 진입 조건(언제 true?) 종료 조건(언제 false?) UI 표시(무엇을 보여줌) CTA/정책(사용자 행동/규칙) 리스트(목록) Success 데이터 조회 성공 & items.length > 0 조회 재시작 또는 필터 변경 목록 컴포넌트 렌더링(카드/테이블) 스크롤/페이지네이션 정책, 정렬/필터 노출 리스트(목록) Loading 조회 요청 시작(진입) 시 성공/실패 응답 수신 시 스켈레톤 UI 또는 스피너 로딩 중 버튼/필터 인터랙션 가능 여부(차단/허용) 명시 리스트(목록) Empty 조회 성공 & items.length === 0 필터 초기화/검색어 변경 후 재조회 “검색 결과가 없습니다/품절” 안내 UI CTA: 홈으로, 필터 초기화, 인기 메뉴 보기(선택) 리스트(목록) Error 조회 실패(네트워크/서버) 재시도 성공 또는 뒤로가기 에러 안내 UI + 재시도 버튼 문구 톤앤매너, 재시도/홈 이동 등 복구 경로 명시 상태 규칙표 2) 상태 우선순위(겹칠 때 무엇을 먼저 보여줄까?) 실무에서 가장 자주 생기는 질문이 “로딩이면서 에러일 수 있나요?” 같은 겹침 이슈입니다. 아래처럼 우선순위를 박아두면 구현이 빨라집니다. 상태 우선순위 규칙표(추천 기본값) 우선순위 상태 조합 표시 규칙(권장) 1 (최우선) Error 발생 Error UI 표시, Loading/Empty 숨김(재시도 CTA 제공) 2 Loading 진행 중 Loading UI 표시, Empty 숨김(중복 클릭 정책 명시) 3 Success & 0건 Empty UI 표시(필터 초기화/홈 이동 CTA 제공) 4 (기본) Success & 1건 이상 메인 UI 표시 상태 규칙표 3) 문구/CTA 결정표(기획서 필수) 문구/CTA 결정표(기획서 필수) State 안내 문구(예시) CTA(버튼/링크) 비고(정책) Loading “붕어빵 굽는 중입니다… 잠시만요!” 없음(기본) / 취소(선택) 로딩 중 입력/클릭 허용 범위 Empty “오늘 준비한 물량이 소진되었습니다.” / “검색 결과가 없습니다.” 홈으로 / 필터 초기화 / 인기 메뉴 보기 Empty 원인(품절/검색조건)별 문구 분기 여부 Error “일시적인 오류입니다. 잠시 후 다시 시도해 주세요.” 다시 시도 / 홈으로 / 고객센터(선택) 재시도 횟수 제한, 에러 코드 노출 여부(권장: 숨김) 기획자가 개발자에게 던지면 좋은 한 줄 질문 “이 화면은 Loading/Empty/Error 중 어떤 상태가 동시에 발생할 수 있고, 우선순위는 어떻게 할까요?” “Empty가 정상 0건인지, 필터 조건 때문인지 분리할까요?” “Error에서 사용자는 어디로 복구되나요? 재시도 성공 시 어떤 상태로 돌아가나요?” 7. 상품 상세 상태 규칙표: 품절/가격 미노출/옵션 필수까지 한 번에 상품 상세는 “보여주기”만 하는 화면 같지만, 실제로는 조건부 렌더링이 가장 많이 터지는 곳입니다. 특히 품절, 가격 미노출(로그인/등급/지점 제한), 옵션 필수 같은 정책이 섞이면 개발자 질문이 늘어나니, 아래 표로 진입/종료 조건 + UI + CTA를 고정해두면 깔끔합니다. 상태 규칙표 1) 상품 상세 기본 상태(Loading/Success/Error) 상품 상세 화면 상태 규칙표(기본) 화면/영역 State 진입 조건(언제 true?) 종료 조건(언제 false?) UI 표시(무엇을 보여줌) CTA/정책(사용자 행동/규칙) 상품 상세 Loading 상품 상세 조회 요청 시작 성공/실패 응답 수신 상세 영역 스켈레톤(이미지/타이틀/가격/버튼 자리) 로딩 중 구매/담기 버튼 비활성(중복 요청 방지) 상품 상세 Success 조회 성공 & 상품 데이터 존재 재조회(새로고침/옵션 변경으로 가격 재계산 등) 상품 정보(이미지/설명/옵션/가격/버튼) 렌더링 옵션 필수 여부에 따라 CTA 활성 조건 분기(아래 표 참조) 상품 상세 Error 조회 실패(네트워크/서버/권한) 재시도 성공 또는 뒤로가기/홈 이동 에러 안내 UI + 재시도 버튼 대체 경로: 홈/카테고리/고객센터(선택). 오류 코드 노출 금지 권장 상태 규칙표 2) 상품 정책 상태(품절/가격 미노출/옵션 필수) 분기 상품 상세 정책 상태 규칙표(품절/가격/옵션) 정책 State 진입 조건(예시) UI 표시(화면 변화) CTA/버튼 정책 기획자가 결정할 것(필수) 품절(Out of Stock) stock === 0 또는 isOutOfStock === true 품절 배지/문구 노출, 수량 입력 숨김(선택) 구매/담기 버튼 disabled 또는 “재입고 알림” 버튼으로 대체 품절 문구 톤앤매너, 대체 CTA(재입고 알림/유사상품 보기) 여부 가격 미노출(Price Hidden) isPriceHidden === true (로그인/등급/지점 제한 등) 가격 영역에 “로그인 후 가격 확인” 또는 “매장 선택 필요” 안내 구매 버튼 잠금(비활성) + “로그인/매장 선택” CTA 제공 가격 미노출 사유 분기(로그인/등급/지점)와 이동 경로(로그인/선택 화면) 옵션 필수(Option Required) requiredOptions.length > 0 && isOptionSelected === false 옵션 영역 강조(가이드), 상단에 “옵션 선택 필요” 안내 구매/담기 버튼 disabled. 옵션 선택 완료 시 활성화 필수 옵션 누락 시 메시지/스크롤 이동(옵션 영역으로 점프) 여부 가격 재계산(Price Calculating) 옵션 변경 직후 isPriceCalculating === true 가격 영역 스켈레톤/로딩 표시(가격만 부분 로딩) 구매/담기 버튼 로딩 처리 또는 잠시 비활성 부분 로딩 허용 여부(전체 로딩 vs 가격만 로딩), UX 문구 상태 우선순위(상품 상세 추천 기본값) 정책 상태가 동시에 걸릴 수 있습니다. “품절이면서 가격 미노출” 같은 케이스도 가능하죠. 아래 우선순위를 기획서에 고정하면 구현/QA가 빨라집니다. 상품 상세 상태 우선순위(권장) 우선순위 상태 표시 규칙(권장) 1 Error 에러 UI 최우선(상세/정책 상태 숨김, 재시도 제공) 2 Loading 초기 조회 로딩은 상세 전체 스켈레톤(정책 분기 전 로딩 우선) 3 품절 품절이면 구매/담기 불가, CTA는 품절 정책 우선 4 가격 미노출 가격/구매 제한 안내 + 로그인/선택 CTA 제공 5 옵션 필수 옵션 선택 전까지 구매/담기 비활성 + 옵션 영역 강조 6 Success(정상) 모든 조건 충족 시 일반 상세 UI + 구매/담기 활성 기획서 문장(복붙 템플릿) “상품 상세는 Loading/Success/Error를 기본으로 가지며, 성공 후에도 품절/가격 미노출/옵션 필수 정책 상태에 따라 CTA가 분기됩니다.” “품절이면 구매/담기 CTA는 disabled 또는 ‘재입고 알림’으로 대체되며, 품절 상태가 최우선입니다.” “옵션 필수 상품은 옵션 선택 전까지 구매/담기 버튼을 비활성화하고, 누락 시 옵션 영역으로 유도(강조/스크롤)합니다.” 8. 기획서 문장 템플릿(상태 분기 설명용) Empty(결과 없음) 문장 “목록 데이터가 0건이면 Empty UI를 노출하고, CTA는 ‘홈으로’와 ‘필터 초기화’를 제공합니다.” “검색 결과가 없을 때는 ‘필터 초기화’ 버튼을 제공해 복구 경로를 보장합니다.” Loading(불러오는 중) 문장 “조회 시작 시 isLoading=true로 전환하며, 리스트 영역에 스켈레톤 UI를 노출합니다.” “로딩 중에는 중복 클릭 방지를 위해 주요 버튼을 disabled 또는 loading 처리합니다.” Error(실패) 문장 “조회 실패 시 isError=true이며, 에러 UI에는 ‘다시 시도’ 버튼을 포함합니다.” “에러 발생 시 사용자에게 개발용 메시지를 노출하지 않으며, 안내 문구는 서비스 톤앤매너를 따릅니다.” 복구(성공으로 돌아가기) 문장 “재시도 성공 시 isError=false, isLoading=false로 전환하고 메인 UI를 렌더링합니다.” 9. 마치며: “만약에…”라는 질문의 힘 기획자가 조건부 렌더링 원리를 이해한다는 것은, 사용자의 흐름이 끊기지 않게 방어막을 치는 것과 같습니다. “데이터가 없을 땐 어떤 화면을 보여줄까요?”, “로딩 중에는 어떤 인터랙션을 줄까요?”를 먼저 묻는 기획자는 개발자에게 신뢰를 줍니다. 붕어빵 가게 사장님(기획자)이 변수를 미리 대비해두면, 붕어빵을 굽는 사람(개발자)은 오직 굽는 일에만 집중할 수 있으니까요. 🐟🔥 10. 자주 묻는 질문(FAQ) Q 조건부 렌더링(Conditional Rendering)이란 무엇인가요? A 특정 조건(로딩/결과없음/에러 등)에 따라 화면(UI)을 다르게 보여주는 방식입니다. React에서는 상태(State)에 따라 컴포넌트를 선택적으로 렌더링합니다. Q 목록 화면에서 반드시 준비해야 하는 상태는 무엇인가요? A Success(정상), Loading(불러오는 중), Empty(결과 없음), Error(실패) 4가지 상태를 세트로 기획하는 것이 안전합니다. Q Empty와 Error를 같은 화면으로 처리해도 되나요? A 권장하지 않습니다. Empty는 정상 흐름(0건)이고 Error는 실패라서 문구, CTA, 복구 경로가 달라야 합니다. 11. 참고 자료 React 공식 문서: Conditional Rendering (react.dev) MDN Web Docs (developer.mozilla.org) 공유 링크 만들기 Facebook X Pinterest 이메일 기타 앱
품절부터 에러까지: 붕어빵 가게로 배우는 리액트 화면 제어(Conditional Rendering) 지난 글에서 우리는 붕어빵 틀(컴포넌트)과 재료(데이터)에 대해 알아봤습니다. 하지만 장사를 하다 보면 늘 평화롭지만은 않죠. 팥이 다 떨어질 수도 있고, 갑자기 기계가 고장 날 수도 있습니다. 리액트(React)에서도 마찬가지입니다. 데이터가 항상 예쁘게 도착하지는 않거든요. 이때 필요한 것이 바로 조건부 렌더링(Conditional Rendering)입니다. 특정 조건에 따라 “이 화면을 보여줄지 말지”를 결정하는 기술이죠. 핵심 요약 (실무 4종 세트) Success: 정상 데이터 표시 Loading: 불러오는 중(스켈레톤/스피너) Empty: 결과 없음(품절/검색결과 없음) Error: 실패(재시도/복구 경로) 📚 목차 조건부 렌더링이 필요한 이유 Empty: 팥이 다 떨어졌다면? Loading: 붕어빵을 굽는 중이에요 Error: 기계가 고장 났어요 조건 분기 체크리스트 표(4상태) 복붙용 상태 규칙표(State Rule Table) 상품 상세 상태 규칙표(품절/가격 미노출/옵션 필수) 기획서 문장 템플릿 마치며: “만약에…”라는 질문의 힘 FAQ 참고 자료 1. 조건부 렌더링이 필요한 이유 실무에서 UI는 항상 “정상 데이터”만 받지 않습니다. 네트워크는 느릴 수 있고(Loading), 데이터가 0건일 수 있고(Empty), 서버가 실패할 수도 있습니다(Error). 그래서 기획 단계에서 성공 화면만 그려놓으면 개발자는 반드시 되묻습니다. “로딩 때는요?”, “0건이면요?”, “실패면 어떤 문구/버튼을 보여줘요?” 조건부 렌더링을 이해한다는 것은, 이 질문들을 문서에서 선제 차단하는 것입니다. 2. Empty: 팥이 다 떨어졌다면? (Empty Case) 붕어빵 목록 화면을 기획했다고 합시다. 그런데 오늘따라 장사가 너무 잘 돼서 팔 수 있는 붕어빵이 하나도 없다면? 기획의 부재(Empty를 안 그리면 생기는 일) 화면에 아무것도 안 나오거나, 빈 테이블만 덜렁 보입니다. 사용자는 “오류인가?”라고 생각하고 이탈합니다. 조건부 렌더링 적용(Empty UI) 예: 리스트 length === 0이라면 “오늘 준비한 물량이 소진되었습니다” 같은 안내 컴포넌트를 보여줍니다. 💡 기획 Tip 모든 목록 화면에는 ‘검색 결과 없음’ / ‘콘텐츠 없음’ 상태 기획이 세트로 따라와야 합니다. (문구 + 추천 행동(CTA) + 이동 경로까지) Empty 화면에 넣을 3가지(최소 구성) 안내 문구: 왜 비어 있는지(품절/조건/검색어) 대안 행동(CTA): 홈으로, 인기 메뉴 보기, 필터 초기화 복구 힌트: “필터를 바꿔보세요” 같은 가이드 3. Loading: 붕어빵을 굽는 중이에요 (Loading State) 주문을 받았는데 붕어빵이 구워지는 데 5분이 걸립니다. 손님은 그냥 가만히 서 있어야 할까요? 리액트에서 서버 데이터를 불러오는 동안 화면이 멈춰 있으면 사용자는 불안해합니다. 조건부 렌더링 적용(Loading UI) 예: isLoading === true라면 실제 붕어빵 대신 스켈레톤(Skeleton) UI 또는 로딩 스피너를 보여줍니다. Loading 화면에 넣을 3가지(최소 구성) 스켈레톤/스피너: “작동 중”을 시각적으로 전달 인터랙션 정책: 버튼 비활성/중복 클릭 방지(loading state) 시간이 길어질 때 대비: “잠시만 기다려 주세요” 문구 또는 취소/뒤로 4. Error: 기계가 고장 났어요! (Error State) 갑자기 붕어빵 기계에 문제가 생겼습니다. 리액트에서는 서버가 터졌거나 인터넷이 끊겨 데이터를 가져오지 못하는 상황입니다. 조건부 렌더링 적용(Error UI) 예: isError === true라면 당황스러운 코드 뭉치 대신 “잠시 후 다시 시도해 주세요”라는 안내와 재시도 버튼이 포함된 에러 UI를 보여줍니다. 💡 기획 Tip 에러 화면은 “문구”보다 복구 경로가 핵심입니다. 사용자에게 “다음 행동”을 꼭 줘야 이탈을 줄일 수 있습니다. Error 화면에 넣을 4가지(최소 구성) 톤앤매너: 불안감 최소화(너무 딱딱한 문구 금지) 재시도(CTA): 다시 시도 버튼 대체 경로: 홈으로/고객센터/오프라인 안내 로그/코드 노출 금지: 사용자에게 개발용 오류 메시지 노출은 피하기 5. 조건 분기 체크리스트 표(4상태) 개발자와 소통할 때 아래 4가지 상태에 대한 화면이 기획서에 포함되어 있는지 확인해 보세요. 리액트 개발자는 이 조건들을 코드로 구현하게 됩니다. 조건부 렌더링 4가지 상태 체크리스트(기획서용) 상황(State) 리액트 조건부 렌더링 예시 기획자가 준비할 것 성공 (Success) 목록/상세 등 메인 UI 표시 메인 UI 디자인, 데이터 매핑, 인터랙션 로딩 (Loading) 스켈레톤 UI / 로딩 스피너 로딩 애니메이션/문구, 버튼 비활성 정책 결과 없음 (Empty) “검색 결과가 없습니다” 안내 UI 안내 문구, 추천 행동(CTA), 이동 버튼 실패 (Error) “네트워크 오류” + 재시도 버튼 에러 메시지 톤앤매너, 복구 경로(재시도/홈) 6. (복붙용) 상태 규칙표(State Rule Table): 개발자가 질문 없이 구현하게 만드는 표 조건부 렌더링에서 가장 중요한 건 “상태가 있을 수 있다”가 아니라 언제 그 상태로 들어가고(진입 조건), 언제 끝나며(종료 조건), 화면이 무엇을 보여주는지(UI)를 문서로 고정하는 것입니다. 상태 규칙표 1) 목록 화면(리스트) 기준 템플릿 리스트 화면 상태 규칙표(복붙 템플릿) 화면/영역 State 진입 조건(언제 true?) 종료 조건(언제 false?) UI 표시(무엇을 보여줌) CTA/정책(사용자 행동/규칙) 리스트(목록) Success 데이터 조회 성공 & items.length > 0 조회 재시작 또는 필터 변경 목록 컴포넌트 렌더링(카드/테이블) 스크롤/페이지네이션 정책, 정렬/필터 노출 리스트(목록) Loading 조회 요청 시작(진입) 시 성공/실패 응답 수신 시 스켈레톤 UI 또는 스피너 로딩 중 버튼/필터 인터랙션 가능 여부(차단/허용) 명시 리스트(목록) Empty 조회 성공 & items.length === 0 필터 초기화/검색어 변경 후 재조회 “검색 결과가 없습니다/품절” 안내 UI CTA: 홈으로, 필터 초기화, 인기 메뉴 보기(선택) 리스트(목록) Error 조회 실패(네트워크/서버) 재시도 성공 또는 뒤로가기 에러 안내 UI + 재시도 버튼 문구 톤앤매너, 재시도/홈 이동 등 복구 경로 명시 상태 규칙표 2) 상태 우선순위(겹칠 때 무엇을 먼저 보여줄까?) 실무에서 가장 자주 생기는 질문이 “로딩이면서 에러일 수 있나요?” 같은 겹침 이슈입니다. 아래처럼 우선순위를 박아두면 구현이 빨라집니다. 상태 우선순위 규칙표(추천 기본값) 우선순위 상태 조합 표시 규칙(권장) 1 (최우선) Error 발생 Error UI 표시, Loading/Empty 숨김(재시도 CTA 제공) 2 Loading 진행 중 Loading UI 표시, Empty 숨김(중복 클릭 정책 명시) 3 Success & 0건 Empty UI 표시(필터 초기화/홈 이동 CTA 제공) 4 (기본) Success & 1건 이상 메인 UI 표시 상태 규칙표 3) 문구/CTA 결정표(기획서 필수) 문구/CTA 결정표(기획서 필수) State 안내 문구(예시) CTA(버튼/링크) 비고(정책) Loading “붕어빵 굽는 중입니다… 잠시만요!” 없음(기본) / 취소(선택) 로딩 중 입력/클릭 허용 범위 Empty “오늘 준비한 물량이 소진되었습니다.” / “검색 결과가 없습니다.” 홈으로 / 필터 초기화 / 인기 메뉴 보기 Empty 원인(품절/검색조건)별 문구 분기 여부 Error “일시적인 오류입니다. 잠시 후 다시 시도해 주세요.” 다시 시도 / 홈으로 / 고객센터(선택) 재시도 횟수 제한, 에러 코드 노출 여부(권장: 숨김) 기획자가 개발자에게 던지면 좋은 한 줄 질문 “이 화면은 Loading/Empty/Error 중 어떤 상태가 동시에 발생할 수 있고, 우선순위는 어떻게 할까요?” “Empty가 정상 0건인지, 필터 조건 때문인지 분리할까요?” “Error에서 사용자는 어디로 복구되나요? 재시도 성공 시 어떤 상태로 돌아가나요?” 7. 상품 상세 상태 규칙표: 품절/가격 미노출/옵션 필수까지 한 번에 상품 상세는 “보여주기”만 하는 화면 같지만, 실제로는 조건부 렌더링이 가장 많이 터지는 곳입니다. 특히 품절, 가격 미노출(로그인/등급/지점 제한), 옵션 필수 같은 정책이 섞이면 개발자 질문이 늘어나니, 아래 표로 진입/종료 조건 + UI + CTA를 고정해두면 깔끔합니다. 상태 규칙표 1) 상품 상세 기본 상태(Loading/Success/Error) 상품 상세 화면 상태 규칙표(기본) 화면/영역 State 진입 조건(언제 true?) 종료 조건(언제 false?) UI 표시(무엇을 보여줌) CTA/정책(사용자 행동/규칙) 상품 상세 Loading 상품 상세 조회 요청 시작 성공/실패 응답 수신 상세 영역 스켈레톤(이미지/타이틀/가격/버튼 자리) 로딩 중 구매/담기 버튼 비활성(중복 요청 방지) 상품 상세 Success 조회 성공 & 상품 데이터 존재 재조회(새로고침/옵션 변경으로 가격 재계산 등) 상품 정보(이미지/설명/옵션/가격/버튼) 렌더링 옵션 필수 여부에 따라 CTA 활성 조건 분기(아래 표 참조) 상품 상세 Error 조회 실패(네트워크/서버/권한) 재시도 성공 또는 뒤로가기/홈 이동 에러 안내 UI + 재시도 버튼 대체 경로: 홈/카테고리/고객센터(선택). 오류 코드 노출 금지 권장 상태 규칙표 2) 상품 정책 상태(품절/가격 미노출/옵션 필수) 분기 상품 상세 정책 상태 규칙표(품절/가격/옵션) 정책 State 진입 조건(예시) UI 표시(화면 변화) CTA/버튼 정책 기획자가 결정할 것(필수) 품절(Out of Stock) stock === 0 또는 isOutOfStock === true 품절 배지/문구 노출, 수량 입력 숨김(선택) 구매/담기 버튼 disabled 또는 “재입고 알림” 버튼으로 대체 품절 문구 톤앤매너, 대체 CTA(재입고 알림/유사상품 보기) 여부 가격 미노출(Price Hidden) isPriceHidden === true (로그인/등급/지점 제한 등) 가격 영역에 “로그인 후 가격 확인” 또는 “매장 선택 필요” 안내 구매 버튼 잠금(비활성) + “로그인/매장 선택” CTA 제공 가격 미노출 사유 분기(로그인/등급/지점)와 이동 경로(로그인/선택 화면) 옵션 필수(Option Required) requiredOptions.length > 0 && isOptionSelected === false 옵션 영역 강조(가이드), 상단에 “옵션 선택 필요” 안내 구매/담기 버튼 disabled. 옵션 선택 완료 시 활성화 필수 옵션 누락 시 메시지/스크롤 이동(옵션 영역으로 점프) 여부 가격 재계산(Price Calculating) 옵션 변경 직후 isPriceCalculating === true 가격 영역 스켈레톤/로딩 표시(가격만 부분 로딩) 구매/담기 버튼 로딩 처리 또는 잠시 비활성 부분 로딩 허용 여부(전체 로딩 vs 가격만 로딩), UX 문구 상태 우선순위(상품 상세 추천 기본값) 정책 상태가 동시에 걸릴 수 있습니다. “품절이면서 가격 미노출” 같은 케이스도 가능하죠. 아래 우선순위를 기획서에 고정하면 구현/QA가 빨라집니다. 상품 상세 상태 우선순위(권장) 우선순위 상태 표시 규칙(권장) 1 Error 에러 UI 최우선(상세/정책 상태 숨김, 재시도 제공) 2 Loading 초기 조회 로딩은 상세 전체 스켈레톤(정책 분기 전 로딩 우선) 3 품절 품절이면 구매/담기 불가, CTA는 품절 정책 우선 4 가격 미노출 가격/구매 제한 안내 + 로그인/선택 CTA 제공 5 옵션 필수 옵션 선택 전까지 구매/담기 비활성 + 옵션 영역 강조 6 Success(정상) 모든 조건 충족 시 일반 상세 UI + 구매/담기 활성 기획서 문장(복붙 템플릿) “상품 상세는 Loading/Success/Error를 기본으로 가지며, 성공 후에도 품절/가격 미노출/옵션 필수 정책 상태에 따라 CTA가 분기됩니다.” “품절이면 구매/담기 CTA는 disabled 또는 ‘재입고 알림’으로 대체되며, 품절 상태가 최우선입니다.” “옵션 필수 상품은 옵션 선택 전까지 구매/담기 버튼을 비활성화하고, 누락 시 옵션 영역으로 유도(강조/스크롤)합니다.” 8. 기획서 문장 템플릿(상태 분기 설명용) Empty(결과 없음) 문장 “목록 데이터가 0건이면 Empty UI를 노출하고, CTA는 ‘홈으로’와 ‘필터 초기화’를 제공합니다.” “검색 결과가 없을 때는 ‘필터 초기화’ 버튼을 제공해 복구 경로를 보장합니다.” Loading(불러오는 중) 문장 “조회 시작 시 isLoading=true로 전환하며, 리스트 영역에 스켈레톤 UI를 노출합니다.” “로딩 중에는 중복 클릭 방지를 위해 주요 버튼을 disabled 또는 loading 처리합니다.” Error(실패) 문장 “조회 실패 시 isError=true이며, 에러 UI에는 ‘다시 시도’ 버튼을 포함합니다.” “에러 발생 시 사용자에게 개발용 메시지를 노출하지 않으며, 안내 문구는 서비스 톤앤매너를 따릅니다.” 복구(성공으로 돌아가기) 문장 “재시도 성공 시 isError=false, isLoading=false로 전환하고 메인 UI를 렌더링합니다.” 9. 마치며: “만약에…”라는 질문의 힘 기획자가 조건부 렌더링 원리를 이해한다는 것은, 사용자의 흐름이 끊기지 않게 방어막을 치는 것과 같습니다. “데이터가 없을 땐 어떤 화면을 보여줄까요?”, “로딩 중에는 어떤 인터랙션을 줄까요?”를 먼저 묻는 기획자는 개발자에게 신뢰를 줍니다. 붕어빵 가게 사장님(기획자)이 변수를 미리 대비해두면, 붕어빵을 굽는 사람(개발자)은 오직 굽는 일에만 집중할 수 있으니까요. 🐟🔥 10. 자주 묻는 질문(FAQ) Q 조건부 렌더링(Conditional Rendering)이란 무엇인가요? A 특정 조건(로딩/결과없음/에러 등)에 따라 화면(UI)을 다르게 보여주는 방식입니다. React에서는 상태(State)에 따라 컴포넌트를 선택적으로 렌더링합니다. Q 목록 화면에서 반드시 준비해야 하는 상태는 무엇인가요? A Success(정상), Loading(불러오는 중), Empty(결과 없음), Error(실패) 4가지 상태를 세트로 기획하는 것이 안전합니다. Q Empty와 Error를 같은 화면으로 처리해도 되나요? A 권장하지 않습니다. Empty는 정상 흐름(0건)이고 Error는 실패라서 문구, CTA, 복구 경로가 달라야 합니다. 11. 참고 자료 React 공식 문서: Conditional Rendering (react.dev) MDN Web Docs (developer.mozilla.org)
