데브허브 | DEVHUB | React 19 Tutorial - 10 - Conditional RenderingReact 19 Tutorial - 10 - Conditional Rendering
- React 컴포넌트가 특정 조건에 따라 다른 콘텐츠를 표시하는 방법으로, 사용자 로그인 상태나 에러 메시지 표시에 활용됩니다. 🔄
- 1. If 문: 가장 기본적인 조건부 렌더링 방식으로, 조건에 따라 완전히 다른 JSX 블록을 반환하거나, 아무것도 렌더링하지 않을 때
null을 반환할 수 있습니다. 🚦
- 2. 삼항 연산자: JSX 내부에서
if-else 로직을 간결하게 표현하며, 단일 return 문 내에서 JSX의 특정 부분을 조건부로 렌더링할 때 매우 유용합니다. ❓
- 3. 논리 AND 연산자 (
&&): 조건이 참일 때만 JSX를 렌더링하고, 거짓일 때는 아무것도 렌더링하지 않는 '보이기/숨기기' 시나리오에 이상적입니다. (단, 숫자 0이 렌더링될 수 있으므로 주의 필요) ✅
- 4. 변수를 이용한 복잡한 로직: 조건이 복잡해질 경우,
return 문 이전에 변수에 JSX 요소를 할당하여 복잡한 로직을 미리 처리함으로써 JSX 코드를 깔끔하고 읽기 쉽게 유지할 수 있습니다. 🧩
- 핵심 원칙: 각 조건부 렌더링 방법의 장단점을 이해하고, 상황과 코드의 복잡성에 맞춰 가장 적절한 도구를 선택하여 가독성을 높이는 것이 중요합니다. 🛠️
- React 19.2 Activity 컴포넌트: UI 요소를 DOM에서 완전히 제거하지 않고 숨기거나 다시 표시하는 새로운 방법으로, 추후 강좌에서 더 자세히 다룰 예정입니다. 🆕