React는 UI를 구성하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI 요소들을 쉽게 만들 수 있습니다.
이번 글에서는 React에서 상태 관리를 위해 자주 사용되는 useState와 조건부 렌더링을 이용하여 동적인 UI를 구현하는 방법에 대해 알아보겠습니다.
useState의 개념
useState는 React의 훅(hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해줍니다. 클래스형 컴포넌트에서의 this.state와 this.setState를 대체하며, 함수형 컴포넌트에서도 상태를 가질 수 있도록 합니다. 자세한 내용은 여기에 정리해 두었으니 참고해보셔도 좋을 것 같습니다!
React useState 사용 예시
import React, { useState } from 'react';
function ExampleComponent() {
// 상태 변수와 상태를 갱신할 함수를 선언
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>카운트 증가</button>
</div>
);
}위 예제에서 useState(0)은 count라는 상태 변수와 setCount라는 상태 갱신 함수를 반환합니다. count의 초기 값은 0이며, setCount를 호출하여 상태를 변경할 수 있습니다.
조건부 렌더링이란?
조건부 렌더링(Conditional Rendering)은 특정 조건에 따라 다른 UI 요소를 렌더링하는 것을 의미합니다. 조건부 렌더링에는 다양한 방법이 있는데, React에서는 대표적으로 useState를 이용하여 사용하는 방법이 있습니다.
조건부 렌더링을 사용하여 사용자 인증 상태에 따른 UI 변경, 로딩 상태 표시, 권한에 따른 접근 제어, 제품 목록에서 품절 상태 표시, 양식 유효성 검사 결과 표시 등 다양한 구현을 할 수 있습니다.
예제 1)
useState와 조건부 렌더링을 이용한 토글 버튼
이제 useState와 조건부 렌더링을 활용하여 간단한 토글 버튼을 구현해 보겠습니다.
버튼을 클릭하면 상태가 변하고, 이에 따라 다른 내용이 렌더링되는 예제입니다.
코드 예제
import React, { useState } from 'react';
function ToggleButton() {
// 토글 상태를 관리하는 useState 훅
const [isToggled, setIsToggled] = useState(false);
// 버튼 클릭 시 호출되는 함수
const handleToggle = () => {
setIsToggled(!isToggled);
};
return (
<div>
<button onClick={handleToggle}>
{isToggled ? 'ON' : 'OFF'}
</button>
<p>현재 상태: {isToggled ? '켜짐' : '꺼짐'}</p>
</div>
);
}
export default ToggleButton;
코드 설명
- useState(false)를 사용하여 isToggled라는 상태 변수와 setIsToggled라는 상태 갱신 함수를 선언합니다. 초기 값은 false입니다.
- handleToggle 함수는 버튼이 클릭될 때 호출되며, setIsToggled를 사용하여 isToggled 상태를 반전시킵니다.
- 버튼의 텍스트와 아래의 문장은 isToggled 상태에 따라 다르게 렌더링됩니다.
.
.
.
기본적인 예제를 통해 useState를 이용한 상태 관리와 조건부 렌더링의 기본 개념을 알아보았습니다.
이를 응용하여 더 복잡한 UI에서도 이와 같은 방법으로 상태를 관리하고 조건에 따라 동적으로 내용을 변경할 수 있습니다.
예제 2)
사용자의 상태 여부에 따라 다른 UI를 보여주는 컴포넌트
더 복잡한 조건부 렌더링을 구현하는 예시로, 여러 조건에 따라 서로 다른 UI를 보여주는 상황을 다루어 보겠습니다.
이번 예제에서는 사용자의 로그인 상태, 관리자 여부, 그리고 새로운 알림이 있는지 여부에 따라
다른 UI를 보여주는 컴포넌트를 만들어보겠습니다.
코드 예시
import React, { useState } from 'react';
function UserProfile() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
const [hasNewNotifications, setHasNewNotifications] = useState(false);
const handleLogin = () => {
setIsLoggedIn(!isLoggedIn);
};
const handleAdminToggle = () => {
setIsAdmin(!isAdmin);
};
const handleNotificationToggle = () => {
setHasNewNotifications(!hasNewNotifications);
};
return (
<div>
<button onClick={handleLogin}>
{isLoggedIn ? '로그아웃' : '로그인'}
</button>
<button onClick={handleAdminToggle}>
{isAdmin ? '관리자 해제' : '관리자 권한 부여'}
</button>
<button onClick={handleNotificationToggle}>
{hasNewNotifications ? '알림 해제' : '새로운 알림 설정'}
</button>
<div style={{ marginTop: '20px' }}>
<h1>사용자 프로필</h1>
{!isLoggedIn && <p>로그인이 필요합니다.</p>}
{isLoggedIn && (
<div>
<p>안녕하세요, 사용자님!</p>
{isAdmin && <p>관리자 권한이 부여되었습니다.</p>}
{hasNewNotifications && <p>새로운 알림이 있습니다.</p>}
</div>
)}
</div>
</div>
);
}
export default UserProfile;
코드 설명
-
isLoggedIn, isAdmin, hasNewNotifications 상태 변수들을 사용하여 각각의 상태를 관리합니다.
-
handleLogin, handleAdminToggle, handleNotificationToggle 함수들을 통해 각 상태를 토글합니다.
-
조건부 렌더링을 위해 논리 연산자(&&)를 사용하여 각 상태에 따라 다른 UI를 표시합니다.
!isLoggedIn && <p>로그인이 필요합니다.</p>
사용자가 로그인하지 않았을 경우 "로그인이 필요합니다" 메시지를 표시합니다.
isLoggedIn && <div>...</div>
사용자가 로그인했을 경우 사용자 프로필 내용을 표시합니다.
isAdmin && <p>관리자 권한이 부여되었습니다.</p>
사용자가 관리자 권한을 가지고 있을 경우 "관리자 권한이 부여되었습니다" 메시지를 표시합니다.
hasNewNotifications && <p>새로운 알림이 있습니다.</p>
새로운 알림이 있을 경우 "새로운 알림이 있습니다" 메시지를 표시합니다.
.
.
.
이 예제를 통해 복잡한 조건부 렌더링을 구현하는 방법을 이해할 수 있습니다.
여러 상태를 관리하고 그 상태에 따라 동적으로 UI를 변경하는 기능은 사용자에게 다양한 경험을 제공할 수 있습니다.
React의 상태 관리와 조건부 렌더링을 적절히 활용하여 다양한 상황에 대응하는 UI를 만들어보세요.
그럼
HAPPY CODING!
