조건부 렌더링 - if로 화면 분기하기
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React에서 `{count && <Text />}` 코드에서 count가 0일 때 어떤 결과가 나타나는가?
💡 JavaScript에서 0은 falsy 값이지만, React는 0을 렌더링합니다. {0 && <Text />}는 0을 반환하고 React가 이를 화면에 표시합니다. 안전하게 사용하려면 {count > 0 && <Text />} 또는 {!!count && <Text />}를 사용하세요.
Q2. 컴포넌트를 화면에서 완전히 숨기려면 어떻게 해야 하는가?
💡 React 컴포넌트에서 null을 반환하면 해당 컴포넌트는 DOM에서 완전히 제거됩니다. display: none은 DOM에는 남아있지만 눈에 보이지 않게 하는 CSS 방법입니다. 두 방법은 다른 동작을 합니다.
Q3. 다음 중 삼항 연산자(Ternary Operator)를 올바르게 사용한 것은?
💡 JSX 안에서는 일반 if 문을 직접 사용할 수 없습니다. 삼항 연산자는 {조건 ? 참일때 : 거짓일때} 형식으로 사용합니다. {isLoggedIn ? <Dashboard /> : <Login />}이 올바른 사용법입니다.
Q4. 여러 조건(로딩/에러/빈상태/데이터)을 처리할 때 가장 가독성이 좋은 방법은?
💡 if/else if 문으로 조건을 처리하고 결과를 변수에 저장한 후 JSX에서 변수를 사용하면 가독성이 좋습니다. 중첩 삼항 연산자는 복잡해지면 읽기 어렵습니다.
Q5. 다음 코드에서 isAdmin이 false일 때 결과는?
{isAdmin && <AdminPanel />}
💡 isAdmin이 boolean false일 때, {false && <AdminPanel />}는 false를 반환합니다. React는 false, null, undefined를 렌더링하지 않습니다. 따라서 아무것도 표시되지 않습니다. (boolean false는 0과 달리 렌더링되지 않습니다.)
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.