09. 조건부 렌더링(Conditional Rendering)
1. 조건부 렌더링이란?
조건부 렌더링이란 조건에 따라 화면을 다르게 출력하는 방법입니다.
예를 들어
로그인 여부
좋아요 상태
모달 열기/닫기
관리자 메뉴
로딩 화면
모두 조건부 렌더링으로 구현합니다.
React에서는 JavaScript의 조건문을 JSX 안에서 사용할 수 있습니다.
2. 삼항 연산자
가장 많이 사용하는 방법입니다.
문법
조건 ? 참 : 거짓
예제
const login = true;
return (
<h2>
{login ? "로그인 완료" : "로그인 필요"}
</h2>
);
결과
로그인 완료
3. 좋아요 버튼
동부산CC 프로젝트 예제
const [liked, setLiked] = useState(false);
<button
onClick={() => setLiked(!liked)}
>
{liked ? "♥" : "♡"}
</button>
실행 결과
♡
↓
♥
↓
♡
↓
♥
State가 변경될 때마다 화면도 자동으로 변경됩니다.
4. && 연산자
참일 때만 화면을 출력합니다.
const admin = true;
{
admin &&
<button>
관리자 메뉴
</button>
}
결과
관리자 메뉴
admin이 false이면 아무것도 출력되지 않습니다.
5. 모달 열기
동부산CC 상세보기
const [modal, setModal] = useState(false);
버튼
<button
onClick={() => setModal(true)}
>
상세보기
</button>
조건부 렌더링
{
modal &&
<CourseModal />
}
닫기
<button
onClick={() => setModal(false)}
>
닫기
</button>
6. if문 사용
return 밖에서는 일반 if문을 사용할 수 있습니다.
let text;
if(login){
text="로그인 성공";
}else{
text="로그인 필요";
}
출력
<h2>
{text}
</h2>
7. 여러 조건
예제
const score = 95;
{
score>=90
?
"A등급"
:
"B등급"
}
결과
A등급
8. 동부산CC 예약 여부
const [reserve, setReserve] = useState(false);
예약 전
{
!reserve &&
<button>
예약하기
</button>
}
예약 후
{
reserve &&
<p>
예약이 완료되었습니다.
</p>
}
9. 검색 결과
const list=[];
{
list.length===0
?
<p>
검색 결과가 없습니다.
</p>
:
<CourseList />
}
10. 로딩 화면
const [loading, setLoading] = useState(true);
{
loading
?
<p>
Loading...
</p>
:
<Home />
}
API를 사용할 때 많이 사용합니다.
11. 로그인 화면
const [login, setLogin] = useState(false);
{
login
?
<MyPage />
:
<Login />
}
로그인 여부에 따라 다른 화면을 출력합니다.
12. React 실행 흐름
State
↓
조건 검사
↓
true
↓
컴포넌트 출력
↓
false
↓
다른 컴포넌트 출력
13. 동부산CC 예제
좋아요
{
liked
?
"♥"
:
"♡"
}
모달
{
modal &&
<CourseModal />
}
예약
{
reserve
?
<p>
예약 완료
</p>
:
<button>
예약하기
</button>
}
관리자
{
admin &&
<AdminMenu />
}
14. 조건부 렌더링 비교
방법 사용 예
삼항 연산자 로그인 여부, 좋아요 상태
&& 연산자 모달, 관리자 메뉴
if문 여러 조건 처리
switch문 복잡한 조건 처리
15. 실무에서 가장 많이 사용하는 패턴
{
loading
?
<Loading />
:
<Home />
}
{
modal &&
<Modal />
}
{
liked
?
"♥"
:
"♡"
}
이 세 가지 패턴은 React 실무에서 가장 자주 사용됩니다.
정리
조건부 렌더링은 State나 Props의 값에 따라 다른 화면을 출력하는 React의 핵심 기능입니다.
React에서는 주로 삼항 연산자(? :), 논리 AND(&&), if문을 사용하여 조건을 처리합니다.
동부산CC 프로젝트에서는 좋아요 버튼, 예약 완료 메시지, 코스 상세 모달, 관리자 메뉴, 검색 결과, 로딩 화면 등을 조건부 렌더링으로 구현할 수 있습니다.
사용자의 동작으로 State가 변경되면 React는 조건을 다시 계산하고 필요한 화면만 다시 렌더링하여 자연스럽게 화면을 업데이트합니다.
1. 조건부 렌더링이란?
조건부 렌더링이란 조건에 따라 화면을 다르게 출력하는 방법입니다.
예를 들어
로그인 여부
좋아요 상태
모달 열기/닫기
관리자 메뉴
로딩 화면
모두 조건부 렌더링으로 구현합니다.
React에서는 JavaScript의 조건문을 JSX 안에서 사용할 수 있습니다.
2. 삼항 연산자
가장 많이 사용하는 방법입니다.
문법
조건 ? 참 : 거짓
예제
const login = true;
return (
<h2>
{login ? "로그인 완료" : "로그인 필요"}
</h2>
);
결과
로그인 완료
3. 좋아요 버튼
동부산CC 프로젝트 예제
const [liked, setLiked] = useState(false);
<button
onClick={() => setLiked(!liked)}
>
{liked ? "♥" : "♡"}
</button>
실행 결과
♡
↓
♥
↓
♡
↓
♥
State가 변경될 때마다 화면도 자동으로 변경됩니다.
4. && 연산자
참일 때만 화면을 출력합니다.
const admin = true;
{
admin &&
<button>
관리자 메뉴
</button>
}
결과
관리자 메뉴
admin이 false이면 아무것도 출력되지 않습니다.
5. 모달 열기
동부산CC 상세보기
const [modal, setModal] = useState(false);
버튼
<button
onClick={() => setModal(true)}
>
상세보기
</button>
조건부 렌더링
{
modal &&
<CourseModal />
}
닫기
<button
onClick={() => setModal(false)}
>
닫기
</button>
6. if문 사용
return 밖에서는 일반 if문을 사용할 수 있습니다.
let text;
if(login){
text="로그인 성공";
}else{
text="로그인 필요";
}
출력
<h2>
{text}
</h2>
7. 여러 조건
예제
const score = 95;
{
score>=90
?
"A등급"
:
"B등급"
}
결과
A등급
8. 동부산CC 예약 여부
const [reserve, setReserve] = useState(false);
예약 전
{
!reserve &&
<button>
예약하기
</button>
}
예약 후
{
reserve &&
<p>
예약이 완료되었습니다.
</p>
}
9. 검색 결과
const list=[];
{
list.length===0
?
<p>
검색 결과가 없습니다.
</p>
:
<CourseList />
}
10. 로딩 화면
const [loading, setLoading] = useState(true);
{
loading
?
<p>
Loading...
</p>
:
<Home />
}
API를 사용할 때 많이 사용합니다.
11. 로그인 화면
const [login, setLogin] = useState(false);
{
login
?
<MyPage />
:
<Login />
}
로그인 여부에 따라 다른 화면을 출력합니다.
12. React 실행 흐름
State
↓
조건 검사
↓
true
↓
컴포넌트 출력
↓
false
↓
다른 컴포넌트 출력
13. 동부산CC 예제
좋아요
{
liked
?
"♥"
:
"♡"
}
모달
{
modal &&
<CourseModal />
}
예약
{
reserve
?
<p>
예약 완료
</p>
:
<button>
예약하기
</button>
}
관리자
{
admin &&
<AdminMenu />
}
14. 조건부 렌더링 비교
방법 사용 예
삼항 연산자 로그인 여부, 좋아요 상태
&& 연산자 모달, 관리자 메뉴
if문 여러 조건 처리
switch문 복잡한 조건 처리
15. 실무에서 가장 많이 사용하는 패턴
{
loading
?
<Loading />
:
<Home />
}
{
modal &&
<Modal />
}
{
liked
?
"♥"
:
"♡"
}
이 세 가지 패턴은 React 실무에서 가장 자주 사용됩니다.
정리
조건부 렌더링은 State나 Props의 값에 따라 다른 화면을 출력하는 React의 핵심 기능입니다.
React에서는 주로 삼항 연산자(? :), 논리 AND(&&), if문을 사용하여 조건을 처리합니다.
동부산CC 프로젝트에서는 좋아요 버튼, 예약 완료 메시지, 코스 상세 모달, 관리자 메뉴, 검색 결과, 로딩 화면 등을 조건부 렌더링으로 구현할 수 있습니다.
사용자의 동작으로 State가 변경되면 React는 조건을 다시 계산하고 필요한 화면만 다시 렌더링하여 자연스럽게 화면을 업데이트합니다.
#09. 조건부 렌더링(Conditional Rendering)