🌱 기초 프론트엔드
조건부 렌더링이란?
쉽게 이해하기
날씨 앱을 떠올려보세요. 비가 오면 우산 아이콘을 보여주고, 맑으면 해 아이콘을 보여주죠. 조건부 렌더링은 이렇게 "만약 ~라면, ~를 보여줘"라는 식으로 상황에 맞는 화면을 선택해서 보여주는 거예요.
핵심 정리
조건에 따라 다른 화면을 보여주는 기술이에요.
자세히 알아보기
조건부 렌더링은 특정 조건이 참인지 거짓인지에 따라 다른 UI를 보여주는 기법이에요. 프론트엔드에서 정말 자주 쓰이는 패턴이죠.
가장 흔한 예는 로그인 상태에 따라 다른 화면을 보여주는 거예요. 로그인했으면 "환영합니다, OO님" 메시지와 로그아웃 버튼을 보여주고, 로그인 안 했으면 "로그인하세요" 버튼을 보여주는 식이에요. 데이터를 불러오는 중일 때 로딩 스피너를 보여주거나, 에러가 났을 때 에러 메시지를 보여주는 것도 조건부 렌더링이에요.
React에서는 주로 if 문이나 삼항 연산자(조건 ? A : B), 논리 연산자(조건 && 컴포넌트)를 써서 조건부 렌더링을 구현해요. Vue는 v-if와 v-show 디렉티브를 제공하고, Svelte는 {#if} 블록을 써요.
실무에서는 권한에 따라 메뉴를 다르게 보여주거나, 사용자 타입에 따라 다른 대시보드를 표시하거나, 결제 완료 여부에 따라 다른 페이지로 안내하는 등 수많은 곳에서 조건부 렌더링을 사용해요. 동적인 웹 앱을 만드는 데 없어서는 안 될 기술이에요.