조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 뜻합니다.
주로 React, Vue, Angular 등의 프론트엔드 프레임워크에서 사용되고,
각각 조건부 렌더링을 처리하는 특별한 문법이 제공됩니다.
그렇다면 어째서 조건부 렌더링이라는
개념이 등장하게 되었고, 왜 필요한 건지 알아봅시다. 😎
📝조건부 렌더링 사용방법
⦁ 웹 개발 초기
<!DOCTYPE html>
<html>
<head>
<title>조건부 렌더링 예시</title>
</head>
<body>
<div id="app">
<h1>환영합니다!</h1>
<p id="login-message"></p>
</div>
<script>
// 로그인 상태를 나타내는 변수
var isUserLoggedIn = false;
// 조건에 따라 메시지를 설정하는 함수
function renderMessage() {
var messageElement = document.getElementById("login-message");
if (isUserLoggedIn) {
messageElement.textContent = "로그인되었습니다.";
} else {
messageElement.textContent = "로그인이 필요합니다.";
}
}
// 초기 메시지 렌더링
renderMessage();
// isUserLoggedIn 값 변경 예시
isUserLoggedIn = true;
renderMessage();
</script>
</body>
</html>사실 조건부 렌더링은 초기 웹 개발부터 존재한 개념입니다.
React와 같은 프론트엔드 라이브러리의 등장 이후 점점 더 많이 사용되기 시작한 개념이지만,
웹 개발에서 조건부 렌더링을 사용하는 것은 이전부터 일반적인 방법 중 하나였습니다.
당시에는 동적인 UI를 구현하기 위해 JavaScript와 HTML을 활용했습니다.
⦁ 프론트엔드 프레임워크
React, Vue, Angular와 같이 트렌디하고 모던한 프레임워크들은
조건부 렌더링을 더 쉽고 효율적으로 구현할 수 있는 많은 기능과 도구를 제공합니다. 👍
- React의 조건부 렌더링
// if문
function MyComponent({ isLoggedIn }) {
if (isLoggedIn) {
return <div>로그인되었습니다.</div>;
} else {
return <div>로그인이 필요합니다.</div>;
}
}// 삼항연산자
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? (
<div>로그인되었습니다.</div>
) : (
<div>로그인이 필요합니다.</div>
)}
</div>
);
}// && 연산자
function MyComponent({ isLoggedIn }) {
return (
<div>
{isLoggedIn && <div>로그인되었습니다.</div>}
{!isLoggedIn && <div>로그인이 필요합니다.</div>}
</div>
);
}// 변수 사용
function MyComponent({ isLoggedIn }) {
let message;
if (isLoggedIn) {
message = <div>로그인되었습니다.</div>;
} else {
message = <div>로그인이 필요합니다.</div>;
}
return <div>{message}</div>;
}✔ React는 자유도가 굉장히 높은 프레임워크입니다.
따라서 다양한 방법으로 조건부 렌더링을 구현할 수 있습니다.
- Vue의 조건부 렌더링
<div id="app">
<h1>환영합니다!</h1>
<p v-if="isUserLoggedIn">로그인되었습니다.</p>
<p v-else>로그인이 필요합니다.</p>
</div>✔ v-if 디렉티브를 사용합니다. 참 간결하고 간편합니다.
이런 점들이 Vue를 사랑하는 개발자가 많아진 이유가 아닐까 생각합니다. 😆
📝조건부 렌더링 사용목적
⦁ 비동기 데이터 처리
✔ 프론트엔드 개발을 하실 때 화면에 아무것도 렌더링 되지 않는 현상을
한 번 쯤은 보신 적 있을 겁니다.
데이터를 가져오는 API를 요청하고, 아직 응답이 완료되지 않은 상태에서
데이터를 렌더링 시키려고 할 때 흔하게 발생하는 이슈입니다.
바로 이런 경우 조건부 렌더링을 활용할 수 있습니다. 😀
데이터가 비동기적으로 불러와지는 경우,
조건문을 통해 데이터(객체)가 있을 때만 화면에 렌더링 시킬 수 있습니다.
또한 True, False 값을 통해 로딩 컴포넌트를 보여준다든지,
스켈레톤 UI를 보여주는 방식으로 사용자 경험을 개선할 수 도 있습니다.
⦁ 동적 UI
✔ 상황에 따라 특정 컴포넌트를 다르게 보여주거나 숨길 수 있습니다.
예를 들어, 사용자의 인증 상태에 따라 로그인이 된 상태라면 로그아웃 버튼을 보여주고 로그인이 안 된 상태라면 로그인 버튼을 보여줘야겠죠?
⦁ 성능 최적화
✔ 조건부 렌더링을 사용하면 불필요한 렌더링을 방지할 수 있기 때문에 성능을 최적화 할 수 있습니다.
조건이 충족되지 않으면 해당 부분을 렌더링 하지 않기 때문에 DOM 조작과 리소스 사용을 줄일 수 있습니다.
다음과 같은 장점들을 통해 애플리케이션의 유연성, 상호작용성, 성능 등을 개선할 수 있습니다. 😊
참고 문헌 :
ChatGPT
'Front-End > React' 카테고리의 다른 글
| [React] 리액트 QR 코드 생성하기 (qrcode.react) (7) | 2024.10.29 |
|---|---|
| [React] Zustand란? 사용하는 이유! (상태 관리 라이브러리, 사용 방법 예시) (3) | 2024.03.14 |
| [React] 리액트 CSS 초기화란? (CSS Reset, 여백 제거) (2) | 2023.10.12 |
| [TypeScript] 타입스크립트란? (개념, 문법 총 정리) (0) | 2023.01.17 |
| [React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기 (0) | 2022.12.05 |