동적 UI 제어: 조건부 렌더링과 리스트 렌더링

3. 동적 UI 제어: 조건부 렌더링과 리스트 렌더링

리액트로 화면을 만들 때 가장 많이 하는 두 가지 작업이 있습니다. 상황에 따라 화면을 다르게 보여주는 조건부 렌더링(Conditional Rendering)과 데이터 배열을 반복해서 화면에 그려주는 리스트 렌더링(List Rendering)입니다.

이 두 가지는 자바스크립트의 기본 문법인 삼항 연산자(?:), 논리 연산자(&&), 그리고 배열의 map() 함수를 그대로 활용하기 때문에 자바스크립트에 익숙할수록 리액트를 다루기가 훨씬 편해집니다.

💡 핵심 비유: 신호등과 붕어빵 기계

조건부 렌더링 (신호등): 빨간불일 때는 멈춤 표시, 초록불일 때는 걷기 표시를 띄우듯, 데이터의 참/거짓에 따라 다른 UI 컴포넌트를 스위칭합니다.
리스트 렌더링 (붕어빵 기계): map() 함수는 팥, 슈크림, 고구마(데이터)를 넣으면 똑같은 모양의 붕어빵(컴포넌트 UI) 3개로 찍어내어 배열로 반환해 주는 기계입니다.

🔄 map() 함수를 활용한 리스트 렌더링

📋 렌더링 문법 요약 정리

문법 / 키워드	용도	예시
조건 ? A : B	참이면 A, 거짓이면 B를 렌더링 (택 1)	`{isLogin ? <LogoutBtn/> : <LoginBtn/>}`
조건 && A	참일 때만 A를 렌더링 (아니면 렌더링 안함)	`{hasMsg && <p>새 메시지</p>}`
배열.map()	배열 안의 데이터 개수만큼 컴포넌트 반복 렌더링	`{users.map(u => <li key={u.id}>{u.name}</li>)}`

<div class="app-container"> <h3>동적 렌더링 시뮬레이션</h3> <div class="toolbar"> <button id="toggleLoginBtn" class="btn">로그인 상태 변경</button> </div> <div class="dashboard">  <div id="render-area"></div> </div> </div>

문법 / 키워드

용도

예시

조건 ? A : B

참이면 A, 거짓이면 B를 렌더링 (택 1)

{isLogin ? <LogoutBtn/> : <LoginBtn/>}

조건 && A

참일 때만 A를 렌더링 (아니면 렌더링 안함)

{hasMsg && <p>새 메시지</p>}

배열.map()

배열 안의 데이터 개수만큼 컴포넌트 반복 렌더링

{users.map(u => <li key={u.id}>{u.name}</li>)}