React 무료로 배울 수 있나요?

네, 코드마스터의 React 강의는 전부 무료입니다. 광고도 없습니다. 개념노트는 로그인 없이 열람할 수 있습니다.

React 초보자도 따라갈 수 있나요?

네. 모든 레슨이 개념 설명 → 코드 예시 → 인터랙티브 데모 → 확인 퀴즈 순서로 구성되어 있어 사전 지식 없이도 따라올 수 있습니다.

React 학습에 얼마나 걸리나요?

각 레슨은 평균 30~60분 분량입니다. 하루 1~2개 기준 약 1~2개월이면 카테고리 전체를 완주할 수 있습니다.

JavaScript

조건부 렌더링

💡 왜 배워야 할까요?

🎯 사용자 상태에 따라 다른 화면을 보여줄 수 있습니다.

💼 로그인/로그아웃, 에러 메시지 등 실무에서 자주 씁니다.

⚡ 동적이고 반응형 웹사이트를 만드는 필수 기술입니다.

🏢 실무에서는

실무에서는 사용자가 로그인했으면 프로필을, 로그아웃했으면 로그인 버튼을 보여줍니다. 또한 데이터 로딩 중에는 로딩 스피너를, 에러 발생 시 에러 메시지를 조건부로 렌더링합니다.

조건부 렌더링 — && 연산자와 삼항연산자로 동적 UI

&& 연산자 패턴

jsx

{isLoggedIn && <UserProfile />}
// isLoggedIn이 true일 때만 렌더링
// false면 아무것도 렌더링 안됨

삼항연산자 패턴

jsx

{isLoggedIn ? <UserProfile /> : <LoginButton />}
// true면 UserProfile, false면 LoginButton

주의: && 함정

jsx

{count && <p>카운트: {count}</p>}
// count가 0이면? → "0"이 화면에 출력됨! (버그)
// 해결: {count > 0 && <p>...</p>}

언제 무엇을 사용?

상황	사용
하나만 보여주거나 안 보여주거나	&&
A 또는 B 중 하나	삼항연산자
복잡한 조건	if/else + 변수

💻 로그인/비로그인 + 로딩 스피너 + 에러 메시지

import { useState } from 'react';

// ===== 로그인 상태에 따른 조건부 렌더링 =====
function AuthSection() {
  // 입력: 로그인 여부
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 처리: 조건에 따라 다른 UI 선택

  // 로딩 중 → 스피너 표시
  if (loading) {
    return <div className="spinner">로딩 중...</div>;
  }

  // 에러 → 에러 메시지 표시
  if (error) {
    return <p style={{ color: "red" }}>오류: {error.message}</p>;
  }

  // 출력: 조건에 따라 다른 UI 렌더링
  return (
    <div>
      {/* 삼항연산자: 로그인 여부에 따라 다른 컴포넌트 */}
      {isLoggedIn ? (
        <div>
          <p>환영합니다! 🎉</p>
          <button onClick={() => setIsLoggedIn(false)}>로그아웃</button>
        </div>
      ) : (
        <div>
          <p>로그인이 필요합니다.</p>
          <button onClick={() => setIsLoggedIn(true)}>로그인</button>
        </div>
      )}

      {/* && 연산자: 로그인 시에만 알림 표시 */}
      {isLoggedIn && <p>새 알림이 3개 있습니다.</p>}
    </div>
  );
}

💡 💡 조건부 렌더링 팁

▸&& 주의: {0 && <Comp/>}는 0이 렌더링됨 → {count > 0 && ...} 사용
▸조기 반환: 로딩/에러 먼저 처리하면 코드가 깔끔
▸Record 맵: switch보다 객체 매핑이 깔끔
▸null 반환: 아무것도 렌더링하지 않으려면 null

이 개념은 React 컴포넌트 개발에서 핵심적입니다. 리액트의 선언적 UI 패러다임을 이해하고, props와 state의 차이를 명확히 구분하세요. 컴포넌트는 입력(props)에 대해 항상 동일한 출력(JSX)을 반환하는 순수 함수처럼 동작해야 합니다.

⚛️ React 패턴 — 조건부 렌더링

조건부 렌더링을 React에서 어떻게 쓰는지 코드와 함께 단계별로 익혀보세요.

1 🧩 1. 조건부 렌더링 사용 시나리오

이 기능이 필요한 상황.

↓

2 💻 2. 코드 작성

조건부 렌더링의 기본 사용법.

↓

3 🎨 3. 렌더링 결과

사용자가 보는 화면.

↓

4 💡 4. 실무 팁

흔한 함정과 베스트 프랙티스.

🚦 조건부 렌더링

코드를 직접 수정하면 0.7초 후 자동 반영됩니다. React 18 + Babel로 브라우저에서 즉시 실행.

🖥️ 실행 결과 — 렌더링된 React 컴포넌트

✏️ React 코드 수정하기 (클릭해서 열기)

⚛️ React 18 + Babel Standalone — 결과 먼저 확인 후 코드 편집기에서 직접 수정해볼 수 있습니다.

확인 퀴즈

`{isLoggedIn && <UserProfile />}`에서 isLoggedIn = false이면?