처음 만난 리액트 문서
9.2 Element Variables
조건부 렌더링을 사용하다보면, 렌더링 해야될 컴포넌트를 변수처럼 다루고 싶을 때가 있습니다. 이 때 사용할 수 있는 방법이 바로 Element Variables입니다. Element Variables은 이름 그대로 리액트 element를 변수처럼 다루는 방법입니다. 먼저 아래 코드를 살펴보도록 하겠습니다.
function LoginButton(props) {
return (
<button onClick={props.onClick}>
로그인
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
로그아웃
</button>
);
}
위 코드에는 LoginButton과 LogoutButton 이렇게 두 개의 컴포넌트가 있습니다. 각 컴포넌트는 이름의 의미처럼 로그인 버튼과 로그아웃 버튼을 나타냅니다. 그리고 아래에 나오는 LoginControl 컴포넌트에서는 사용자의 로그인 여부에 따라 이 두 개의 컴포넌트를 선택적으로 보여주게 됩니다.
function LoginControl(props) {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleLoginClick = () => {
setIsLoggedIn(true);
}
const handleLogoutClick = () => {
setIsLoggedIn(false);
}
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={handleLogoutClick} />;
} else {
button = <LoginButton onClick={handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
)
}
위 코드를 보면 isLoggedIn의 값에 따라서 button이라는 변수에 컴포넌트를 대입하는 것을 볼 수 있습니다. 그리고 이렇게 컴포넌트가 대입된 변수를 return에 넣어서 실제로 컴포넌트가 렌더링이 되도록 만들고 있습니다. 설명은 컴포넌트라고 했지만, 실제로는 컴포넌트로부터 생성된 리액트 element가 되겠죠. 이처럼 element를 변수처럼 저장해서 사용하는 방법을 Element Variables라고 부릅니다. 이렇게 별도로 변수를 선언해서 조건부 렌더링을 할 수도 있지만, 바로 다음에 나오는 Inline 조건문을 사용하면 조금 더 코드를 간결하게 작성할 수 있습니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page